Carousel中的HTML5视频

Carousel中的HTML5视频

本文介绍了在幻灯片上暂停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视频的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-12 08:46