关于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判断就行了