All geek questions in one place

Pausing Bootstrap carousel When playing a video

I have some slides with videos and images. When loading, the carousel is set to auto play. But when someone plays the video and moves the mouse, it continues to slide (as expected).

How to track when a video is playing and pausing? I have a search around SO but have not found a similar question.

The site administrator will upload the video later so that they can be an iframe or html5 video. So I need a solution that works for both.

+6
source share
2 answers

$ ("# myCarousel") carousel ('pause'). stop it $ ("# MyCarousel") carousel (). start again http://www.w3.org/2010/05/video/mediaevents.html there are a lot of events, you have to start it again, even a pause, the events have ended and the game will pause.

for youtube im not sure how you integrate it, but they have js api so https://developers.google.com/youtube/js_api_reference#Events will show you events that you can listen to and do in the same way as with the video html5

+2
source

This helped me pause the Bootstrap carousel when playing native HTML5 video and playing it again when the video is paused or done. I'm a complete JS newbie, but I searched around and weaved several things together. Perhaps I made a mistake (most likely), but this works for me.

I don’t call the video by ID, because I want the action to work on any video playing in the carousel. I have several in my case.

Note to change the carousel ID to suit yours.

<script> $('video').on('play', function (e) { $("#portfolioCarousel").carousel('pause'); }); $('video').on('stop pause ended', function (e) { $("#portfolioCarousel").carousel(); }); </script>
+1
source

Source: https://habr.com/ru/post/947010/

More articles:


All Articles