swiper轮播视频，如何循环播放，

Question

视频轮播，播放完之后循环播放为什么不生效哇？每次最后一个播放完就停住了，插件用的swiper，求解

 <div id="screen_saver" class="screen_saver">
          
        <div class="swiper-container" id="slides">
            <div id="swiper-wrapper" class="swiper-wrapper">
            </div>
        </div>
    </div>

```javascript

strList = [
        { id: 1, src: 'https://www.ziguizhifu.com:10377/zipTest/Demo/20220701115406.mp4' },
        { id: 2, src: 'https://www.ziguizhifu.com:10377/zipTest/Demo/20220701115406.mp4' },
        { id: 3, src: 'https://www.ziguizhifu.com:10377/zipTest/Demo/20220701115406.mp4' },
        { id: 4, src: 'https://www.ziguizhifu.com:10377/zipTest/Demo/20220701115406.mp4' },
    ];

    strList.forEach(function (obj) {
        MaterialHtml += "
";
    })
    $("#swiper-wrapper").html(MaterialHtml)
    SwiperVideo();
function SwiperVideo() {
    var swiper = new Swiper('#slides', {
        centeredSlides: true,
        autoplay: true,
        on: {
            slideChangeTransitionEnd: function () {
                if ($("#slides .swiper-slide-active video").length > 0) {
                    var _this = this;
                    _this.autoplay.stop();
                    var videoID = $("#slides .swiper-slide-duplice-active video").attr("id");
                    var videoObj = document.getElementById(videoID);
                }
            }
        },
        loop: true,
        loopAdditionalSlides: 2,
    });
    if ($("#slides .swiper-slide-active video").length > 0) {
        swiper.autoplay.stop();
        var videoID = $("#slides .swiper-slide-active video").attr("id");
        var videoObj = document.getElementById(videoID);
        videoObj.play();
        videoObj.addEventListener(
          "ended",
          function () {
              swiper.slideNext();
              swiper.autoplay.start();
          },
          false
        );
    }
}

```

Answer 1

• 你可以看下这个问题的回答https://ask.csdn.net/questions/7729510
• 你也可以参考下这篇文章：解决swiper操作后,不能自动轮播的问题
• 除此之外, 这篇博客: 微信小程序入门学习，借助云开发动态更换swiper图片数据，小程序轮播图动态更新中的 二，给swiper设置图片数据。 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

• 
  我们这里设置数据分两种，一个是本地写死的图片数据，另外一个是请求线上动态的数据。
  代码如下

  // pages/index/index.js
  Page({
    data: {
      imgUrls: [
        "../../images/img1.png",
        "../../images/img2.png"
      ]
    },
  
    getImages() {
      let that=this;
      let imgArr = [];
      wx.cloud.database().collection("images").get({
        success(res) {
          console.log("请求成功", res.data)
          let dataList = res.data;
          for (let i = 0; i < dataList.length; i++) {
            imgArr.push(dataList[i].url)
          }
          console.log("imgArr的数据", imgArr)
          that.setData({
            imgUrls: imgArr
          })
        },
        fail(res) {
          console.log("请求失败", res)
        }
      })
  
    }
  })
  

  我们这节的重点就是给swiper动态绑定云数据库里配置的数据。所以上面代码中的 getImages 方法就是获取云数据库里的数据，并绑定到swiper轮播图里。

• 您还可以看一下 汤小洋老师的Swiper移动端滑动插件视频教程课程中的 Swiper简介小节, 巩固相关知识点