Pause HTML5 video in Owl Carousel on slide

Question

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.

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

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