關於videoJs遇到的坑(一個頁面有多個視訊需要載入)
涉及到課程的視訊:有多節課選擇
廢話不多說直接上程式碼:
var videoPlayer = $("#my-video").get(0);
if (typeof (videoPlayer) != "undefined") {
var myPlayer = videojs('my-video');
myPlayer.dispose();
}
先判斷之前有沒有例項化過videoJs,例項化過的話就需要dispose()這個方法銷燬例項化的物件;
之後在動態新增:
var id = "my-video"; $("#my-wrap").html("<video id='" + id + "' class='video-js' controls preload='none' width='1280px' height='' poster='' ><source id='video-source' src='' type='video/mp4'></video>"); //設定資源路徑 $("#my-wrap").attr("src", $scope.videoUrl); videojs(id, {}, function () { //自動播放 // Player (this) is initialized and ready. var myPlayer = videojs(id); videojs(id).ready(function () { var myPlayer = this; myPlayer.play(); }); videojs(id).on("click", function () { if (myPlayer.paused()) { $(".vjs-has-started .vjs-big-play-button").show(); } else { $(".vjs-has-started .vjs-big-play-button").hide(); } }) });
這樣即可以實現視訊頁面 課程的切換
相關推薦
關於videoJs遇到的坑(一個頁面有多個視訊需要載入)
涉及到課程的視訊:有多節課選擇 廢話不多說直接上程式碼: var videoPlayer = $("#my-video").get(0); if (typeof (videoPlayer) != "undefined") { var myPlayer = vi
一個頁面有多個script標籤時,執行順序
JavaScript直譯器在執行指令碼時,是按塊執行的。通俗地說,就是瀏覽器在解析HTML文件流時,如果遇到一個script標籤,則JavaScript直譯器會等到這個程式碼塊都載入完成後,先對程式碼塊進行預編譯,然後再執行。執行完畢後,瀏覽器會繼續解析下面的HTML文件流,同時JavaSc
elementui 一個頁面有多個upload元件 ,共用方法時,怎麼傳自己的引數
https://www.cnblogs.com/steamed-twisted-roll/p/9473644.html &nbs
Vue-上拉加載與下拉刷新(mint-ui:loadmore)一個頁面使用多個上拉加載後沖突問題
tps loaded 讓其 ade disabled 元素 info 鏈接 加載 所遇問題: 該頁面為雙選項卡聯動,四個部分都需要上拉加載和下拉刷新功能,使用的mint-ui的loadmore插件,分別加上上拉加載後,只有最後一個的this.$refs.loadmore.o
HBASE列族不能太多的真相 (一個table有幾個列族就有幾個 Store)
gii 大小 mil 更多 觸發 flush adc 同事 就是 今天和同事聊到這個問題,發現者自己理解上有點錯誤。借此機會記錄下 HRegionServer內部管理了一系列HRegion對象,每個HRegion對 應了table中的一個region,HRegion中由多
Idea一個Project有多個Module共存(類似於Eclipse下一個Workspace有多個Project)
Eclipse可以在一個工作空間下有多個專案共存,這樣就非常方便的管理多個專案。Idea預設一個專案一個Project,如果管理多個專案的話,需要開啟多個Idea,在多個Idea之間來回切換,這樣非常
echarts學習總結(二):一個頁面存在多個echarts圖形,圖形自適應視窗大小
如上圖所示一個頁面有兩個echarts圖形:散點圖和折線圖,如果還寫為 myChart.setOption(option); window.onresize = myChart.resize; 則只有
ie 報錯:'SyntaxError: strict 模式下不允許一個屬性有多個定義 ' ,基於vue element-ui的坑的解決
環境:基於vue-cli的element- ui的專案 在其他瀏覽器正常。在ie中報錯的程式碼: <el-select filterable clearable v-model="Form.P
css基礎 一個元素有多個類名
.com ide htm ack visual css基礎 logs 基礎 tps 禮悟: 公恒學思合行悟,尊師重道存感恩。葉見尋根三返一,江河湖海同一體。 虛懷若谷良心主,願行無悔給最苦。讀書鍛煉養身心,誠勸且行且珍惜。
swiper,一個頁面使用多個輪播
自動 styles nta min slide tcs top ont pic 代碼示例: <html> <head> <link href="https://cdn.bootcss.com/Swiper/4.3.0/css/sw
angular的tm-pagination分頁外掛一個頁面使用多個分頁的問題
很多分頁外掛在一個頁面中使用多個的時候都會出現一些問題(據說的,我還沒有什麼經驗),當然我在使用tm-pagination的時候也沒有跳過這個坑,先上個pagination最基礎的使用。其中有幾點需要注意的地方 1.外掛有兩個關鍵引數currentPage、itemsPerPage,當前頁碼和每
c++ 牛頓迭代法求根原始碼(c++函式有多個不同型別返回值的處理方法)
#include <iostream> #include<cmath> using namespace std; struct result { double x;
spring IOC一個類有多個構造器,用構造器注入怎麼解決匹配問題
Car 類寫入兩個構造器(引數不同) package com.beans; public class Car { private String brand; private String corp; private double price
一個介面有多個實現類,當呼叫介面中的方法時,如何判定用的是哪個實現類
一、簡單例子: 1. 直接new一個例項,這樣肯定知道用的哪個例項2. 定義介面型別的變數,用某個例項去初始化。。。這樣也是肯定知道用的哪個例項一般我們用第二種方式有一個好處,如果以後要改動,那麼只需要修改其引用的例項,改動較少!舉個例子:A介面,A1,A2,A3實現A
html滾動條使用,以及頁面有多個div塊,如何讓body頁面不使用滾動條,只在某個div內使用滾動條
滾動條基本知識: 建議比價華麗的頁面使用overflow:scroll這個樣式的滾動條,比較好看。 scrollbar屬性、樣式詳解 1. overflow內容溢位時的設定(設定被設定物件是否顯示滾動條) overflow-x水平方向內容溢位時的設定 ov
一個頁面實現多個管理頁面任意切換
在做專案的時候,我們有時候會遇到一種需求,一個頁面有兩種資料來源,也就對應著兩個列表頁。但是你不想新建兩個頁面: 一、是因為新建頁面多了本來就麻煩; 二、是頁面之間跳轉感覺太明顯,使用者體驗不是很好
一個頁面存在多個echarts圖形,resize失效,圖形自適應視窗大小
當一個頁面有兩個echarts圖形,想要頁面大小發生改變,重新繪製圖形如果還寫為 myChart.se
頁面有多個相同的id或者class時,繫結jquery事件無效,解決方案
<div id="cp_liuyan" class="cp_tl cp_tl2" >按鈕</div> <div id="cp_liuyan" class="cp_tl cp_tl2" >按鈕</div> <div id="
matlab實現畫散點圖(一個x對應多個y)
1、具體實現是,首選匯入資料 aray = importdata(’位置‘); [m,n] = size(array); 2、x軸間距設定 x = 1:1:m 3、處理陣列資料 figure(1)
[c/c++] 一個程序有多個執行緒,用什麼方法讓主執行緒不退出更好,佔用資源最少,效率最高?
[c/c++] 一個程序有多個執行緒,用什麼方法讓主執行緒不退出更好,要求佔用資源最少,效率最高? 我所知道的不讓主執行緒退出的方法有: 一,死迴圈:while(1);/ for(;;); 二,pause(); 讓主執行緒暫停等待訊號使其退出 三,另一種死迴圈whil