Firefox中HTML Video元素的Javascript onclick事件失效求助

我之前也碰到过类似的Firefox视频事件兼容坑，你的情况根源在于Firefox 66.0.5里，视频控件（比如播放按钮）的点击事件会被浏览器默认逻辑拦截，不会冒泡到<video>元素本身，而Chrome允许这类事件正常冒泡，所以你的inline onclick在Chrome能生效但Firefox不行。

结合你需要的「点击/启动视频时显示文本+等待视频时长加载」的需求，这里给你一个纯原生JS的解决方案：

核心思路 #

1. 放弃inline onclick，改用标准事件监听，避开浏览器的绑定差异
2. 用play事件替代单纯的click——它能覆盖所有启动视频的场景（点击播放按钮、键盘触发、JS调用播放等），确保不会遗漏触发时机
3. 监听loadedmetadata事件等待视频时长加载完成，避免显示无效的时长值

完整代码示例 #

HTML部分

<div>
  <video id="videoid" width="600" controls>
    <source src="myvideo.mp4" type="video/mp4">
    Your browser does not support HTML5 video.
  </video>
</div>
<div id="videotextbox"></div>

JavaScript部分

const video = document.getElementById('videoid');
const textBox = document.getElementById('videotextbox');
let isDurationReady = false;

// 等待视频元数据加载完成，确保能获取到有效时长
video.addEventListener('loadedmetadata', () => {
  isDurationReady = true;
  console.log('视频时长已加载:', video.duration);
});

// 处理视频启动后的逻辑（包含时长等待）
function showVideoInfo() {
  // 如果时长还没加载完成，短暂轮询等待
  if (!isDurationReady) {
    const waitForDuration = setTimeout(() => {
      if (video.duration) {
        clearTimeout(waitForDuration);
        updateTextBox();
      }
    }, 100);
    return;
  }
  updateTextBox();
}

// 更新文本框内容
function updateTextBox() {
  console.log("视频已启动");
  textBox.innerHTML = `VIDEO-INFO | 视频时长: ${video.duration.toFixed(2)} 秒`;
}

// 绑定play事件（覆盖所有播放启动场景）
video.addEventListener('play', showVideoInfo);
// 额外绑定click事件（处理点击视频非控件区域的情况）
video.addEventListener('click', showVideoInfo);

方案有效性说明 #

• play是HTML5视频的标准事件，所有支持HTML5视频的浏览器（包括Firefox 66.0.5）都能正确触发，不会被控件拦截
• loadedmetadata确保我们拿到的是真实的视频时长，避免出现NaN的无效值
• 同时绑定click事件是为了覆盖用户点击视频画面（非控件区域）的场景，确保所有交互都能触发文本显示

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