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判断就好了