vue使用videojs控制后台m3u8數據請求

關於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判斷就行了

 

大概思路就是監聽每次調用，結束后就暫停、銷毀video實例 ：

 player.pause()  //暫停
 player.dispose()  //銷毀
每次重新調用時重新生成video實例：

//動態生成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()