使用Swiper插件实现视频轮播，怎么实现切换自动播放视频？(swiper插件使用步骤)

使用Swiper插件实现视频轮播，怎么实现切换自动播放视频？ 一、需求分析

推荐整理分享使用Swiper插件实现视频轮播，怎么实现切换自动播放视频？(swiper插件使用步骤)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:swipeback插件,swiper.slideto,swiper-slide,swiper.slideto,使用swiper插件实现轮播图,swiper插件使用步骤,使用swiper插件实现轮播图,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个技巧》。内容比较详实，对各个知识点的讲解也十分到位。

有需要的小伙伴，可以点击下方卡片领取，无偿分享