關於Vue使用VideoJS實例銷毀、創建,並控制後臺m3u8的數據請求
阿新 • • 發佈:2019-05-14
one new -c dispose load vue bsp 關於 cat ,也可以在videoA組件上加一個v-if判斷就行了
關於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
關於Vue使用VideoJS實例銷毀、創建,並控制後臺m3u8的數據請求