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视频与切换API不相关-使用简单的JS：

How to Reset video using html5

滑动器事件slideChangeTransitionStart

您应该使用Swiper API并在更改幻灯片时重置视频的时间：

将在动画播放到另一张幻灯片（下一张或上一张）之后触发事件。

mySwiper.on('slideChangeTransitionStart', function () {
  console.log('slide changed');
});

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

更改幻灯片时重置并播放视频

解决此问题的一种方法：

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

/* get all videos inside swiper */
var sliderVideos = $(".swiper-slide video");

/* Event will be fired after animation to other slide (next or previous) */
swiper.on('slideChangeTransitionStart', function () {
  /*  Iterate over a jQuery object, executing a function for each matched element */
  sliderVideos.each(function( index ) {
    this.currentTime = 0
    this.play();
  });
});

**请记住，您应该muted带声音的视频（否则，自动播放无法在Chrome上使用）。