vue使用videojs控制後臺m3u8數據請求

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

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

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

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

二、動態生成videoID；

三、在子組件中監聽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判斷就好了