flickity.js 基于当前单元格播放/暂停视频答案

【问题标题】：flickity.js play/pause video based on current cellflickity.js 基于当前单元格播放/暂停视频
【发布时间】：2019-03-07 22:54:04
【问题描述】：

我正在使用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();
});

【问题讨论】：

标签： javascript jquery html5-video

【解决方案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 上遇到问题。

另外：使用“settle”事件而不是“change”可以让您在活动幻灯片稳定在其结束位置后开始播放。

【讨论】：