video 属性和事件用法大全： https://www.cnblogs.com/rogerwu/p/10072119.html
我的思路是监听视频播放进度，如果播放完毕再开启swiper的自动轮播，因为我的需求是只有第一个swiper才是视频，后边的都是图片，那就需要轮播到第一个swiper的时候停止自动轮播，继续等待视频播放完毕再次开始自动轮播。
把swiper的自动轮播时间设置的小一点，视频播放完后切换下一张swiper的等待时间就不会有太长时间间隔，其余的通过 data-swiper-autoplay 属性控制
开启自动轮播 swiper0.autoplay.start(); 查看文档
关闭自动轮播 swiper0.autoplay.stot();
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link type="text/css" href="./assets/css/swiper.min.css" rel="stylesheet"><style>.swiper-slide {width: 100%; height: 100vh;}.swiper-slide video {width: 100%;}</style>
</head>
<body><div class="swiper-container swiper0" id="banner-swiper"><div class="swiper-wrapper"><div class="swiper-slide"><video id="sVideo" muted loop><source src="./assets/images/s_video.mp4" type="video/mp4"></video></div><div class="swiper-slide" data-swiper-autoplay="3000" style="background-color: antiquewhite;">1111</div><div class="swiper-slide" data-swiper-autoplay="3000" style="background-color: #ccc;">1111</div></div></div><script src="./assets/js/jquery.min.js"></script><script src="./assets/js/swiper.min.js"></script><script>var video = document.getElementById("sVideo");var swiper0 = new Swiper('.swiper0', {autoplay: {delay: 100, // 这个值设置的小一点，视频播放完后切换下一张swiper的等待时间就会短一点disableOnInteraction: false,},effect: 'fade',on:{slideChangeTransitionStart: function(){if(this.activeIndex == 0){ // 判断当前swiper索引，如果是第一个就停止自动轮播this.autoplay.stop();video.currentTime = 0.1;video.play();}else{video.currentTime = 0.1;video.pause();}}}});swiper0.autoplay.stop(); // 初始化关闭自动轮播// 监听视频播放进度document.getElementById("sVideo").ontimeupdate = function() {var duration = video.duration; // 视频总时长 16.89685765...var currentTime = video.currentTime; // 当前播放时长 var videoEnd = duration.toString().slice(0,2); // 截取视频总时长秒数 16// 如果当前播放时长小于总时长并且大于总时长秒数就开始自动轮播，这里之所以这么判断是因为duration 和currentTime 的小数位并不能保证完全一致，所以就根据当前播放时长的整数秒是否大于总时长的整数秒if ( currentTime < video.duration && currentTime > videoEnd ) {swiper0.autoplay.start();}};video.play();</script>
</body>
</html>
不生效)
