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

【问题标题】：Why doesn't <video> autoplay trigger "play" event?为什么 <video> 自动播放不触发“播放”事件？
【发布时间】：2019-01-05 15:54:44
【问题描述】：

为什么在加载页面后第一次开始播放具有自动播放功能的视频时不触发播放事件？

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

&lt;video id="vid" src="video.mp4" type="video/mp4" autoplay&gt;&lt;/video&gt;

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

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

手动按播放正常。

【问题讨论】：

你想达到什么目的？
视频开始播放时做一些事情。在 Firefox 中。
它可以工作，那么又是什么问题？ jsfiddle.net/d1sgqnfL
您在页面加载并且视频在重新加载后开始播放时收到警报？ *在火狐中jsfiddle.net/usrnm/y3gm74wz/1
是的，但请参阅此answer 以了解您需要做什么才能使其在 jsfiddle 上工作。

标签： javascript html video html5-video addeventlistener

【解决方案1】：

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

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

参见下面的 sn-p：

// 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');
// });;

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

【讨论】：

【解决方案2】：

是的，这取决于浏览器，您可以在此处获取更多信息以了解 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

【讨论】：

静音有什么帮助？顺便说一句，我在 Firefox 上。我注意到的一件事是，如果我在后台加载标签，当我切换到它并且视频自动启动时，它会触发事件，但如果标签从一开始就有焦点，它不会触发。跨度>
如果您将视频静音，那么 Chrome 将允许视频自动播放，否则您将无法让视频在 Chrome 上自动播放有声。
啊。我的问题是视频自动播放时不会触发“播放”事件。不是那个视频不会自动播放。

【解决方案3】：

它应该按照规范工作 (https://www.w3.org/TR/html53/semantics-embedded-content.html#media-elements-event-summary)：

从 Safari (12.0.2) 和 Chrome (71.0.3578.98) 在 OSX (10.12.6) 上的测试来看，它似乎确实有效：

<!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>

【讨论】：

您只是发布答案只是为了告诉他没有任何问题并且一切正常吗？ :P
@IslamElshobokshy - 好吧，我测试了该功能在两个不同的浏览器上工作，并提供了恕我直言，这是一个可以重复使用的更清晰的工作示例。如果这是您要问的，那么是的。

【解决方案4】：

您可以通过修复addEventListener参数来做到这一点。

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

&lt;video id="vid" src="https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4" autoplay&gt;&lt;/video&gt;

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

【讨论】：