使用Swiper实现图片和视频的连续播放

工作需求

轮播图，第一张是大屏，大屏播放指定时间后，轮播提供的图片，图片轮播完后轮播视频，其中每个视频都是播放完再轮播到下一个视频的。总结就是：页面 -> 图片1 -> 图片2 -> 图片3…… -> 视频1 -> 视频2 -> 视频3…… -> 页面 -> 图片1 -> 图片…… 这样循环。

实现原理

整个body下面放swiper，每个图片、每个视频对应一张slide。

在初始化swiper时对swiper设置自动轮播，同时设置slideChange的监听。当遇到视频的时候，暂停自动轮播，等视频结束再开启自动轮播（这里也可以通过手动调用轮播下一张）

核心代码

提示：我使用的时swiper3，版本比较旧，用到的回调方法名称与新版的swiper可能会不同，具体可以看swiper的官网找新的回调方法名。

页面结构

从接口获取图片并生成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)
                }
            }
        }
    })

结束语

基本实现就这样了，成功之后想想还挺简单的，没成功的时候就一直在踩坑。