如何控制暂停/播放旋转木马中的视频？(How do I control pausing/playing with videos in a carousel?)

我有一个使用flickity轮播库创建的视频轮播，在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); }); });

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

有没有办法在每次旋转木马滑动时更新这些功能？

I have a video carousel created using the flickity carousel library, seen here on codepen. What I want to happen is that when a user slides the carousel, the selected slide stops playing, then the slide that takes the selected, middle position starts to play. Right now, using jQuery, I get the selected slide to initially play:

$(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); }); });

But when the slides switch position, the selected slide just moves position and keeps playing, while the new slide takes the middle position and doesn't play.

Is there a way to update those functions each time the carousel slides?

最满意答案

我实际上想出了我认为最好的方法。旋转木马有一个事件， 'settle.flickity' ，每次滑动或自动播放后旋转木马都会触发（更多信息可以在这里看到关于flickity事件。因此，这段代码：

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

I actually figured out what I thought is the best way to do this. There is an event for the carousel, 'settle.flickity', which fires each time the carousel settles after being slid or autoplayed (More can be read about the flickity events here on flickity. Therefore, this code:

Will play the selected video and pause any video that is not selected.

更多推荐