项目问题记录 elementui ,videojs
项目用到elementui ,videojs,为了hls格式的视频流在弹框关闭后停止刷新,使用了dispose()注销player
再次打开弹窗报错
The element or ID supplied is not valid. (videojs)
后发现因el-dialog懒加载,videojs找不到需要初始化的playerID,因为需要防止hls视频流一直刷新必须要删除dom
完整解决方案如下(无关代码有省略):
dialog捕捉关闭事件,开启事件,开启后事件
<el-dialog title="视频播放" :visible.sync="videoVisible" customClass="customClass" @close="closevideo" @open="open" @opened="openvideo">
<div style="position:relative;" v-html="videohtml">
</div>
</div>
相关methods:
closevideo() {
if (this.player) {
this.player.dispose(); // 该方法会重置videojs的内部状态并移除dom
this.videohtml = '';
}
this.videoVisible = false;
},
handlePlay() {
this.videoVisible = true;
},
open(){
this.videohtml = '<video id="currentPlayer" class="video-js vjs-big-play-centered vjs-default-skin " style="width:700px;height:393.75px" muted></video>';
},
openvideo() {
setTimeout(() => {
this.$nextTick(() => {
this.player = Videojs("currentPlayer", this.options);
});
},300)
}
over