Pause HTML5 video in Owl Carousel on slide

问题:

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

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

回答1:

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

回答2:

Check out the doc: http://www.owlcarousel.owlgraphic.com/docs/api-events.html

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