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

HTML

<div  id="videos">
    <div >
        <div >
            <video poster="http://localhost:8000/storage/images/videos/1659416196.png" controls="">
                <source src="http://localhost:8000/storage/videos/1659416196.mp4" type="video/mp4">
                <source src="http://localhost:8000/storage/videos/1659416196.mp4" type="video/ogg">
                <source src="http://localhost:8000/storage/videos/1659416196.mp4" type="video/webm">
                <object data="http://localhost:8000/storage/videos/1659416196.mp4">
                    <embed src="http://localhost:8000/storage/videos/1659416196.mp4">
                </object>
            </video>
        </div>
    </div>
    <div >
        <div >
            <video poster="http://localhost:8000/storage/images/videos/1659416196.png" controls="">
                <source src="http://localhost:8000/storage/videos/1659416196.mp4" type="video/mp4">
                <source src="http://localhost:8000/storage/videos/1659416196.mp4" type="video/ogg">
                <source src="http://localhost:8000/storage/videos/1659416196.mp4" type="video/webm">
                <object data="http://localhost:8000/storage/videos/1659416196.mp4">
                    <embed src="http://localhost:8000/storage/videos/1659416196.mp4">
                </object>
            </video>
        </div>
    </div>
    <div >
        <div >
            <video poster="http://localhost:8000/storage/images/videos/1659416196.png" controls="">
                <source src="http://localhost:8000/storage/videos/1659416196.mp4" type="video/mp4">
                <source src="http://localhost:8000/storage/videos/1659416196.mp4" type="video/ogg">
                <source src="http://localhost:8000/storage/videos/1659416196.mp4" type="video/webm">
                <object data="http://localhost:8000/storage/videos/1659416196.mp4">
                    <embed src="http://localhost:8000/storage/videos/1659416196.mp4">
                </object>
            </video>
        </div>
    </div>
    <div >
        <div >
            <video poster="http://localhost:8000/storage/images/videos/1659416196.png" controls="">
                <source src="http://localhost:8000/storage/videos/1659416196.mp4" type="video/mp4">
                <source src="http://localhost:8000/storage/videos/1659416196.mp4" type="video/ogg">
                <source src="http://localhost:8000/storage/videos/1659416196.mp4" type="video/webm">
                <object data="http://localhost:8000/storage/videos/1659416196.mp4">
                    <embed src="http://localhost:8000/storage/videos/1659416196.mp4">
                </object>
            </video>
        </div>
    </div>
</div>

script

<script>
    window.addEventListener('load', function(event){
        document.querySelectorAll("#videos").forEach((video) => {
            video.onplay = function(event){
                event.preventDefault();
                document.querySelectorAll("video").forEach((playing) => {
                    if(video === playing)
                        playing.play();
                    else
                        playing.pause();
                });
            }
        });
    });
</script>

I want to stop all div#videos videos (here I have taken only 4, but there are several videos) from running on the current page when a new video is clicked. At one point in time, only one video should run. I have gone through the documentation.

CodePudding user response：

#videos video seems to be a much better selector

window.addEventListener('load', function(event) {
  document.querySelectorAll("#videos video").forEach((video) => {
    video.onplay = function(event) {
      event.preventDefault();
      document.querySelectorAll("#videos video").forEach((playing) => {
        if (video === playing)
          playing.play();
        else
          playing.pause();
      });
    }
  });
});

<div  id="videos">
  <div >
    <div >
      <video poster="http://localhost:8000/storage/images/videos/1659416196.png" controls="">
                <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4">
            </video>
    </div>
  </div>
  <div >
    <div >
      <video poster="http://localhost:8000/storage/images/videos/1659416196.png" controls="">
                <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4">
            </video>
    </div>
  </div>
  <div >
    <div >
      <video poster="http://localhost:8000/storage/images/videos/1659416196.png" controls="">
                <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4">
            </video>
    </div>
  </div>
  <div >
    <div >
      <video poster="http://localhost:8000/storage/images/videos/1659416196.png" controls="">
                <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4">
            </video>
    </div>
  </div>
</div>