如何控制 pausing/playing 轮播中的视频？

Question

我有一个使用 flickity carousel library, seen here on codepen 创建的视频轮播。我想要发生的是，当用户滑动轮播时，所选幻灯片停止播放，然后占据所选中间位置的幻灯片开始播放。现在，使用 jQuery，我让选定的幻灯片开始播放：

$(document).ready(function () {
       var $partnerSlides = $('.partner-slides').flickity();

       function onLoadeddata(event) {
           var cell = $partnerSlides.flickity('getParentCell', event.target);
                $partnerSlides.flickity('cellSizeChange', cell && cell.element);
       }

       $partnerSlides.find('.slide video').each(function (i, video) {
           video.pause();
           $(video).on('durationchange', onLoadeddata);
       });

       $partnerSlides.find('.slide.is-selected video').each(function (i, video) {
           video.play();
           $(video).on('durationchange', onLoadeddata);
       });

});

但是当幻灯片切换位置时，所选幻灯片只是移动位置并继续播放，而新幻灯片位于中间位置并且不播放。

有没有办法在每次轮播滑动时更新这些功能？

Answer 1

我实际上想出了我认为最好的方法。轮播有一个事件，'settle.flickity'，每次轮播在滑动或自动播放后稳定下来时都会触发（更多内容可以阅读 flickity 事件 here on flickity。因此，这段代码：

var $gallery = $('.partner-slides').flickity(); //this is the carousel

  $gallery.on('settle.flickity', function () {
      console.log('Flickity settled at ' + flkty.selectedIndex);

      $gallery.find('.slide video').each(function (i, video) {
          video.pause();
          $(video).on('loadeddata', onLoadeddata);
      });

      $gallery.find('.slide.is-selected video').each(function (i, video) {
          video.play();
          $(video).on('loadeddata', onLoadeddata);
      });

  });

将播放选定的视频并暂停任何未选定的视频。

如何控制 pausing/playing 轮播中的视频？

How do I control pausing/playing with videos in a carousel?

html

javascript

css

jquery

flickity