【vue video.js】The element or ID supplied is not valid. (videojs) element Ui

问题:使用video.js做了一个弹窗显示视频,效果如下

但是发现弹窗再次打开,视频播放失败,报错The element or ID supplied is not valid

原因是videojs找不到需要初始化的视频id,在关闭弹窗的时候需要重置video.js,并清除dom

javascript 复制代码
closeTab() {
      
      if(this.player){
        this.player.dispose()
        this.videohtml = '';
      }
      this.visible = false;
    },

在打开弹窗的函数里面增加下面代码:

javascript 复制代码
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>'

创建视频的代码如下:

javascript 复制代码
    createTc() {
        this.player = videojs(`currentPlayer`, this.options);
        this.player.src([
          {
            src: this.tcData.hlsurl,
            type: "application/x-mpegURL" // 告诉videojs,这是一个hls流
          }
        ]);
    }
相关推荐
kyriewen10 分钟前
别再这样写条件渲染了——你的React组件里藏着这5种定时炸弹
前端·javascript·react.js
梦想CAD控件1 小时前
网页端CAD的图形选择、编辑与夹点操作教程
前端·javascript·node.js
月月大王的3D日记1 小时前
Three.js 入门系列(8):六种光源全解析 —— 关灯了,开光!
前端·javascript
达子6662 小时前
第26章_HarmonyOs开发图解之 设备管理
vue.js
自然 醒2 小时前
v-tooltip自定义指令封装
前端·javascript·vue.js
其美杰布-富贵-李4 小时前
第 10 篇:灯光与阴影
javascript·three.js
小高0076 小时前
🔥🔥🔥TypeScript 7 正式版来了:别只看 10 倍速度,这 4 个迁移坑更值得注意
前端·javascript·面试
万敏6 小时前
Vue3 全栈实战第四周:watch、nextTick、性能优化与 keep-alive 实战记录
vue.js·node.js·全栈
布兰妮甜6 小时前
Vue 大型页面性能优化:四个核心策略
vue.js·性能优化·虚拟滚动·组件缓存·按需加载
di24k24k6 小时前
多个 el-form 共用同一 ref 导致表单校验部分失效
前端·javascript·vue.js·elementui