1. 程式人生 > >關於videoJs遇到的坑(一個頁面有多個視訊需要載入)

關於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一個ProjectModule共存類似於Eclipse下一個WorkspaceProject

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