Search code examples
javascripthtmlcsstwitter-bootstrap-3carousel

bootstrap carousel - pause the html video while sliding

I have bootstrap carousel which includes both images and videos and it works fine. But when we move to next slide, currently playing video in active slide should be paused.

Now the video is still playing even after moving to next slide.

Any help is much appreciated.

Thanks!!

$('#myCarousel').carousel({
  interval: 3000
});

DEMO

Solution

  • You can call a pause event on html5 video:

    document.getElementById('someelement').pause()

    More video events here

    Answering your question - you can use slide.bs.carousel event combined with the above line to stop video when slide event occurs:

    $('#myCarousel').carousel({
  interval: 3000
}).on('slide.bs.carousel', function () {
  document.getElementById('player').pause();
});

    See the updated jsfiddle