ns自动播放（使用Swiper插件实现视频轮播，怎么实现切换自动播放视频？）
一 、需求分析
这两天讨论了一个项目需求 ，刚开始是希望：轮播图中嵌入视频 ，轮播到视频自动播放 ，播放完毕切换下一张轮播 ，手动切换时暂停播放视频 。后面因为自动播放没有声音 ，便暂时放弃了这个想法（有知道或了解的jy欢迎交流） 。
后面改成像下图这样 ，单独用一个页面轮播视频 ，需求：
点击下面封面图切换视频 切换过去自动播放 ，上一个视频暂停（这个也还有bug） 左上角浮动标签 可以返回上一页和切换网页全屏二 、需求拆解
轮播视频-swiper
视频轮播我采用了swiper插件 ，官网提供的组件里面正好有一个类似的样例
只需要将上面部分的图片数据改成自己的视频数据就可以了 ，想了下数据大概长这样子：
[ { id: "1", imgUrl: "src/assets/images/banner/g1.png", //封面图地址 videoUrl: "https://cdn.uviewui.com/uview/resources/video.mp4", //视频地址 text: "哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈", //视频描述 play: false, //是否正在播放 }, ] <div style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff" class="swiper mySwiper2" > <div class="swiper-wrapper"> <div class="swiper-slide" v-for="item in state.videoData" :style="background:url( + item.imgUrl + ) no-repeat center/cover" > <video :src="item.videoUrl" controls ></video> </div> </div> </div> <div thumbsSlider="" class="swiper mySwiper"> <div class="swiper-wrapper"> <div v-for="item in state.videoData" class="swiper-slide" > <p>{{ item.text }}</p> <img :src="item.imgUrl" /> </div> </div> </div>页面结构差不多就是这样子 ，js代码就不贴出来了 ，倒时候重新写个demo放在GitHub上 。
这个时候已经基本实现了点击封面图切换视频的效果了 ，下面做 ，当视频播放时切换自动暂停
视频播放时切换自动暂停
这个需求的话也比较简单 ，进入页面默认当前视频是数据的第一个 ，监听下面封面图的点击事件 。
<div v-for="item in state.videoData" class="swiper-slide" @click="switchVideo(item.id)" > function switchVideo(id) { //curVideo.value 当前视频的id let index = state.videoData.findIndex((item) => item.id == curVideo.value); if (state.videoData[index].play) { //当前视频暂停 document.querySelector(`.myVideo${curVideo.value}`).pause(); state.videoData[index].play = false; } curVideo.value = id; }将点击的视频id传入 ，判断当前视频是否正在播放 ，如果正在播放 ，通过pause()方法暂停视频 ，将传入的id赋值给当前视频 。
现在可以切换视频时暂停视频播放了 ，但是还需要在视频播放 、暂停和结束的时候修改数据play的状态
监听视频播放 、暂停和结束
<div style="--swiper-navigation-color: #fff; --swiper-pagination-color: #fff" class="swiper mySwiper2" > <div class="swiper-wrapper"> <div class="swiper-slide" v-for="item in state.videoData" :style="background:url( + item.imgUrl + ) no-repeat center/cover" > <video :class="myVideo + item.id" :src="item.videoUrl" controls @play="onPlay(item.id)" @pause="onPause(item.id)" ></video> </div> </div> </div> <div thumbsSlider="" class="swiper mySwiper"> <div class="swiper-wrapper"> <div v-for="item in state.videoData" class="swiper-slide" @click="switchVideo(item.id)" > <p>{{ item.text }}</p> <img :src="item.imgUrl" /> </div> </div> <tool-aside></tool-aside> </div> //监听视频播放 function onPlay(id) { state.videoData.forEach((item) => { if (item.id == id) { item.play = true; } }); } //监听视频暂停 function onPause(id) { state.videoData.forEach((item) => { if (item.id == id) { item.play = false; } }); } //监听视频播放结束 function onEnded(id) { state.videoData.forEach((item) => { if (item.id == id) { item.play = false; } }); }左上角选项卡
这个也很简单 ，因为项目使用了 Element-plus ，所以直接使用了里面的组件
<div class="main"> <div class="aside"> <el-card class="box-card"> <div class="text item"> <el-tag @click="goBack()">返回</el-tag> </div> <div class="text item"> <el-tag @click="toggleScreen(state.flag)">切换全屏</el-tag> </div> </el-card> </div> </div>再点击返回按钮时 ，触发 goBack 方法 ，通过路由跳转到首页
点击切换全屏时调用 toggleScreen 方法 ，通过 requestFullscreen 和 exitFullscreen 方法切换全屏
const toggleScreen = () => { // 如果未开启就开启 如果已开启就关闭 if (state.isScreenFull) { document.exitFullscreen(); // 关闭全屏 } else { document.documentElement.requestFullscreen(); //开启全屏 } state.isScreenFull = !state.isScreenFull; };总结
到目前为止需求已经完成的七七八八了 ，除了切换自动播放下一个视频
//切换时暂停视频播放 function switchVideo(id) { let index = state.videoData.findIndex((item) => item.id == curVideo.value); if (state.videoData[index].play) { …… //切换到的视频播放 document.querySelector(`.myVideo${id}`).play(); state.videoData[index].play = true; } curVideo.value = id; }我在上面函数中加入了注释下的两行代码 ，在切换视频时 ，当前视频如果正在播放 ，就会暂停自动播放下一个视频 ，如果当前视频没有播放 ，那么切换到下一个视频也不会播放 。这是浏览器自带的机制吗？？有没有做过的小伙伴可以交流一下 ，类似腾讯视频：点击一部电影 ，跳转后会自动播放 ，切换后也会自动播放 。
最后
最近找到一个VUE的文档 ，它将VUE的各个知识点进行了总结 ，整理成了《Vue 开发必须知道的36个技巧》 。内容比较详实 ，对各个知识点的讲解也十分到位 。
有需要的小伙伴 ，可以点击下方卡片领取 ，无偿分享
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！