The element or ID supplied is not valid. (videojs) elementui

项目问题记录 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

  • 2
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 12
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 12
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值