在幻灯片上暂停Owl Carousel中的HTML5video

我使用Owl Carousel 2.0.0-beta.2.4，在一张幻灯片中我有一个HTML5video。 我想要做的是当我更改幻灯片时，如果无法暂停，我希望video暂停或停止。 可以通过拖动，触摸，下一个和上一个按钮以及键盘箭头来更改幻灯片。

我的脚本现在看起来像这样：

$('.owl-carousel').owlCarousel({ items: 1, animateOut: 'fadeOut', animateIn: 'fadeIn', URLhashListener: true, startPosition: 'URLHash', nav: true, autoHeight : true, video:true, }); var owl = $('.owl-carousel').data('owlCarousel'); $(document.documentElement).keyup(function(event) { if (event.keyCode == 37) { owl.prev(); } else if (event.keyCode == 39) { owl.next(); } }); 

我听说过onMove或回调函数，但我不太了解它们。

Answer 1

我用这段代码解决了它：

  onTranslate: function() { $('.owl-item').find('video').each(function() { this.pause(); }); } 

所以我的猫头鹰旋转木马的最终代码是：

  $('.owl-carousel').owlCarousel({ items: 1, animateOut: 'fadeOut', animateIn: 'fadeIn', URLhashListener: true, startPosition: 'URLHash', nav: true, autoHeight: true, video: true, responsiveRefreshRate: 100, onTranslate: function() { $('.owl-item').find('video').each(function() { this.pause(); }); } }); 

Answer 2

查看文档： http ： //www.owlcarousel.owlgraphic.com/docs/api-events.html

 owl.on('changed.owl.carousel', function(event) { $(".owl-carousel video").get(0).pause(); })