Stop first video when Hover on second video-CodePudding

I'm trying to build a video carousel based on the hover event so when the user hover over the first video it should play and when hovering on the second video then the first video should stop and the second video needs to play

I have achieved to play video on hover. I need help in stopping other videos when playing current

  document.querySelectorAll('.Main--VideoOuter').forEach((video) => {
   video.addEventListener('mouseover', function (event) {
     var playPromise = this.querySelector('video').play();
   
  if (playPromise !== undefined) {
    playPromise.then(_ => {
      // Automatic playback started!
      // Show playing UI.
      // We can now safely pause video...
      this.pause();
    })
    .catch(error => {
      // Auto-play was prevented
      // Show paused UI.
    });
  }
   });

 
  
});

* {
  box-sizing: border-box;
}

   

body,
{
  padding: 0;
  margin: 0;
}

.main {
  
  display:flex;
}
.main video{
max-width:300px;
  margin:0 25px
}

<div >
     <div >
  <video src="https://cdn.shopify.com/videos/c/o/v/6cd50a1d19a5401dbc9bf0d2ac008ec7.mp4"  preload="auto" playsinline> </video>
  </div>
      <div >
  <video src="https://cdn.shopify.com/videos/c/o/v/6cd50a1d19a5401dbc9bf0d2ac008ec7.mp4"  preload="auto" playsinline> </video>
    </div>
      <div >
  <video src="https://cdn.shopify.com/videos/c/o/v/6cd50a1d19a5401dbc9bf0d2ac008ec7.mp4"  preload="auto" playsinline > </video>
    </div>
   <div >
  <video src="https://cdn.shopify.com/videos/c/o/v/6cd50a1d19a5401dbc9bf0d2ac008ec7.mp4"  preload="auto" playsinline> </video>
    </div>
      <div >
  <video src="https://cdn.shopify.com/videos/c/o/v/6cd50a1d19a5401dbc9bf0d2ac008ec7.mp4"  preload="auto" playsinline> </video>
    </div>
  
</div>

CodePudding user response：

See fiddle at the end of this answer. Here is the JS code that includes the functionality that you need:

document.querySelectorAll('.Main--VideoOuter').forEach((video) => {
video.addEventListener('mouseover', function (event) {
    var playPromise = this.querySelector('video').play();

    document.querySelectorAll('.Main--VideoOuter').forEach(videoOuter => {
        if (videoOuter !== event.currentTarget) {
            videoOuter.querySelector('video').pause();
        }
    });

    if (playPromise !== undefined) {
        playPromise.then(_ => {
            // Automatic playback started!
            // Show playing UI.
            // We can now safely pause video...
            this.pause();
        })
        .catch(error => {
            // Auto-play was prevented
            // Show paused UI.
        });
    }
});

});

On video hover you simply just iterate through your "Main--VideoOuter"-Element and you stop() every video which is not the one you are currently hovering.

 document.querySelectorAll('.Main--VideoOuter').forEach((video) => {
   video.addEventListener('mouseover', function (event) {
     var playPromise = this.querySelector('video').play();
     
     document.querySelectorAll('.Main--VideoOuter').forEach(videoOuter => {
      if (videoOuter !== event.currentTarget) {
        videoOuter.querySelector('video').pause();
      }
    });
   
  if (playPromise !== undefined) {
    playPromise.then(_ => {
      // Automatic playback started!
      // Show playing UI.
      // We can now safely pause video...
      this.pause();
    })
    .catch(error => {
      // Auto-play was prevented
      // Show paused UI.
    });
  }
   });

 
  
});

* {
  box-sizing: border-box;
}

   

body,
{
  padding: 0;
  margin: 0;
}

.main {
  
  display:flex;
}
.main video{
max-width:300px;
  margin:0 25px
}

<div >
     <div >
  <video src="https://cdn.shopify.com/videos/c/o/v/6cd50a1d19a5401dbc9bf0d2ac008ec7.mp4"  preload="auto" playsinline> </video>
  </div>
      <div >
  <video src="https://cdn.shopify.com/videos/c/o/v/6cd50a1d19a5401dbc9bf0d2ac008ec7.mp4"  preload="auto" playsinline> </video>
    </div>
      <div >
  <video src="https://cdn.shopify.com/videos/c/o/v/6cd50a1d19a5401dbc9bf0d2ac008ec7.mp4"  preload="auto" playsinline > </video>
    </div>
   <div >
  <video src="https://cdn.shopify.com/videos/c/o/v/6cd50a1d19a5401dbc9bf0d2ac008ec7.mp4"  preload="auto" playsinline> </video>
    </div>
      <div >
  <video src="https://cdn.shopify.com/videos/c/o/v/6cd50a1d19a5401dbc9bf0d2ac008ec7.mp4"  preload="auto" playsinline> </video>
    </div>
  
</div>