我如何控制暂停/播放视频在旋转木马

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

本文关键字：播放 视频 旋转木马 暂停 何控制 控制      更新时间：2023-09-26

我用flickity carousel库创建了一个视频carousel，在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);
       });
});

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

是否有一种方法来更新这些功能，每次旋转木马滑动?

我实际上想出了我认为最好的方法。旋转木马有一个事件，'settle.flickity'，每次旋转木马在滑动或自动播放后静止时触发(更多关于flickity事件的信息请参阅此处的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);
      });
  });

将播放选中的视频，并暂停任何未选中的视频

相关文章：