bootstrap carousel - pause the html video while sliding

Question

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 am using html5 video tag not iframe – Feb 12 '16 at 10:07 — , Feb 12 '16 at 10:07
@Praveen Kumar it is not duplicate as per above comment – Morpheus Feb 12 '16 at 10:30 — Morpheus, Feb 12 '16 at 10:30
@user3932810 Opened it. – Praveen Kumar Purushothaman Feb 12 '16 at 10:33 — Praveen Kumar Purushothaman, Feb 12 '16 at 10:33

score 4 · Accepted Answer · edited Feb 12 '16 at 11:07

4

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

edited Feb 12 '16 at 11:07

John Slegers

45,213
22
199
169

answered Feb 12 '16 at 10:48

Morpheus

8,829
13
51
77

Glad it helped you out :) – Morpheus Feb 16 '16 at 11:47
You can pause each one of them by calling the same code with unique video id. Or simply give all you videos same css class and handle the pause in a loop. – Morpheus Dec 11 '18 at 12:44

score 1 · Answer 2 · answered Dec 12 '19 at 22:59

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.

score 0 · Answer 3 · answered May 07 '20 at 08:53

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

https://getbootstrap.com/docs/4.4/components/carousel/#events

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

https://developers.google.com/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.com/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.com/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.com/docs/4.4/components/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 complete working html code, please refer to my answer in another thread:

Pause Bootstrap carousel when playing Youtube video

bootstrap carousel - pause the html video while sliding

3 Answers3