vue使用videojs控制後台m3u8資料請求

2022-06-17 08:48:09 字數 897 閱讀 3119

關於video.js的使用方法就不再說了,有興趣的請遷躍:

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

我使用的是vue 元件化的vediojs控制項

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

2、動態生成videoid;

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

watch:

}else}},

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

ps:我用的是element-ui的dialog 元件中巢狀著videojs,遇到乙個關於元件未能完全銷毀,而新元件就生成的bug,然後就導致當前video例項就一直在跑圈圈,有後台資料請求,但無畫面的問題,這個問題是因為dialog 隱藏後還未完全銷毀前,遇到了新的例項建立,這個問題也屬於疑難雜症可以仍舊使用 $nextticket ,也可以在videoa元件上加乙個v-if判斷就行了

大概思路就是監聽每次呼叫,結束後就暫停、銷毀video例項 :

player.pause()  //暫停

player.dispose() //銷毀

每次重新呼叫時重新生成video例項:

//動態生成video

this.getvideo()

videojs使用技巧

摘自 videojs初始化有兩種方式。一種是在標籤裡面加上class video js 和data setup 屬性。注意,兩者缺一不可。另外一種方法是通過js初始化,格式 var player videojs my player 這樣有個要求,就是不能配置data setup,並且需要傳入的id。...

vue打包後dist的使用

vue專案完成打包出dist後準備開啟index.html,發現居然頁面是一片空白,f12一片報紅。經過多次網上查詢後發現這是由於vue打包時,腳手架會幫你配置好大量引數,但其中路徑publicpath被配置為了 需要手動修改。1 將vue.config.js中的publicpath 修改為publ...

Vue使用Axios攜帶token請求後端介面

攜帶token請求介面的其中一種方法就是在請求 中將token新增到請求頭中 在專案中安裝axios js cookienpm i axios npm i js cookie對網路請求進行封裝import axios from axios import from token const instan...