修改JavaScript代码：鼠标移出视频时重置而非暂停

下面是调整后的JavaScript代码，实现鼠标悬停视频时播放、鼠标移出时将视频重置到初始状态的效果：

const videos = document.querySelectorAll(".hover_video_wrapper .video");

// 遍历所有视频添加事件监听
for (const video of videos) {
    // 鼠标悬停时播放
    video.addEventListener('mouseover', function() { 
      video.play();
      // 可在此添加其他功能
    }, false);
    // 鼠标移出时重置视频
    video.addEventListener('mouseout', function() { 
      // 可在此添加其他功能
      video.pause();
      video.currentTime = 0;
    }, false);
}

改动说明 #

把原代码中mouseout事件里的video.pause()，改成先暂停视频，再通过video.currentTime = 0将播放进度重置到开头，这样鼠标移出后视频会回到初始状态并停止播放。

内容的提问来源于stack exchange，提问作者Vincent Eutin