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上会遇到问题。

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

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

1 个答案: