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>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Documenttitle>
  <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>

你可能感兴趣的:(js,css,音视频)