如何用同一段JavaScript控制HTML中两个不同视频元素

云上老周

2026-6-25

解决方案

1. 调整HTML结构

给两个视频容器添加同一个类名（比如video-container），只引入一次JavaScript文件，不要重复引入多个同名JS：

<!-- 第一个视频容器 -->
<div class="video-container">
  <video src="你的视频地址1.mp4"></video>
  <span class="video-text">播放</span>
</div>

<!-- 第二个视频容器 -->
<div class="video-container">
  <video src="你的视频地址2.mp4"></video>
  <span class="video-text">播放</span>
</div>

<!-- 只引入一次JS -->
<script src="main.js"></script>

2. 修改JavaScript代码

把原来针对单个元素的逻辑，改成批量处理所有容器，每个容器独立绑定事件：

// 获取页面上所有带video-container类的容器
const allVideoContainers = document.querySelectorAll('.video-container');

// 遍历每个容器，单独绑定事件
allVideoContainers.forEach(container => {
  // 从当前容器里获取对应的视频和文本元素
  const video = container.querySelector('video');
  const textElement = container.querySelector('.video-text');

  // 鼠标悬停：播放视频+切换文本
  container.addEventListener('mouseenter', () => {
    video.play();
    textElement.textContent = '暂停';
  });

  // 鼠标离开：暂停视频+切换文本
  container.addEventListener('mouseleave', () => {
    video.pause();
    textElement.textContent = '播放';
  });
});