媒体和 Web Audio API 的自动播放指南

想让内容自动播放的最简单方法是将 autoplay 属性添加到 或 元素。并将 autoplay 属性设置为 true，当 autoplay 的属性为 true 时，媒体元素将在发生以下情况后尽快自动开始播放：

使用 autoplay 属性的 元素可能看起来像这样：

如果你依靠自动播放功能去做一些重要的事情，或者自动播放失败会以任何方式影响你的应用程序，那你可能会想知道自动播放什么时候没有开始。不幸的是，对于 autoplay 属性，识别自动播放是否成功开始是很棘手的。自动播放失败时不会触发任何事件。也没有抛出异常或可以设置回调，甚至在媒体元素上都没有标记来告诉你自动播放是否起作用。你实际能做的就是检查一些值，然后根据这些值猜测自动播放是否起作用。

如果你能够调整查看内容的方向，那么更好的方法是，依靠知道媒体播放已成功开始，而不是在媒体启动失败时知道。你可以通过侦听要在媒体元素上触发的 play 事件来轻松实现此目的。

当媒体暂停后恢复时以及发生自动播放时都会发送 play 事件。这意味着第一次触发 play 事件时，你知道你的媒体是在页面打开后第一次启动的。

考虑以下 HTML 媒体元素：

这里我们有一个 元素，它设置了 autoplay 属性，并设置了 play 事件处理器；该事件由名为 handleFirstPlay() 的函数处理，该函数接收 play 事件作为输入。

handleFirstPlay() 看起来像这样：

从 Event 对象的 target 获取对视频元素的引用后，该元素的 onplay 处理程序将设置为 null。这将阻止任何未来的播放事件被传递给处理程序。当文档位于后台标签页时，如果用户暂停并恢复视频或浏览器自动暂停和恢复视频，则可能会发生这种情况。

此时，你的网站或应用程序可以开始执行依赖于视频启动的任何操作。

备注： 此方法不区分自动播放和用户手动开始播放。