vue video 多个视频切换后视频不显示的解决方法

先说一下我这边的需求是视频需要轮播,一个人员有多个视频,左右轮播是轮播某个人员下的视频,上下切换是切换人员。

vue 代码

      <el-carouselindicator-position="none"ref="carousel"arrow="always":interval="10000"@change="carouselChange"><transition name="carousel-arrow-right"><buttontype="button"@click="arrowDown('top')"class="el-carousel__arrow el-carousel__arrow--right el-carousel__arrow--top"><i class="el-icon-arrow-up"></i></button></transition><transition name="carousel-arrow-right"><button@click="arrowDown('bottom')"type="button"class="el-carousel__arrow--bottom"><i class="el-icon-arrow-down"></i></button></transition><!--   --><el-carousel-itemv-for="(item, index) in videoUrl":key="index"v-loading="loading"element-loading-spinner=" "element-loading-background="rgba(0, 0, 0, 0.8)"@mouseenter.native="autoplayHandler"><template v-if="isPlayer"><div style="margin: 5px 0">{{ '张三' }}</div><div style="width: 100%; height: 76%" id="video-box"><video:id="`my-video${index}`"class="video-js vjs-default-skin"controlspreload="auto"><source :src="item.monitorUrl" type="application/x-mpegURL" /></video></div></template></el-carousel-item></el-carousel>

js代码:

