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

我听说过关于移动或回调功能，但我不太了解它们。

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

查看文档：{{3}}

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

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

2 个答案: