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()