1. 程式人生 > >關於Vue使用VideoJS實例銷毀、創建,並控制後臺m3u8的數據請求

關於Vue使用VideoJS實例銷毀、創建,並控制後臺m3u8的數據請求

one new -c dispose load vue bsp 關於 cat

關於Video.js的使用方法就不再說了,有興趣的請遷躍:https://videojs.com/

VideoJS中並沒有stop之類控制後臺數據請求的參數,只有暫停 video.pause()方法 ,但是對於後臺的請求是不會暫停的,如果我頁面有多個Vedio實例需要存在,這樣就太影響頁面效率了

技術分享圖片

我使用的是Vue 組件化的VedioJS控件

技術分享圖片

1、動態控制參數close管理video對m3u8的後臺請求;

2、動態生成videoID;

技術分享圖片

3、在子組件中監聽closed的值;

watch:{
      close(newValue,oldValue){
        if
(newValue==true){ var player = videojs(this.videoMy); if (typeof (player) != "undefined") { player.pause() //暫停 player.dispose() //銷毀 } }else{
          //動態生成video $(
".vqp").html("<video id=" + this
.videoMy + " class=‘vd video-js vjs-default-skin vjs-big-play-centered‘ controls preload=‘none‘ ><source type=‘application/x-mpegURL‘></video>"); this.getVideo() } } },

根據close的值就可以控制video的銷毀和創建了,

技術分享圖片

PS:我用的是Element-ui的dialog 組件中嵌套著VideoJS,遇到一個關於組件未能完全銷毀,而新組件就生成的BUG,然後就導致當前Video實例就一直在跑圈圈,有後臺數據請求,但無畫面的問題,這個問題是因為dialog 隱藏後還未完全銷毀前,遇到了新的實例創建,這個問題也屬於疑難雜癥可以仍舊使用 $nextTicket

,也可以在videoA組件上加一個v-if判斷就行了

技術分享圖片

關於Vue使用VideoJS實例銷毀、創建,並控制後臺m3u8的數據請求