如何实现视频鼠标悬停播放、移出暂停功能？现有代码求完善

看起来你已经搞定了鼠标悬停播放的功能，现在要补全移出暂停的逻辑对吧？我先帮你梳理下现有代码里的小问题，再给出几种完善的方案：

1. 修复纯HTML属性写法的问题 #

你现有HTML里的onmouseout="this.pause();this.currentTime=;"有个语法错误——currentTime后面没赋值。如果希望移出时暂停并回到视频开头，应该写成this.currentTime = 0;；如果只需要暂停不用重置位置，直接去掉this.currentTime=;这部分就行。

修复后的HTML代码：

<div id="vid"> 
  <video onmouseover="this.play()" onmouseout="this.pause(); this.currentTime = 0;"> 
    <source src="PISTOL.mp4">
  </video> 
</div>

如果不需要重置到开头，把this.currentTime = 0;删掉即可

2. 统一用jQuery事件监听（更优雅，避免内联事件） #

你已经引入了jQuery，不如把事件处理都移到JS里，这样代码更易维护：

<div class="video"> 
  <video> 
    <source src="PISTOL.mp4">
  </video> 
</div>

<script>
// 鼠标悬停播放
$(".video").on("mouseover", function() {
  $(this).find("video")[0].play();
});

// 鼠标移出暂停（可选重置）
$(".video").on("mouseout", function() {
  const video = $(this).find("video")[0];
  video.pause();
  video.currentTime = 0; // 不需要重置就删掉这行
});
</script>

3. 完善你原来的原生JS写法 #

你的原生JS代码写到一半截断了，补全后的版本应该是这样：

<div class="video"> 
  <video> 
    <source src="PISTOL.mp4">
  </video> 
</div>

<script>
var figure = document.querySelectorAll(".video");
var vid = document.querySelectorAll(".video video");

figure.forEach(function(item, index) {
  // 鼠标悬停播放
  item.addEventListener('mouseover', function() {
    vid[index].play();
  }, false);
  
  // 鼠标移出暂停+重置
  item.addEventListener('mouseout', function() {
    vid[index].pause();
    vid[index].currentTime = 0; // 不需要重置就删掉这行
  }, false);
});
</script>

注意点 #

• 如果你用了jQuery，尽量保持写法统一，不要混合内联事件和jQuery事件监听，避免冲突
• currentTime = 0是可选的，根据你的需求决定是否要在移出时把视频拉回开头
• 确保视频文件路径正确，否则播放功能会失效

内容的提问来源于stack exchange，提问作者N Cojoba