swiper播放视频，完成后自动切换下一张 |
您所在的位置：网站首页 › ppt中视频播放完毕之后自动到下一张 › swiper播放视频，完成后自动切换下一张 |
|
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> Document .swiper-slide { width: 100%; height: 100vh; } .swiper-slide video { width: 100%; } 1111 1111 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 videoEnd ) { swiper0.autoplay.start(); } }; video.play(); |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |