单页面多个HTML5 <video>标签控件故障问题求助

问题说明 #

在Chrome 125.0.6422.141（64位）版本中，当页面存在多个带controls属性的<video>元素时，原生视频控件会出现交互故障：点击一个视频的控件（比如“更多选项”按钮），菜单会错误地显示在另一个视频的区域内，控件响应完全不符合预期。

重现步骤 #

• 创建包含2个及以上<video>元素的简单HTML页面
• 为每个<video>标签添加controls属性
• 尝试与每个视频的控件交互（比如点击第一个视频的“更多选项”，菜单会出现在下方视频上）

示例代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Video Controls Issue</title>
</head>
<body>
<video controls width="250">
  <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" type="video/webm" />

  <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4" />

  Download the
  <a href="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm">WEBM</a>
  or
  <a href="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4">MP4</a>
  video.
</video>
<br/>
<video controls width="250">
  <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" type="video/webm" />

  <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4" />

  Download the
  <a href="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm">WEBM</a>
  or
  <a href="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4">MP4</a>
  video.
</video>
</body>
</html>

故障示意图 #

解决方法与规避方案 #

1. 降级Chrome版本 #

这个问题是Chrome 125版本的原生控件Bug，降级到124.x或更早的稳定版本可以直接解决该问题。

2. 自定义视频控件 #

放弃使用原生controls属性，自己实现一套自定义控件，完全掌控交互逻辑：

• 隐藏原生控件：可以给<video>添加controlsList="nodownload nofullscreen noremoteplayback"，或者用CSS强制隐藏：

  video::-webkit-media-controls {
    display: none !important;
  }
  

• 编写自定义控件的HTML结构（播放/暂停按钮、进度条、音量控制、菜单等）
• 通过JavaScript绑定视频API（play()、pause()、currentTime等）实现交互

简单示例：

<div class="video-wrapper">
  <video width="250" id="customVideo">
    <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm" type="video/webm" />
    <source src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" type="video/mp4" />
  </video>
  <div class="custom-controls">
    <button class="play-btn">播放</button>
    <input type="range" class="progress-bar" min="0" max="100" value="0">
  </div>
</div>

<script>
const video = document.getElementById('customVideo');
const playBtn = document.querySelector('.play-btn');
const progressBar = document.querySelector('.progress-bar');

playBtn.addEventListener('click', () => {
  if (video.paused) {
    video.play();
    playBtn.textContent = '暂停';
  } else {
    video.pause();
    playBtn.textContent = '播放';
  }
});

video.addEventListener('timeupdate', () => {
  const progress = (video.currentTime / video.duration) * 100;
  progressBar.value = progress;
});
</script>

3. 临时CSS修复（针对菜单错位） #

如果不想替换原生控件，可以给每个<video>套一个相对定位的父容器，强制控件菜单的定位上下文：

<div style="position: relative; display: inline-block;">
  <video controls width="250">
    <!-- 视频源内容 -->
  </video>
</div>

这个方法通过CSS定位规则，让原生控件的弹出菜单基于当前视频的父容器定位，避免跨视频干扰。

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