Stop The Video When Play Another Video

In my page, I have many videos and I want to stop the video when playing another video in HTML5.

Solution 1:

here is the way

<div class="item active"> 
    <videoclass="inlineVideo"controls="controls"playsinlinewidth="180"height="300"><sourcesrc="images/video.mp4"type="video/mp4" ><p>Video is not Supporting</p></video></div><scripttype="text/javascript">window.addEventListener('load', function(event){
        document.querySelectorAll(".inlineVideo").forEach((el) => {
            el.onplay = function(e){
                // pause all the videos except the current.document.querySelectorAll(".inlineVideo").forEach((el1) => {
                    if(el === el1)
                        el1.play();
                    else
                        el1.pause();
                });
            }
        });
    });
</script>

Solution 2:

You should rely on HTML5 video API to control your videos. Here is a good starting point: https://www.html5rocks.com/en/tutorials/video/basics

I can't see in your code how you load all your videos, but a first try could be to stop all videos before a video is being played:

$(document).ready(function(){
    // Add an eventlistener to all videos to detect when they start playing.
    $("video").each(function(){
        var video = $(this)[0];
        video.addEventListener("playing", function() {
            // Stop all other videos.
            $("video").each(function(){
                if($(this)[0] != video)
                    video.pause(); 
            });
        }, true);
     );
  }
});

Share