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

news2024/11/23 11:41:53

问题:使用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流
          }
        ]);
    }

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1513127.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

C语言 指针(4) qsort函数

目录 前言 一、回调函数 二、qsort函数 2.1 使用qsort函数排序整型数据 2.2 使用qsort排序结构数据 三、qsort函数的模拟实现 总结 前言 今天我们主要来学习一下C语言中的qsort排序函数。 一、回调函数 回调函数就是⼀个通过函数指针调用的函数。 如果你把函数的指针&a…

148个Chatgpt关键词汇总-有爱AI实战教程(二)

演示站点&#xff1a; https://ai.uaai.cn 技能模块 官方论坛&#xff1a; www.jingyuai.com 京娱AI 导读&#xff1a;在使用 ChatGPT 时&#xff0c;当你给的指令越精确&#xff0c;它的回答会越到位&#xff0c;举例来说&#xff0c;假如你要请它帮忙写文案&#xff0c;如…

【公示】最新一批ITSS名单正式公布

小编从官方了解到&#xff0c;根据信息技术服务标准符合性评估相关规定&#xff0c;现对以下ITSS单位进行公示&#xff0c;公示期5个工作日。公示期内如有异议&#xff0c;请提供持有异议的正式书面文件&#xff0c;包括持有异议的原因及证据、单位或个人真实名称及有效联系方式…

c++函数SetConsoleTextAttribute

前言 正文 1.作用&#xff1a; 2.函数格式(重点)&#xff1a; 3.参数(重点)&#xff1a; 前言 实用(真的) 正文 1.作用&#xff1a; 更改cmd的背景色与字体颜色 2.函数格式(重点)&#xff1a; SetConsoleTextAttribute(GetStdHandle(STD_OUTPUT_HANDLE),10进制参数); …

BOOTMGR is missing 问题

同事一台win2k8的虚机在重启后无法引导开机&#xff0c;提示如下信息&#xff1a; 开始就觉得是引导分区设置错了。遂从网上下了一个winpe的镜像&#xff0c;装载到虚机“光驱”中&#xff0c;从光盘引导启动。打开“磁盘管理”后发现&#xff0c;果然&#xff0c;未安装系统…

大预言模型——ChatGPT,Claude3、Sora等技术

原文链接&#xff1a;大预言模型——ChatGPT&#xff0c;Claude3、Sora等技术https://mp.weixin.qq.com/s?__bizMzUzNTczMDMxMg&mid2247596849&idx3&sn111d68286f9752008bca95a5ec575bb3&chksmfa823ad6cdf5b3c0c446eceb5cf29cccc3161d746bdd9f26cc060f78c359e…

ubuntu:dpkg查看已经安装的软件包

dpkg -l 结果如下所示&#xff1a; 输出信息会很多&#xff0c;将结果导出到文件中&#xff1a; dpkg -l > my_file.txt

QT进阶-----------认识QT相关的模块(第四天)

1、关于Visual Studio与QT Creator的不同导入方式 Visual Studio作为windows宇宙最强编辑器以及编译器&#xff0c;它相当的好用&#xff0c;作为一个学了一年QT的菜鸟&#xff0c;总结了一些关于VS以及QT Creator两者的不同。 首先&#xff0c;在VS中qt是作为第三方库导入到…

基于YOLOv8深度学习的木薯病害智能诊断与防治系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战

《博主简介》 小伙伴们好&#xff0c;我是阿旭。专注于人工智能、AIGC、python、计算机视觉相关分享研究。 ✌更多学习资源&#xff0c;可关注公-仲-hao:【阿旭算法与机器学习】&#xff0c;共同学习交流~ &#x1f44d;感谢小伙伴们点赞、关注&#xff01; 《------往期经典推…

linux环境下安装运行环境JDK、Docker、Maven、MySQL、RabbitMQ、Redis、nacos、Elasticsearch

安装JDK 1、提前下载好jdk 官网&#xff1a;点击下载 2、将下载的文件放到自己喜欢的目录下 然后使用下面命令进行解压 tar -zxvf jdk-8u161-linux-x64.tar.gz3、配置环境变量 使用命令 vim /etc/profile在文件的最后插入 export JAVA_HOME/source/java/jdk1.8.0_161 #…

