HTML5视频悬停播放/移出暂停仅首个视频生效问题求助

问题情况 #

页面包含7个结构一致的HTML5视频，实现了鼠标悬停播放、移出暂停的逻辑，但只有第一个视频能触发该效果，控制台无报错信息。

原JS代码 #

jQuery(document).ready(function($){
const video = document.querySelector(".video-container video");

    video.addEventListener("mouseenter", () => {
      video.play();
    });
    
        video.addEventListener("mouseleave", () => {
          video.pause();
    });
}); 

对应HTML结构 #

<div class="video-container">
    <video
          src="https://dcd.gdr.mybluehost.me/website_33a4bb40/wp-content/uploads/2025/10/cael-dadian-portfolio-iphone-beat-packs-1.mp4"
          muted="muted"
          poster="https://dcd.gdr.mybluehost.me/website_33a4bb40/wp-content/uploads/2025/10/cael-dadian-portfolio-thumbnail-iphone-beat-packs-1.jpg">
     </video>
</div>

原因分析 #

document.querySelector()方法仅会返回第一个匹配选择器的DOM元素，所以事件监听器只绑定到了页面中的第一个视频上，其余6个视频未被绑定事件，因此无法触发悬停播放/暂停的效果。

解决方案 #

需要获取所有匹配的视频元素，为每个视频单独绑定事件监听器。以下提供两种实现方式：

方式1：原生JavaScript修改版 #

jQuery(document).ready(function($){
  // 获取所有.video-container下的video元素
  const videos = document.querySelectorAll(".video-container video");
  
  // 遍历每个视频，绑定事件
  videos.forEach(video => {
    video.addEventListener("mouseenter", () => {
      video.play();
    });
    
    video.addEventListener("mouseleave", () => {
      video.pause();
    });
  });
}); 

方式2：jQuery简化版（贴合原有代码风格） #

jQuery(document).ready(function($){
  // 为所有.video-container下的video绑定事件
  $(".video-container video").on({
    mouseenter: function() {
      $(this).get(0).play();
    },
    mouseleave: function() {
      $(this).get(0).pause();
    }
  });
}); 

两种方式都会为页面中所有符合选择器的视频元素绑定事件，实现每个视频单独响应鼠标悬停/移出的播放、暂停操作。

内容的提问来源于stack exchange，提问作者Ben Stewart