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

问题描述

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

Im using Owl Carousel 2.0.0-beta.2.4 and in one slide I have a HTML5 video. What I want to do is when I change slide I want the video to be paused or stopped if pause is not possible. The slide can be changed by drag, touch, next and prev buttons and by keyboard arrows.

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

My script looks like this right now:

$('.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或回调函数，但我不太了解它们。

I have heard about onMove or callback functions but I don't quite understand them.

推荐答案

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

I solved it with this code:

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

所以我的猫头鹰轮播的最终代码是：

So final code for my owl-carousel is:

    $('.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中的HTML5视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！