【vue】el-carousel实现视频自动播放与自动切换到下一个视频功能:

2023-10-20 05:36

本文主要是介绍【vue】el-carousel实现视频自动播放与自动切换到下一个视频功能:,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

文章目录

        • 一、原因:
        • 二、实现代码:
        • 三、遇到的问题:
            • 【1】问题:el-carousel页面的视频不更新
            • 【2】问题:多按几次左按钮,其中跳过没有播放的视频没有销毁,造成再次自动播放时会跳页


一、原因:

由于后端无法实现将多条视频拼接为一条视频,所以更改为由前端实现页面视频自动播放功能和播放完后,自动切换到下一个视频功能

二、实现代码:
<template><div class="preview-content" v-loading="loading"><el-tabs v-model="activeName" @tab-click="tabClick"><!-- 视频预览 --><el-tab-pane v-if="DisplayList.includes('video')" name="video" :label="`视频预览【${videoList.length}`"><div v-if="videoList.length > 0" class="preview-content-box"><el-carousel ref="videoCarousel" @change="autoPlayVideo" :autoplay="false" :loop="false" style="width:100%"height="540px" :initial-index="0" :key="(Date.parse(new Date()) / 1000)" arrow="always"indicator-position="none"><el-carousel-item v-for="(item, index) in videoList" :key="index"><h2>{{ index + 1 }}/{{ videoList.length }}</h2><video autoplay :muted="false" controls preload :id="`video-${index}`" width=100% height="100%"><source :src="item" type="video/mp4" /><object type="application/x-shockwave-flash" data="myvideo.swf"><param name="movie" value="myvideo.swf" /><param name="flashvars" value="autostart=true&amp;file=myvideo.swf" /></object>当前浏览器不支持video直接播放,点击这里下载视频:<a :href="item">下载视频</a></video></el-carousel-item></el-carousel></div><div v-else class="noData">无视频</div></el-tab-pane></el-tabs></div>
</template><script>
export default {props: {DisplayList: {type: Array,default() {return ['img', 'video', 'imgBYWeight', 'imgBYCar', 'imgBYUpload']}},},data() {return {activeName: 'img',loading: false,videoList: [],//视频列表player: [],};},methods: {loadData(record, type) {const that = this;console.log('图片/视频预览:', record)that.activeName = (type && type != null && type != undefined && that.DisplayList.includes(type)) ? type : that.DisplayList.length > 0 ? that.DisplayList[0] : 'img'that.videoList = []             //视频列表if (!(typeof record == 'object') || Object.keys(record).length == 0) { return }that.loading = true// 视频列表if (that.DisplayList.includes('video')) {record.videoList && record.videoList.length > 0 ? that.videoList = [...that.pushArr(record.videoList)] : null;record.allVideoList && record.allVideoList.length > 0 ? that.videoList = [...that.videoList, ...that.pushArr(record.allVideoList)] : null;this.$nextTick(() => {that.videoList.length > 0 ? that.$refs.videoCarousel.setActiveItem(0) : null;that.player = []that.sleep(1000).then(() => { that.activeName == 'video' ? that.autoPlayVideo(0) : null; })})}that.loading = false;},// 数组遍历判断是否需要拼接地址pushArr(arr) {if (!Array.isArray(arr) || arr.length == 0) { return [] }let newArr = []for (let index = 0; index < arr.length; index++) {const item = arr[index];if ((typeof item == 'object') && item.url) {item.url.includes("http") || item.url.includes(";base64,") ? newArr.push(item.url) : newArr.push(process.env.VUE_APP_FILE_URL + item.url)} else {item.includes("http") || item.includes(";base64,") ? newArr.push(item) : newArr.push(process.env.VUE_APP_FILE_URL + item)}}return newArr},tabClick(tab, event) {const that = this;if (tab.name == 'video') {that.videoList.length > 0 ? that.$refs.videoCarousel.setActiveItem(0) : null;that.player = []that.autoPlayVideo(0)}},//设置播放点,续播autoPlayVideo(index, oldVal) {const that = this;let currVideo = document.getElementById(`video-${index}`);if (currVideo == null) { return }if (that.player.includes(currVideo)) {that.player[index].currentTime = 0, that.player[index].muted = false, that.player[index].autoplay = true, that.player[index].play().catch((err) => { });that.player[oldVal].currentTime = 0, that.player[oldVal].muted = true, that.player[oldVal].autoplay = false, that.player[oldVal].pause();} else {currVideo.currentTime = 0;//设置播放点currVideo.muted = false;//设置非静音that.sleep(100).then(() => {currVideo.play().catch((err) => { })that.player.includes(currVideo) ? null : that.player.push(currVideo);that.player.forEach((item, i) => { if (i != index) { item.autoplay = false, item.pause() } })that.player[index].addEventListener('ended', function (e) { //结束console.log("播放结束", e.target.id, that.player)that.$refs.videoCarousel.next()}, false);})}},},beforeDestroy() {this.videoList = []             //视频列表this.player = []},
}
</script>
三、遇到的问题:
【1】问题:el-carousel页面的视频不更新

文章链接:【vue】element强制刷新el-carousel的dom:

在这里插入图片描述

【2】问题:多按几次左按钮,其中跳过没有播放的视频没有销毁,造成再次自动播放时会跳页

将video存放到player里面,并修改video的播放状态
在这里插入图片描述

这篇关于【vue】el-carousel实现视频自动播放与自动切换到下一个视频功能:的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/245022

相关文章

MySQL 8 中的一个强大功能 JSON_TABLE示例详解

《MySQL8中的一个强大功能JSON_TABLE示例详解》JSON_TABLE是MySQL8中引入的一个强大功能,它允许用户将JSON数据转换为关系表格式,从而可以更方便地在SQL查询中处理J... 目录基本语法示例示例查询解释应用场景不适用场景1. ‌jsON 数据结构过于复杂或动态变化‌2. ‌性能要

Python实现终端清屏的几种方式详解

《Python实现终端清屏的几种方式详解》在使用Python进行终端交互式编程时,我们经常需要清空当前终端屏幕的内容,本文为大家整理了几种常见的实现方法,有需要的小伙伴可以参考下... 目录方法一:使用 `os` 模块调用系统命令方法二:使用 `subprocess` 模块执行命令方法三:打印多个换行符模拟

SpringBoot+EasyPOI轻松实现Excel和Word导出PDF

《SpringBoot+EasyPOI轻松实现Excel和Word导出PDF》在企业级开发中,将Excel和Word文档导出为PDF是常见需求,本文将结合​​EasyPOI和​​Aspose系列工具实... 目录一、环境准备与依赖配置1.1 方案选型1.2 依赖配置(商业库方案)二、Excel 导出 PDF

Python实现MQTT通信的示例代码

《Python实现MQTT通信的示例代码》本文主要介绍了Python实现MQTT通信的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一... 目录1. 安装paho-mqtt库‌2. 搭建MQTT代理服务器(Broker)‌‌3. pytho

使用zip4j实现Java中的ZIP文件加密压缩的操作方法

《使用zip4j实现Java中的ZIP文件加密压缩的操作方法》本文介绍如何通过Maven集成zip4j1.3.2库创建带密码保护的ZIP文件,涵盖依赖配置、代码示例及加密原理,确保数据安全性,感兴趣的... 目录1. zip4j库介绍和版本1.1 zip4j库概述1.2 zip4j的版本演变1.3 zip4

python生成随机唯一id的几种实现方法

《python生成随机唯一id的几种实现方法》在Python中生成随机唯一ID有多种方法,根据不同的需求场景可以选择最适合的方案,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习... 目录方法 1:使用 UUID 模块(推荐)方法 2:使用 Secrets 模块(安全敏感场景)方法

Spring StateMachine实现状态机使用示例详解

《SpringStateMachine实现状态机使用示例详解》本文介绍SpringStateMachine实现状态机的步骤,包括依赖导入、枚举定义、状态转移规则配置、上下文管理及服务调用示例,重点解... 目录什么是状态机使用示例什么是状态机状态机是计算机科学中的​​核心建模工具​​,用于描述对象在其生命

Spring Boot 结合 WxJava 实现文章上传微信公众号草稿箱与群发

《SpringBoot结合WxJava实现文章上传微信公众号草稿箱与群发》本文将详细介绍如何使用SpringBoot框架结合WxJava开发工具包,实现文章上传到微信公众号草稿箱以及群发功能,... 目录一、项目环境准备1.1 开发环境1.2 微信公众号准备二、Spring Boot 项目搭建2.1 创建

IntelliJ IDEA2025创建SpringBoot项目的实现步骤

《IntelliJIDEA2025创建SpringBoot项目的实现步骤》本文主要介绍了IntelliJIDEA2025创建SpringBoot项目的实现步骤,文中通过示例代码介绍的非常详细,对大家... 目录一、创建 Spring Boot 项目1. 新建项目2. 基础配置3. 选择依赖4. 生成项目5.

Linux下删除乱码文件和目录的实现方式

《Linux下删除乱码文件和目录的实现方式》:本文主要介绍Linux下删除乱码文件和目录的实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录linux下删除乱码文件和目录方法1方法2总结Linux下删除乱码文件和目录方法1使用ls -i命令找到文件或目录