问题:使用video.js做了一个弹窗显示视频,效果如下
但是发现弹窗再次打开,视频播放失败,报错The element or ID supplied is not valid
原因是videojs找不到需要初始化的视频id,在关闭弹窗的时候需要重置video.js,并清除dom
closeTab() {
if(this.player){
this.player.dispose()
this.videohtml = '';
}
this.visible = false;
},
在打开弹窗的函数里面增加下面代码:
this.videohtml='<video id="currentPlayer" muted style="width: 1200px; height: 750px" class="video-js warn-video vjs-default-skin vjs-big-play-centered" controls preload="auto" crossOrigin="anonymous" :poster="tcData.pictureUrl"></video>'
创建视频的代码如下:
createTc() {
this.player = videojs(`currentPlayer`, this.options);
this.player.src([
{
src: this.tcData.hlsurl,
type: "application/x-mpegURL" // 告诉videojs,这是一个hls流
}
]);
}