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

视频轮播，播放完之后循环播放为什么不生效哇？每次最后一个播放完就停住了，插件用的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
        );
    }
}

```

你可以看下这个问题的回答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简介小节, 巩固相关知识点

试试👀

// 定义视频列表
var 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' },
];

// 定义视频播放列表的HTML
var MaterialHtml = "";
strList.forEach(function (obj) {
    // 拼接HTML
    MaterialHtml += "<div class='swiper-slide'><video id='video_" + obj.id + "' src='" + obj.src + "' controls='controls' width='100%' height='100%'></video></div>";
})

// 将HTML插入页面
$("#swiper-wrapper").html(MaterialHtml)

// 调用swiper插件实现轮播
SwiperVideo();

// 定义SwiperVideo函数
function SwiperVideo() {
    // 实例化Swiper对象
    var swiper = new Swiper('#slides', {
        // 设定为居中显示
        centeredSlides: true,
        // 自动播放
        autoplay: true,
        // 设置在过渡效果结束时触发的回调函数
        on: {
            slideChangeTransitionEnd: function () {
                // 如果当前活动的Slide中包含视频，则停止自动播放
                if ($("#slides .swiper-slide-active video").length > 0) {
                    var _this = this;
                    _this.autoplay.stop();
                    // 获取视频的ID和对象
                    var videoID = $("#slides .swiper-slide-duplice-active video").attr("id");
                    var videoObj = document.getElementById(videoID);
                }
            }
        },
        // 设定循环轮播
        loop: true,
        // 设定在loop模式下需要复制的Slide数量
        loopAdditionalSlides: 2,
    });

    // 如果当前活动的Slide中包含视频，则停止自动播放并播放视频
    if ($("#slides .swiper-slide-active video").length > 0) {
        swiper.autoplay.stop();
        // 获取视频的ID和对象
        var videoID = $("#slides .swiper-slide-active video").attr("id");
        var videoObj = document.getElementById(videoID);
        // 播放视频，并在播放结束后调用slideNext方法，进入下一个Slide
        videoObj.play();
        videoObj.addEventListener(
          "ended",
          function () {
              swiper.slideNext();
              swiper.autoplay.start();
          },
          false
        );
    }
}