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.

What does your current code not do/do wrong that you want to fix? — dg99, Feb 06 '15 at 18:03
@dg99, like I have written in my text I want to pause my video (if it's played) when I change slide. — Henric Åkesson, Feb 06 '15 at 22:43

score 2 · Accepted Answer · answered Feb 12 '15 at 13:39

2

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

answered Feb 12 '15 at 13:39

Henric Åkesson

140
1
2
11

This doesn't seem to work on the latest Owl Carousel 2 :/ I think because they changed how they handle video – ckhatton Jan 11 '17 at 10:35
I went for the brutal approach, which is to kill the iframe `$('SELECTOR iframe').prop('src','')` ([source](http://stackoverflow.com/questions/6145990/how-to-stop-a-vimeo-video-with-jquery)) – ckhatton Jan 11 '17 at 10:58

score 0 · Answer 2 · answered Feb 06 '15 at 18:05

0

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

answered Feb 06 '15 at 18:05

mika

1,411
1
12
23

I have tried that. That does not make it work. What I want is to pause my HTML5 video when I change slide by keyboard, dragg, touch or select next or prev slide by navigation. – Henric Åkesson Feb 06 '15 at 22:42
You'll need to listen to the proper events, and to find out you will need to read the doc. – mika Feb 07 '15 at 16:03

Pause HTML5 video in Owl Carousel on slide

2 Answers2

Linked