使用Swiper插件实现视频轮播,怎么实现切换自动播放视频? |
您所在的位置:网站首页 › vue轮播图组件banner › 使用Swiper插件实现视频轮播,怎么实现切换自动播放视频? |
一、需求分析
这两天讨论了一个项目需求,刚开始是希望:轮播图中嵌入视频,轮播到视频自动播放,播放完毕切换下一张轮播,手动切换时暂停播放视频。后面因为自动播放没有声音,便暂时放弃了这个想法(有知道或了解的jy欢迎交流)。 后面改成像下图这样,单独用一个页面轮播视频,需求: 点击下面封面图切换视频 切换过去自动播放,上一个视频暂停(这个也还有bug) 左上角浮动标签 可以返回上一页和切换网页全屏视频轮播我采用了swiper插件,官网提供的组件里面正好有一个类似的样例 只需要将上面部分的图片数据改成自己的视频数据就可以了,想了下数据大概长这样子: [ { id: "1", imgUrl: "src/assets/images/banner/g1.png", //封面图地址 videoUrl: "https://cdn.uviewui.com/uview/resources/video.mp4", //视频地址 text: "哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈", //视频描述 play: false, //是否正在播放 }, ]{ { item.text }} 页面结构差不多就是这样子,js代码就不贴出来了,倒时候重新写个demo放在GitHub上。 这个时候已经基本实现了点击封面图切换视频的效果了,下面做,当视频播放时切换自动暂停 视频播放时切换自动暂停这个需求的话也比较简单,进入页面默认当前视频是数据的第一个,监听下面封面图的点击事件。 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的状态 监听视频播放、暂停和结束{ { item.text }} 这个也很简单,因为项目使用了 Element-plus ,所以直接使用了里面的组件 返回 切换全屏再点击返回按钮时,触发 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个技巧》。内容比较详实,对各个知识点的讲解也十分到位。 有需要的小伙伴,可以点击下方卡片领取,无偿分享 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |