在實際工作中經常會遇到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="width: .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='width:100%;'></video> </div> </div> </div> <div class="swiper-pagination" style ="width: 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() }); }, }, })