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

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

• javascript
• html
• css
• twitter-bootstrap-3
• carousel

• I am using html5 video tag not iframe – user3932810 Commented Feb 12, 2016 at 10:07
• @Praveen Kumar it is not duplicate as per above ment – Morpheus Commented Feb 12, 2016 at 10:30
• @user3932810 Opened it. – Praveen Kumar Purushothaman Commented Feb 12, 2016 at 10:33

3 Answers 3

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 bined 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

the best way is to start the fist one using autoplay and the you can use jquery to start and stop them. I have several carousel items where only the first 3 have videos.

I solved it like this:

<script language="JavaScript" type="text/javascript">
        $(document).ready(function () {
            $('.carousel').carousel({ interval: 8000 })
            $('#myCarousel').on('slide.bs.carousel', function (args) {
                var videoList = document.getElementsByTagName("video");
                switch (args.from) {
                    case 0:
                        videoList[0].pause();
                        break;
                    case 1:
                        videoList[1].pause();
                        break;
                    case 2:
                        videoList[2].pause();
                        break;
                }
                switch (args.to) {
                    case 0:
                        videoList[0].play();

                        break;
                    case 1:
                        videoList[1].play();
                        break;
                    case 2:
                        videoList[2].play();
                        break;
                }
            })

        });
    </script>

this assumes that the videos in your DOM are ordered in the order of your carousel and that there are no videos above, as you have a case you could just grab the video by it's ID, that would always work.

If you are using Youtube iframe videos, then I achieved this by listening for the carousel slide event slide.bs.carousel :

• https://getbootstrap./docs/4.4/ponents/carousel/#events

Then if this event occurs, I would then use player.pauseVideo() functionality of the Youtube iframe API with JavaScript:

• https://developers.google./youtube/iframe_api_reference#Playback_controls

Sample snippet:

// When a slide occurs, pause the current iframe video that is playing
// player.pauseVideo():Void - Pauses the currently playing video.
// Reference: https://developers.google./youtube/iframe_api_reference#Playback_controls
$('#moviesCarousel').on('slide.bs.carousel', function(event) {
    // The variable "players" contain each Youtube Player for each iframe video
    // Reference: https://developers.google./youtube/iframe_api_reference#Loading_a_Video_Player
    // event.from - The index of the current video (before the slide occurs)
    //            - It is also the index of the corresponding player for the current video
    // Reference: https://getbootstrap./docs/4.4/ponents/carousel/#events
    players[event.from].pauseVideo();
});

Where:

• event.from corresponds to the index of the carousel video item before the slide occurred
• players are a list of YT.Player instances, where each instance controls 1 particular iframe Youtube video (so 1 video item among the carousel video list). This assumes that the order of carousel videos maps to the same order of its corresponding YT.Player instances

For a plete working html code, please refer to my answer in another thread:

• Pause Bootstrap carousel when playing Youtube video