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

【问题标题】：Pause HTML5 video in Owl Carousel on slide在幻灯片上的 Owl Carousel 中暂停 HTML5 视频
【发布时间】：2015-04-06 23:00:20
【问题描述】：

我正在使用 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 或回调函数，但我不太了解它们。

【问题讨论】：

您当前的代码没有做/做错什么是您想要修复的？
@dg99，就像我在文本中写的一样，我想在更换幻灯片时暂停视频（如果已播放）。

标签： jquery html owl-carousel

【解决方案1】：

我用这段代码解决了这个问题：

        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 Carousel 2：/ 我认为是因为他们改变了处理视频的方式
我采取了残酷的方法，即杀死iframe $('SELECTOR iframe').prop('src','') (source)

【解决方案2】：

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

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

【讨论】：

我试过了。这并不能使它起作用。我想要的是在我通过键盘更改幻灯片、拖动、触摸或通过导航选择下一张或上一张幻灯片时暂停我的 HTML5 视频。
你需要听正确的事件，并找出你需要阅读文档。