是否可以不直接在视频上播放事件，而是在文档上播放事件？

Question

我想听任何

play

事件：https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play_event

根据文档，侦听器必须附加到视频。

以下方法不起作用：

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

因为我想在页面中开始播放任何视频时执行一些通用操作，所以我不想为每个视频附加侦听器（因此使用委托）

我需要这样做的原因是因为我有自定义控件，并且我希望能够在播放/暂停视频时更改按钮（例如切换播放/暂停），而不需要每次都让监听器监听视频本身时间

Answer 1

正如您链接的 MDN 文档提到的，

play

事件不会冒泡，因此您需要使用 capturing 事件侦听器，而不是将第三个参数传递给

addEventListener

。

document.addEventListener('play', () => {
  console.log('play');
}, true);

#video {
  max-width: 100%;
}

<video id="video" controls src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm"></video>