【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流
          }
        ]);
    }
相关推荐
dancing9991 小时前
cocos3.X的oops框架oops-plugin-excel-to-json改进兼容多表单导出功能
前端·javascript·typescript·游戏程序
萌萌哒草头将军2 小时前
🚀🚀🚀Prisma 发布无 Rust 引擎预览版,安装和使用更轻量;支持任何 ORM 连接引擎;支持自动备份...
前端·javascript·vue.js
书语时2 小时前
ES6 Promise 状态机
前端·javascript·es6
拉不动的猪2 小时前
管理不同权限用户的左侧菜单展示以及权限按钮的启用 / 禁用之其中一种解决方案
前端·javascript·面试
西陵2 小时前
前端框架渲染DOM的的方式你知道多少?
前端·javascript·架构
海的诗篇_3 小时前
前端开发面试题总结-JavaScript篇(一)
开发语言·前端·javascript·学习·面试
じ☆ve 清风°3 小时前
理解JavaScript中map和parseInt的陷阱:一个常见的面试题解析
开发语言·javascript·ecmascript
江城开朗的豌豆3 小时前
eval:JavaScript里的双刃剑,用好了封神,用不好封号!
前端·javascript·面试
江城开朗的豌豆3 小时前
JavaScript篇:前端定时器黑科技:不用setInterval照样玩转循环任务
前端·javascript·面试
江城开朗的豌豆4 小时前
JavaScript篇:自定义事件:让你的代码学会'打小报告'
前端·javascript·面试