工作需求
轮播图,第一张是大屏,大屏播放指定时间后,轮播提供的图片,图片轮播完后轮播视频,其中每个视频都是播放完再轮播到下一个视频的。总结就是:页面 -> 图片1 -> 图片2 -> 图片3…… -> 视频1 -> 视频2 -> 视频3…… -> 页面 -> 图片1 -> 图片…… 这样循环。
实现原理
整个body下面放swiper,每个图片、每个视频对应一张slide。
在初始化swiper时对swiper设置自动轮播,同时设置slideChange的监听。当遇到视频的时候,暂停自动轮播,等视频结束再开启自动轮播(这里也可以通过手动调用轮播下一张)
核心代码
提示:我使用的时swiper3,版本比较旧,用到的回调方法名称与新版的swiper可能会不同,具体可以看swiper的官网找新的回调方法名。
页面结构
文章来源:https://www.toymoban.com/news/detail-787288.html
从接口获取图片并生成slide
// 生成图片slide
setLoopImages() {
let loopList = this.jieKou.loopImages
let all_length = this.jieKou.loopImages.length + this.jieKou.loopVideos.length
// 获取总长度
if (all_length) {
let ymSwiper_length = this.ymSwiper.slides.length
// 表示前面已经生成过,需要删除原来的
if (ymSwiper_length >= 2) {
for (let i = 0; i < all_length; i++) {
this.ymSwiper.removeSlide(1)
}
}
let str = ''
loopList.forEach((item) => {
str += '<div class="swiper-slide new-slide">'
str += '<img src="' + item.location + ' " alt="">'
str += '</div>'
})
this.ymSwiper.appendSlide(str)
// 需求是图片要先放完才能放视频,所以我这做了监控,防止图片和视频交替出现
this.imageDone = true
}
}
从接口获取视频并生成slide
// 生成视频的slide
setLoopVideos() {
let loopList = this.jieKou.loopVideos
// 判断图片slide是否生成完毕,若还未生成结束,则1s后重新调用,直到图片slide生成结束
if (loopList.length && this.imageDone) {
if (this.timer3) {
clearInterval(this.timer3);
this.timer3 = null
}
let str = ''
loopList.forEach((item) => {
str += '<div class="swiper-slide new-slide">'
str += '<video class="video" width="100%" height="100%" controls muted>'
str += '<source src="' + item.location + '" type="video/mp4">'
str += '</video></div>'
})
this.ymSwiper.appendSlide(str)
this.imageDone = false
} else {
this.timer3 = setTimeout(() => {
this.setLoopVideos()
}, 1000)
}
},
初始化轮播图
//初始化页面的轮播图
this.ymSwiper = new Swiper("#ymSwiper", {
autoplay: 3000,
onSlideChangeStart(e) {
let index = e.activeIndex
// 因为我大屏还有轮播图,所以对根目录下的轮播图都加了样式名 new-slide 方便查找
let type = $(".new-slide").eq(index - 1).children()[0].nodeName.toLowerCase()
if (type == 'img') {
e.startAutoplay()
} else if (type == 'video') {
e.stopAutoplay()
let video = $(".new-slide").eq(index - 1).children()[0]
video.play()
video.addEventListener('ended', function () { // 视频播放结束
e.startAutoplay()
})
}
},
onSlideChangeEnd(e) {
//如果是最后一张,直接刷新跳回首页
if (e.isEnd) {
let index = e.activeIndex
let type = $(".new-slide").eq(index - 1).children()[0].nodeName.toLowerCase()
// 最后一张是图片,定时3秒直接回首页
if (type == 'img') {
setTimeout(()=>{
myvue.getData()
}, 3000)
} else if (type == 'video') {
// 获取视频时长
let time = $(".new-slide").eq(index - 1).children()[0].duration * 1000
setTimeout(()=>{
myvue.getData()
}, time)
// 这里延时是因为,我getData执行完后swiper无法新一轮自动轮播,所以重新设置自动轮播
let later_time = time + 3000
setTimeout(()=>{
e.startAutoplay()
}, later_time)
}
}
}
})
结束语
基本实现就这样了,成功之后想想还挺简单的,没成功的时候就一直在踩坑。文章来源地址https://www.toymoban.com/news/detail-787288.html
到了这里,关于使用Swiper实现图片和视频的连续播放的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!