悬停在第二个视频上时停止第一个视频

Question

我正在尝试基于悬停事件构建一个视频转盘因此当用户悬停在它应该播放的第一视频上时，并且当悬停在第二视频上时第一视频应该停止并且第二视频需要播放

我已经实现了在悬停时播放视频。播放当前时，我需要帮助停止其他视频

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>

Answer 1

请参阅答案末尾的fiddle。以下是JS代码，其中包含您需要的功能：

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.
});
}
});

})；

在视频悬停时，您只需重复您的"；Main-VideoOuter"-元素，然后停止((每个不是您当前悬停的视频。

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>