【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流
          }
        ]);
    }
相关推荐
mONESY33 分钟前
Skill 技能与 MCP 协议的底层逻辑与协同真相
javascript
南川琼语1 小时前
HTTP——AJAX
前端·javascript·ajax
不简说2 小时前
JS 代码技巧 vol.2 — 20 个数组/对象/字符串/正则的实用技巧
前端·javascript·面试
小小编程路2 小时前
C++ 块作用域详解:从基础到实战
前端·javascript·vue.js
虚惊一场2 小时前
MarkView:纯前端 Markdown 实时预览工具的架构设计
前端·javascript·vue.js
冰暮流星2 小时前
javascript之对象的继承
javascript
海上彼尚3 小时前
Nodejs也能写Agent - 17.LangGraph篇 - Checkpointer 与 Memory
前端·javascript·人工智能·langchain·node.js
早期的虫儿有鸟吃3 小时前
Vue3
前端·javascript·vue.js
Highcharts.js3 小时前
商业授权与开源图表库如何选择?
前端·javascript·开源·highcharts·chart.js·echarts.js
一缕清烟在人间3 小时前
鸿蒙应用开发实战【27】— DatabaseService 数据库初始化
javascript·数据库·harmonyos·鸿蒙系统