【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

closeTab() {
      
      if(this.player){
        this.player.dispose()
        this.videohtml = '';
      }
      this.visible = false;
    },

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

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>'

创建视频的代码如下:

    createTc() {
        this.player = videojs(`currentPlayer`, this.options);
        this.player.src([
          {
            src: this.tcData.hlsurl,
            type: "application/x-mpegURL" // 告诉videojs,这是一个hls流
          }
        ]);
    }

  • 9
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue.js是一个流行的JavaScript框架,具有轻量级和高度可定制的特点。Element-ui是一个基于Vue.js的组件库,包含了许多用于Web开发的常用组件和工具,应用广泛。 下面是Vue.jsElement-ui的优点: 1. 简单易学 Vue.jsElement-ui具有简单易学的特点,这使它们成为一款流行的选择。在Vue.js中,开发人员可以使用HTML和JavaScript创建组件,开发过程易于理解,而Element-ui提供了丰富的组件和模块,大大加快了开发速度,减少了开发人员的复杂度。 2. 高度可定制 Vue.jsElement-ui框架都具有高度可定制的特点。Vue.js通过数据绑定和组件化,简化了前端开发过程。Element-ui则是一组可定制的UI组件,允许开发人员自由选择和配置UI部件,以适应各种不同需求和应用场景。 3. 强大的功能 Vue.jsElement-ui都拥有强大的功能。通过Vue.js的响应式数据绑定机制和虚拟DOM,能够提高性能和用户体验。Element-ui库中的组件具有各种特性,如自适应、过渡动画和元素样式控制,为开发人员开发高度优化的Web应用提供了强大的支持。 4. 生态系统 Vue.jsElement-ui的优点之一是拥有强大的生态系统和良好的社区支持。社区维护者和开发人员积极分享和更新组件库和知识库,为其他开发人员提供了丰富的资源,减少了学习成本和开发时间。 总的来说,通过使用Vue.jsElement-ui,开发人员可以快速轻松地创建复杂的Web应用程序。这些框架的优点对于开发高度优化的,易于维护的Web应用程序至关重要,而这也是Vue.jsElement-ui在Web开发社区广受欢迎的原因。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值