export default {data() {return {videoUrl: [],arr: [{name: "张三",videoUrlList: [{monitorUrl:"https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8",},{monitorUrl:"https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8",},{monitorUrl:"https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8",},],},{name: "李四",videoUrlList: [{monitorUrl:"https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8",},],},],selectionObj:{},DownIndex: 0,player: [],isPlayer: true,};},mounted() {let _that = this;//默认取第一个_that.selectionObj=arr[0]setTimeout(() => {_that.getVideo();}, 6000);},//销毁事件beforeDestroy() {this.clearVideo();},methods: {//销毁视频clearVideo() {if (this.player != null) {for (let i = 0; i < this.player.length; i++) {this.player[i].dispose(); //dispose()是官方的销毁函数}}},//初始化getVideo() {const _this = this;//判断视频是否存在如果存在不需要重新初始化if(_this.player.length!=0) returnthis.videoUrl.map((item,index) => {let player = videojs(`my-video${index}`,{bigPlayButton: false,textTrackDisplay: false,posterImage: true,errorDisplay: false,controlBar: true,// restoreEl: true,autoplay: true, //是否自动播放muted: true, //静音模式 、、 解决首次页面加载播放},function () {// this.reset()//视频中重置方法 this.load();//刷新视频地址_this.player.push(player);//player是一个空数组 存放实例化的视频实例});});},//监控上下切换arrowDown(type) {//点切换是销毁视频this.clearVideo();this.isPlayer = false; //切换后const arr= this.arr;const index =type == "top"? this.DownIndex == 0? this.arr.length - 1: this.DownIndex - 1: this.DownIndex == this.arr.length - 1? 0: this.DownIndex + 1;this.DownIndex = index;this.$nextTick(() => {this.canteenObj = {};this.videoUrl = [];if (arr&& arr[this.DownIndex].videoUrlList) {this.selectionObj= canteenList[this.DownIndex];this.videoUrl = canteenList[this.DownIndex].videoUrlList;// this.loading = true;this.isPlayer = true; //切换后}//切换到轮播第一页this.$refs.carousel.setActiveItem(0);// videoBox.load()this.carouselChange(0);// this.getVideo(index);});},//监控视频切换播放carouselChange(index) {// returnsetTimeout(() => {this.isPlayer = true;this.getVideo(index);}, 6000);},// 轮播图鼠标移入清除时间函数autoplayHandler(index) {this.$refs.carousel.pauseTimer();},}}

样式:

 <style scoped>
>>> .el-carousel,
>>> .el-carousel__container {height: 100%;
}
>>> .video-js {height: calc(100% - 6px);width: 100%;
}
.el-carousel__arrow--top {top: 0px;left: 46%;transform: translate(-50%, 0);
}
.el-carousel__arrow--bottom {bottom: 5px;position: absolute;left: 50%;height: 36px;width: 36px;border-radius: 50%;background-color: rgba(31, 45, 61, 0.11);color: #ffffff;border: none;outline: none;z-index: 10;transform: translate(-50%, 0);
}
</style>

实现效果图:
在这里插入图片描述

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

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

相关文章

Mamba详细介绍和RNN、Transformer的架构可视化对比

Transformer体系结构已经成为大型语言模型(llm)成功的主要组成部分。为了进一步改进llm&#xff0c;人们正在研发可能优于Transformer体系结构的新体系结构。其中一种方法是Mamba&#xff08;一种状态空间模型&#xff09;。 Mamba: Linear-Time Sequence Modeling with Select…

CentOS7 安装SSH

说实话&#xff0c;感觉CentOS有点难用。初始配置不是很友好&#xff0c;连自动获取IP地址都是关着的。当然&#xff0c;我这里本地用的是虚拟机。 开启获取IP 首先是获取IP地址&#xff0c;这是一些的起点。 首先使用ip addr 看看网卡地址和名称。我这边是ens33。然后打开自…

【TCP/IP】组播

一、组播介绍 组播&#xff08;Multicast&#xff09;是网络技术中数据传输的一种方法&#xff0c;它允许将数据包同时发送给一组指定的目标&#xff0c;而不是单个的目标&#xff08;单播 Unicast&#xff09;或所有可能的目标&#xff08;广播 Broadcast&#xff09;。组播传…

2024年 Openai的API相关全部概论汇总(通用版)

2024年 Openai的API相关全部概论汇总&#xff08;通用版&#xff09; 文章目录 2024年 Openai的API相关全部概论汇总&#xff08;通用版&#xff09;一、前言1、python快速开始 二、Openai 平台以及相关项目1、Openai的API管理平台2、ChatGPT项目推荐&#xff08;1&#xff09;…

开源大语言模型作为 LangChain 智能体

概要 开源大型语言模型 (LLMs) 现已达到一种性能水平&#xff0c;使它们适合作为推动智能体工作流的推理引擎: Mixtral 甚至在我们的基准测试中 超过了 GPT-3.5&#xff0c;并且通过微调&#xff0c;其性能可以轻易的得到进一步增强。 引言 针对 因果语言建模 训练的大型语言模…

2024-02-21 作业

作业要求&#xff1a; 复习课上内容 //已完成结构体字节对齐&#xff0c;64位没做完的做完&#xff0c;32位重新都做一遍&#xff0c;课上指定2字节对齐的做一遍&#xff0c;自己验证 //已完成两种验证大小端对齐的代码写一遍复习指针内容 //已完成完善顺序表已写出的…

Linux运维-DHCP服务器

DHCP服务器的配置与管理 项目场景 学校各部门共有180台电脑&#xff0c;除了计算机学院的教师会配置电脑的网络连接&#xff0c;其他部门的老师和工作人员均不会&#xff0c;为了提高网络的管理效率&#xff0c;技术人员决定配置一台DHCP服务器&#xff0c;来提供动态的IP地址…

gin源码实战 day1

gin框架源码实战day1 Radix树 这个路由信息&#xff1a; r : gin.Default()r.GET("/", func1) r.GET("/search/", func2) r.GET("/support/", func3) r.GET("/blog/", func4) r.GET("/blog/:post/", func5) r.GET("/…

Java中继承静态属性,方法,和非静态属性和方法的继承区别

结论&#xff1a; Java中静态属性和静态方法是可以被继承的&#xff0c;但是不可以被重写&#xff0c;而是被隐藏。 Java中非静态属性&#xff0c;可以被继承&#xff0c;但是不可以被重写&#xff0c;而是被隐藏。 Java中非静态方法&#xff0c;可以被继承&#xff0c;可以…

自动驾驶坐标系与旋转矩阵的确定(位置补偿)

最近新接受的模块需要做位置补偿&#xff0c;按说是比较简单的。但是因为坐标系的问题导致了诸多麻烦出现&#xff0c;事后复盘如下&#xff1a; 一个未知的坐标系如何确定方向&#xff1a; 此处出现了转换WGS坐标系转东北天&#xff0c;且东北天第一帧初始化局部坐标系。 此…

5G端到端案例三:锚点基站侧5G连接与VOLTE专载建立流程冲突导致CSFB回落问题

1. 问题描述&#xff1a; NSA组网场景下&#xff0c;语音业务仍使用4G VoLTE方案&#xff0c;在拉网测试中&#xff0c;发现存在较多流程交叉导致的VOLTE接入失败的问题。 流程冲突时的空口信令表现为&#xff0c;终端添加SCG流程与语音专载流程冲突时&#xff0c;专有承载建…

重点媒体如何投稿?考核稿件投稿指南

传媒如春雨&#xff0c;润物细无声&#xff0c;大家好&#xff0c;我是51媒体网胡老师。 机构组织&#xff0c;国企央企都需要定期将相关新闻投递到央媒&#xff0c;官媒&#xff0c;或者地方重点媒体中&#xff0c;那么如何进行投稿了&#xff0c;今天就与大家分享下。 央媒投…

vue-nextTick(nextTick---入门到离职系列)

官方定义 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法&#xff0c;获取更新后的 DOM。 个人理解 假设我们更改了某个 dom 元素内部的文本&#xff0c;而这时候我们想直接打印这个更改之后的文本是需要 dom 更新之后才会实现的。 小案例 <tem…

聊一聊EGO-Planner膨胀系数的大小对无人机避障飞行的影响

EGO-Planner简介 EGO-Planner作为业界知名的无人机轨迹规划算法&#xff0c;其优势在于能够在复杂环境中快速规划出安全、平滑且动态可行的飞行轨迹。在这个算法中&#xff0c;膨胀系数发挥着关键作用。它通过扩大障碍物的感知范围&#xff0c;提供额外的安全边距&#xff0c;…

NOIP2018-J-4-对称二叉树的题解

原题描述&#xff1a; 题目描述 时间&#xff1a;1s 空间&#xff1a;256M 一棵有点权的有根树如果满足以下条件&#xff0c;则被轩轩称为对称二叉树&#xff1a; 1. 二叉树&#xff1b; 2. 将这棵树所有节点的左右子树交换&#xff0c;新树和原树对应位置的结构相同且…

Rust 介绍与开发环境搭建

Rust简介 Rust是一种新型的系统编程语言&#xff0c;注重安全、速度和并发性。这种语言设计的目标是提供了内存安全的保证&#xff0c;同时保持高性能和零成本抽象。Rust不使用垃圾收集器&#xff0c;提供了类似C的资源管理模式&#xff0c;拥有像Python一样丰富的函数库&…

python输出HelloWorld

学习编程语言的第一步几乎都是输出“Hello World”&#xff0c;而python也是如此。想要使用python语言输出"Hello World",需要使用python的heapq包中的heappush和heappop函数&#xff0c;heapq模块来实现最小堆&#xff0c;最小堆用于每次从所有列表的当前元素中选择…

Dubbo之消费端服务RPC调用

在消费端服务是基于接口调用Provider端提供的服务&#xff0c;所以在消费端并没有服务公共接口的实现类。 使用过程中利用注解DubboReference将目标接口作为某个类的字段属性&#xff0c;在解析该类时获取全部字段属性并单独关注解析存在注解DubboReference的字段属性。通过步…

电销智能机器人 2024年智能电话机器人

随着技术的发展&#xff0c;人工智能的时代离我们越来越近&#xff0c;在人工智能的影响下许多传统行业开始向智能化方向转型&#xff0c;其中最明显的就是电话营销方面的工作。为了减轻人工销售负担出现了一个电销机器人系统&#xff0c;每天能拨打3000通电话&#xff0c;最高…

JAVA讲解算法-排序算法-选择排序算法-02

一、定义 选择排序法是一种不稳定的排序算法。它的工作原理是每一次从待排序的数据元素中选出最小&#xff08;或最大&#xff09;的一个元素&#xff0c;存放在序列的起始位置&#xff0c;然后&#xff0c;再从剩余未排序元素中继续寻找最小&#xff08;大&#xff09;元素&a…