video多视频轮播Swiper 播放视频不轮播不循环

在实际工作中经常会遇到swiper轮播多个视频，播放视频不轮播不循环

loop:true下问题：

(1)slides前后会复制若干个slide，成一个环路，不会复制绑定在dom上@click事件,

 解决方法：不要在html绑定@click事件监听不到 使用swiper的onclick回调函数即：$(".video").on("click",function(){...})，

(2)loop:true下能监听到slideChangeTransitionEnd：只是this.activeIndex值不在是数据的index值，

 on: {
      slideChangeTransitionEnd: function(){
            console.log(this.activeIndex)
      },
},

(3)loop:true下当前选中slide带有class：.swiper-slide-active 做相关操作在这个class下处理

(4)监听视频播放状态　

$(".swiper-slide-active video").on('play',function(){
        //播放状态
});  
$(".swiper-slide-active video").on('pause',function(){
       //暂停状态
});

(5)控制轮播状态

停止自动轮播：_this.swiper1.autoplay.stop();
启动自动轮播：_this.swiper1.autoplay.start();

3、loop:false下问题：

可以在html上绑定@click事件，但避免出问题最好在JS里onclick回调方法

this.activeIndex正常从0开始，slide个数是真实长度

 on: {
     slideChangeTransitionEnd: function(){
               console.log(this.activeIndex)
     },
 },

不循环loop去掉就行

------------------------------------------------------------------------------------------------------------------------

例：

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"> 
        <title>3、video多视频swiper播放停止轮播循环loop=true</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
        <!-- 公用css -->
        <link rel="stylesheet" href="css/public/reset.css">
        <link rel="stylesheet" href="css/public/common.css">
        <link rel="stylesheet" href="css/public/swiper.min.css">
        <!-- rem.js -->
        <script src="js/must/rem.js"></script>
        <style>
            .video{position:relative;overflow:hidden;width:60%;height:60%;margin:10% auto 0 auto}
            .video-cover{position:absolute;z-index:10;width:100%;height:100%;top:0;left:0;background:rgba(0,0,0,0.3)}
            img{display:block;width:100%}
            .video-cover .play-ico{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
        </style>
    </head>
    <body>
        <div id="app" v-cloak>
            <!-- 页面进入视频倒计时播放 -->
            <div class="video">
                <div class="swiper-container">
                    <div class="swiper-wrapper" style='height:auto'>
                        <div class="swiper-slide" style='height:100%' v-for='item,index in videoData'>
                            <div class="video-cover">
                                <img class="play-ico"  style=" .5rem;" src="images/play.png" alt="">
                                <img class="videoImg":src="item.image_cover" alt="" >
                            </div>
                            
                            <div class="video-box" :class = "'dialog'+index">
                                <video :id="'video'+index" type="video/mp4"  :src="item.videoPlay" controls="controls"  class="videos" style='100%;'></video>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-pagination" style =" 20%;transform: translateX(-50%);left: 50%;height: 34px;"></div>
                </div>
            </div>
        </div>
        <!-- 公用js -->
        <script src="js/must/vue.js"></script>
        <script src="js/must/swiper.min.js"></script>
        <script src="js/must/jquery_1.12.3_jquery.min.js"></script>
        <script src="js/index.js"></script>
    </body>
</html>

index.js

var vm = new Vue({
    el:'#app',
    data:{
        // 视频data
        videoData:[
            {
                image_cover: "http://mall.faw-vw.com/shop-m/page/activity/2020-0606/images/playImg1.png",
                videoPlay: "http://mall.faw-vw.com/shop-m/page/activity/2020-0606/images/video1.mp4",
            },
            {
                image_cover: "http://mall.faw-vw.com/shop-m/page/activity/2020-0606/images/playImg2.jpg",
                videoPlay: "http://mall.faw-vw.com/shop-m/page/activity/2020-0606/images/video2.mp4",
            }
        ],
        swiper1:''
    },
    created(){
    },
    mounted: function () {
        var _this = this;
        _this.swiper1 = new Swiper('.swiper-container',{
            observer: true,                 //解决刷新不能滑动问题
            observeParents: true,           //解决刷新不能滑动问题
            observeSlideChildren:true,
            slidesPerView: 'auto',
            autoHeight: true,
            initialSlide: 0,
            loop: true,
            autoplay: true,
            on: {
                // 监听轮播：loop: true时this.activeIndex不在是数据索引，而是复制多个的slide个数值，
                // loop去掉时 this.activeIndex是数据索引,slide个数是数据length
                slideChangeTransitionEnd: function(){
                    console.log(this.activeIndex)
                    // 轮播时所有视频停止播放， 封面图显示，视频隐藏
                    var videoLength=$(".videos").length;
                    for(var i=0; i<videoLength; i++){
                        $(".videos").eq(i)[0].pause();
                    }
                    $(".video-cover,.videoImg").show();
                    $(".video-box").hide();
                },  
            },
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
        });
        // 视频播放事件创建 loop为true时会复制多个slide,无法监听元素索引值，不要在html上@click，要绑定class用js实现
        $(".video-cover").on("click",function(){
            _this.playVideo();
        })
    },
    methods:{
        playVideo: function () {
            var _this = this;
            _this.swiper1.autoplay.stop();
            $(".swiper-slide-active .video-cover,.swiper-slide-active .videoImg").hide();
            $(".swiper-slide-active .video-box").show();
            // 点击哪个视频哪个播放
            $(".swiper-slide-active .video-box .videos")[0].play();
            //监听当前视频播放状态
            $(".swiper-slide-active .video-box .videos").on('play',function(){
                _this.swiper1.autoplay.stop()
            });  
            $(".swiper-slide-active .video-box .videos").on('pause',function(){
                _this.swiper1.autoplay.start()
            });
        },
    },
})