flickity.js воспроизведение / пауза видео на основе текущей ячейки

Question

Я использую Flickity для создания слайдера изображений и видео.При смене слайдов я хочу воспроизвести видео на текущем слайде (у которого есть класс .is-selected), а затем снова сделать паузу после перехода к следующему слайду.

Код, приведенный ниже, удастся найтилюбые видео в слайдере, но воспроизводит их при любом изменении слайда, а не специально для слайда, в котором они находятся.Любая помощь будет высоко ценится.

// Init Flickity
var $carousel = $('.carousel');

$carousel.flickity();

// On slide change
$carousel.on('change.flickity', function() {           
    // Find videos
    var currentSlide = $(this).find('.is-selected');
    var video = $(this).find('video');

    // Play videos
    video[0].play();
});

Answer 1

То, что вы хотите сделать, это приостанавливать все видео при каждой смене слайдов и воспроизводить только одно на выбранном слайде.Я сделал нечто подобное (без jQuery):

var carousel = document.querySelector(".carousel");
var flkty = new Flickity(carousel, {
// ..
});

flkty.on("change", function() {
  console.log("Flickity active slide: " + flkty.selectedIndex);

  flkty.cells.forEach(function(cell, i) {
    if (cell.element == flkty.selectedElement) {
      // play video if active slide contains one
      // use <video playsinline ..> in your html to assure it works on ios devices
      var video = cell.element.querySelector("video");
      if (video) {
        console.log("playing video " + i);
        video.play();
      }
      return;
    }

    // pause all other videos
    var video = cell.element.querySelector("video");
    if (video) {
      console.log("pausing video " + i);
      video.pause();
    }
  });
});

Как я уже говорил в комментарии, вы можете использовать атрибут playsinline для ваших видео, иначе вы столкнетесь с проблемами на iOS.

Также: использование события «урегулировать» вместо «изменить» позволяет начать воспроизведение после того, как активный слайд установился в своей конечной позиции.