Question

为什么在加载页面后首次开始自动播放的视频时不会触发播放事件？

document.getElementById("vid").addEventListener('play', function, false);

<video id="vid" src="video.mp4" type="video/mp4" autoplay></video>

它应该触发我认为的播放事件，但不会。

这是设计使然吗？如果是这样，为什么？

手动按播放正常工作。

Answer 1

是的，这取决于浏览器，例如，您可以在此处获取更多信息来了解Chrome的工作方式： https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

您可以尝试使用Chrome浏览器将属性为muted的视频静音，然后让用户取消静音：

<video id="vid" src="video.mp4" type="video/mp4" autoplay muted></video>

<script>
document.getElementById("vid").addEventListener('play', function, false);
</script>

在此处查看实际操作：https://codepen.io/anon/pen/pqLxZV?editors=1011

Answer 2

它应该根据规范（https://www.w3.org/TR/html53/semantics-embedded-content.html#media-elements-event-summary）工作：

在OSX（10.12.6）上的Safari（12.0.2）和Chrome（71.0.3578.98）上的测试中，它确实可以正常工作：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Simple Video Test</title>
</head>

<body>
  <h1>Video Test</h1>
  <video id="theVideo" autoplay loop muted playsinline>
    <source src="https://media.w3.org/2010/05/sintel/trailer.mp4">
  </video>
</body>

<script>
var vid = document.getElementById("theVideo");
vid.onplay = function() {
    alert("Starting to play video");
};
</script>

</html>

Answer 3

您可以通过固定addEventListener参数以以下方式进行操作。

document.getElementById("vid").addEventListener('play', function(){alert("test")});

<video id="vid" src="https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4" autoplay></video>

JSFiddle：https://jsfiddle.net/usrnm/y3gm74wz/1/

Answer 4

对于未来的用户，这可能是由视频开始自动播放和添加事件处理程序之间的竞争条件引起的。

如果在视频开始播放后添加处理程序，则不会触发播放事件。当在页面底部添加脚本并且上面的视频元素设置为自动播放时，就会发生这种情况。

请看下面的片段：

// add the handler after 500ms which assumes the video is already playing
setTimeout(() => {
  document.querySelector('#vid').addEventListener('play', (e) => {
    console.info('playing');
  });;
}, 500);

// this will fire as expected
// document.querySelector('#vid').addEventListener('play', (e) => {
//  console.info('playing');
// });;

<video height="100px" id="vid" src="https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4" autoplay controls></video>

为什么<video>自动播放不会触发“播放”事件？

4 个答案: