swiper播放视频，完成后自动切换下一张

以对_

已于 2023-12-14 15:53:29 修改

阅读量723

点赞数

分类专栏： js css 文章标签：音视频

于 2023-12-13 14:06:51 首次发布

本文链接：https://blog.csdn.net/qq_44161722/article/details/134969725

版权

js 同时被 2 个专栏收录

14 篇文章 0 订阅

订阅专栏

css

14 篇文章 0 订阅

订阅专栏

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>

以对_

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
6
评论
swiper播放视频，完成后自动切换下一张

我的思路是监听视频播放进度，如果播放完毕再开启swiper的自动轮播，因为我的需求是只有第一个swiper才是视频，后边的都是图片，那就需要轮播到第一个swiper的时候停止自动轮播，继续等待视频播放完毕再次开始自动轮播。// 如果当前播放时长小于总时长并且大于总时长秒数就开始自动轮播，这里之所以这么判断是因为duration 和currentTime 的小数位并不能保证完全一致，所以就根据当前播放时长的整数秒是否大于总时长的整数秒。// 判断当前swiper索引，如果是第一个就停止自动轮播。
复制链接

扫一扫