在幻灯片上的 Owl 轮播中暂停 HTML5 视频

Question

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

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

$('.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

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

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

Answer 2

我用这段代码解决了它：

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

所以我的 owl-carousel 的最终代码是：

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

在幻灯片上的 Owl 轮播中暂停 HTML5 视频

Pause HTML5 video in Owl Carousel on slide

html

jquery

owl-carousel