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 class="main ">
<div class="Main--VideoOuter">
<video src="https://cdn.shopify.com/videos/c/o/v/6cd50a1d19a5401dbc9bf0d2ac008ec7.mp4" preload="auto" playsinline> </video>
</div>
<div class="Main--VideoOuter">
<video src="https://cdn.shopify.com/videos/c/o/v/6cd50a1d19a5401dbc9bf0d2ac008ec7.mp4" preload="auto" playsinline> </video>
</div>
<div class="Main--VideoOuter">
<video src="https://cdn.shopify.com/videos/c/o/v/6cd50a1d19a5401dbc9bf0d2ac008ec7.mp4" preload="auto" playsinline > </video>
</div>
<div class="Main--VideoOuter">
<video src="https://cdn.shopify.com/videos/c/o/v/6cd50a1d19a5401dbc9bf0d2ac008ec7.mp4" preload="auto" playsinline> </video>
</div>
<div class="Main--VideoOuter">
<video src="https://cdn.shopify.com/videos/c/o/v/6cd50a1d19a5401dbc9bf0d2ac008ec7.mp4" preload="auto" playsinline> </video>
</div>
</div>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 class="main ">
<div class="Main--VideoOuter">
<video src="https://cdn.shopify.com/videos/c/o/v/6cd50a1d19a5401dbc9bf0d2ac008ec7.mp4" preload="auto" playsinline> </video>
</div>
<div class="Main--VideoOuter">
<video src="https://cdn.shopify.com/videos/c/o/v/6cd50a1d19a5401dbc9bf0d2ac008ec7.mp4" preload="auto" playsinline> </video>
</div>
<div class="Main--VideoOuter">
<video src="https://cdn.shopify.com/videos/c/o/v/6cd50a1d19a5401dbc9bf0d2ac008ec7.mp4" preload="auto" playsinline > </video>
</div>
<div class="Main--VideoOuter">
<video src="https://cdn.shopify.com/videos/c/o/v/6cd50a1d19a5401dbc9bf0d2ac008ec7.mp4" preload="auto" playsinline> </video>
</div>
<div class="Main--VideoOuter">
<video src="https://cdn.shopify.com/videos/c/o/v/6cd50a1d19a5401dbc9bf0d2ac008ec7.mp4" preload="auto" playsinline> </video>
</div>
</div>