能否通过document监听页面所有视频的play事件，而非逐个绑定？

API 探路者

2026-6-21

监听页面所有视频的play事件（事件委托实现）

我想要监听页面中任意视频的play事件，但按照文档要求，监听器必须绑定到视频元素本身，直接给document绑定监听器的代码无法生效：

document.addEventListener("play", (event) => {
    // do something when some video starts playing
});

我的需求是实现事件委托，不用给每个视频单独绑定监听器，就能在任意视频播放时执行通用操作——比如自定义控件需要在视频播放/暂停时切换按钮状态。

问题原因

play（以及pause）事件属于不冒泡的事件，这类事件不会从目标元素向上传递到祖先节点，所以直接通过document.addEventListener在冒泡阶段监听是抓不到的。

解决方案

利用事件的捕获阶段来监听，给document.addEventListener传入第三个参数{ capture: true }，就能在事件向下传递到目标元素的过程中捕获到它：

document.addEventListener("play", (event) => {
  // 过滤出视频元素的事件
  if (event.target instanceof HTMLVideoElement) {
    // 这里执行你的通用操作，比如切换控件状态
    console.log("视频开始播放", event.target);
    // 示例：假设你的播放按钮类名为.video-play-btn
    // document.querySelector('.video-play-btn').classList.toggle('active');
  }
}, { capture: true });

如果需要监听暂停事件，逻辑完全一致：

document.addEventListener("pause", (event) => {
  if (event.target instanceof HTMLVideoElement) {
    console.log("视频暂停播放", event.target);
    // 切换暂停状态的控件逻辑
  }
}, { capture: true });