Swiper js，将 currentTime 重置为 0 幻灯片的视频

Question

当滑块位于图像幻灯片中时，我正在尝试将 currentTime = 0 设置为带有视频的幻灯片。

swiper js 可以吗？

https://codepen.io/josedeharo/pen/QWwgaoK

实际的js：

var swiper = new Swiper('.swiper-container', {
  pagination: '.swiper-pagination',
  paginationClickable: true,
  nextButton: '.swiper-button-next',
  prevButton: '.swiper-button-prev',
  spaceBetween: 30,
  autoplayDisableOnInteraction: true,
    speed: 1000,
   autoplay: true,
});

Answer 1

第一个 reset 和 autoplay 视频与 swiper API 无关 - 使用简单的 JS：

stackoverflow：How to Reset video using html5

您应该使用 Swiper API 事件：

mySwiper.on('slideChange', function () {
  console.log('slide changed do something');
});

• swiper-API-事件： https://swiperjs.com/api/#events

• 你应该muted有声音的视频（否则autoplay在chrome上不起作用）：https://www.w3schools.com/tags/att_video_muted.asp

更新答案（完整代码示例）

• 从所有视频中删除“自动播放”。
• jQuery 要求
• init事件下的第一个视频播放
• slideChange 事件下的上一个视频和当前视频播放/停止
• 我在Jquery selector 中使用var 来获取上一个/当前视频 - 阅读更多内容：stackoverflow：How to use JavaScript variables in jQuery selectors?

var swiper = new Swiper('.swiper', {
  loop: true,
  pagination: {
    el: '.swiper-pagination',
    clickable: true
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  /* ON INIT AUTOPLAY THE FIRST VIDEO */
  on: {
    init: function () {
      console.log('swiper initialized');
      var currentVideo =  $("[data-swiper-slide-index=" + this.realIndex + "]").find("video");
      currentVideo.trigger('play');
    },
  },
});

/* GET ALL VIDEOS */
var sliderVideos = $(".swiper-slide video");

/* SWIPER API - Event will be fired after animation to other slide (next or previous) */
swiper.on('slideChange', function () {
  console.log('slide changed');
  /* stop all videos (currentTime buggy without this loop idea) */
  sliderVideos.each(function( index ) {
    this.currentTime = 0;
  });

  /* SWIPER GET CURRENT AND PREV SLIDE (AND VIDEO INSIDE) */
  var prevVideo =  $("[data-swiper-slide-index=" + this.previousIndex + "]").find("video");
  var currentVideo =  $("[data-swiper-slide-index=" + this.realIndex + "]").find("video");
  prevVideo.trigger('stop');
  currentVideo.trigger('play');
});

html, body {
  position: relative;
  height: 100%;
}
body {
  background: #eee;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color:#000;
  margin: 0;
  padding: 0;
}
.swiper-container {
  width: 100%;
  height: 100%;
}
.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  /* Center slide text vertically */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* reset list */
ul.swiper-wrapper{
  list-style-type: none;
  padding: 0px;
  margin: 0px;
}

h2{
  flex-basis: 100%;
}

<link rel="stylesheet" href="https://unpkg.com/swiper@8.0.7/swiper-bundle.min.css">

<!-- Slider main container -->
<div class="swiper">
  <!-- Additional required wrapper -->
  <ul class="swiper-wrapper">
    <!-- Slides -->
    <li class="swiper-slide">
      <div>
        <h3>Slide 1 - <small>Reset video and play when slide change</small></h3>
        <video 
               width="320" height="240" controls muted loop>
          <source src="https://ak2.picdn.net/shutterstock/videos/34123252/preview/stock-footage-coworkers-discussing-in-the-future-of-their-company-over-several-charts-and-graphs-business.mp4" type="video/mp4">
          Your browser does not support the video tag.
        </video>
      </div>
    </li>
    <li class="swiper-slide">
      <div>
        <h3>Slide 2 - <small>Reset video and play when slide change</small></h3>
        <video width="320" height="240" controls muted loop>
          <source src="https://ak1.picdn.net/shutterstock/videos/25348301/preview/stock-footage--business-new-customers-sale-and-people-concept-thousands-of-people-formed-qr-code-crowd-flight.webm" type="video/webm">
          Your browser does not support the video tag.
        </video>

      </div>
    </li>
    <li class="swiper-slide">
      <div>
        <h3>Slide 3 - <small>Reset video and play when slide change</small></h3>
        <video width="320" height="240" controls muted loop>
          <source src="https://ak4.picdn.net/shutterstock/videos/17795644/preview/stock-footage-receiving-email-e-mail-sign-on-holographic-screen-the-person-received-the-email-and-opens-it-with.mp4" type="video/mp4">
          Your browser does not support the video tag.
        </video>
      </div>
    </li>
  </ul>
  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>

  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- If we need scrollbar -->
  <div class="swiper-scrollbar"></div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://unpkg.com/swiper@8.0.7/swiper-bundle.min.js"></script>

codepen：https://codepen.io/ezra_siton/pen/povLPRY?editors=1111