基于SpringBoot的“班级综合测评管理系统”的设计与实现(源码+数据库+文档+PPT)

基于SpringBoot的“班级综合测评管理系统”的设计与实现&#xff08;源码数据库文档PPT) 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;SpringBoot 工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 系统展示 管理员登录界面 管理员功能界面 学生管理…

ELF技术贴|如何在开发板上实现对Java的支持

Java作为一种功能强大且广泛应用的编程语言&#xff0c;具有广泛的适应性和实用性。在ELF 1开发板上集成Java支持&#xff0c;无疑将赋予嵌入式开发者更广阔的选择空间&#xff0c;今天就为各位小伙伴详细解析如何在ELF 1开发板上成功部署和运行Java环境。 1.拷贝两个压缩包到E…

C#无法给PLC写入数据原因分析

一、背景 1.1 概述 C#中无法给PLC写入数据的原因有很多&#xff0c;这里分享网络端口号被占用导致无法写入的确认方法 1.2 环境 ①使用三菱PLC ②C#通过网口与PLC进行通讯 二、现象 1.1 代码 通过HslCommunication连接PLC时&#xff0c;连接返回成功&#xff0c;写入返回失败 …

水库泄洪监测预警系统解决方案

一、方案概述 近年来由于危险河道管理措施不到位&#xff0c;调峰水库泄水风险长期存在&#xff0c;信息通报制度缺失以及民众安全警觉性不高等因素导致的水库泄洪时冲走下游河道游客以及人民财产的事故频发。水库安全度汛是全国各地防汛抗洪的重中之重&#xff0c;而水库泄洪监…

AFLNet setup_ipsm函数

在main函数准备阶段&#xff0c;AFLNet比AFL多加了一个setup_ipsm函数&#xff0c;这里记录一下该函数的分析过程。 什么是ipsm Implemented Protocol State Machine&#xff0c;协议状态机 setup_ipsm /* Initialize the implemented state machine as a graphviz graph *…

国创证券|芯片概念强势拉升,蓝海华腾“20cm”涨停,景嘉微等大涨

芯片概念13日盘中强势拉升&#xff0c;到发稿&#xff0c;蓝海华腾“20cm”涨停&#xff0c;景嘉微涨超15%&#xff0c;冠石科技、新洁能、铭普光磁等涨停&#xff0c;裕太微、赛腾股份、龙芯中科等涨超5%。 值得注意的是&#xff0c;景嘉微盘中一度触及涨停&#xff0c;公司昨…

Transformer中的FFN介绍

文章目录 1、Transformer与FFN 2、Activation Function 3、Linear Projections 4、所以FFN真的改不动了吗 5、达到AGI需要什么结构 作者&#xff1a;潘梓正&#xff0c;莫纳什大学博士生 主页&#xff1a;zizhengpan.github.io &#xff08;最近看到有些问题[1]说为什么Transfo…

python调用clickhouse

&#xff08;作者&#xff1a;陈玓玏&#xff09; 使用clickhouse-driver包&#xff0c;先通过pip install clickhouse-driver安装包&#xff0c;再通过以下代码执行sql。 from clickhouse_driver import Client client Client(host10.43.234.214, port9000, userclickhou…

【C++】—— 代理模式

目录 &#xff08;一&#xff09;什么是代理模式 &#xff08;二&#xff09;为什么使用代理模式 &#xff08;三&#xff09;代理模式实现步奏 &#xff08;四&#xff09;代码示例 &#xff08;五&#xff09;代理模式优缺点 &#xff08;一&#xff09;什么是代理模式 …

为什么选择VR全景进行企业宣传,如何将VR全景运用在企业展示

引言&#xff1a; 随着科技的不断发展&#xff0c;VR全景技术逐渐成为企业宣传的热门选择。那么&#xff0c;为什么越来越多的企业选择使用VR全景技术进行宣传呢&#xff1f; 一&#xff0e;为什么选择VR全景技术进行企业宣传 1. 提升用户体验 VR全景技术可以为用户营造身临…