在 Safari 和 Mobile Chrome 上以编程方式播放有声视频

随着 OSX High-Sierra* 的发布，Safari 中的新功能之一是网站上的视频将不再自动播放，脚本也无法启动它，就像在 iOS 上一样。作为用户，我喜欢该功能，但作为开发人员，它向我提出了一个问题：我有一个包含视频的浏览器内 HTML5 游戏。除非用户更改设置，否则视频将不再自动播放。这会打乱游戏流程。

我的问题是，即使所述活动没有直接链接到视频元素，我是否可以以某种方式使用玩家与游戏的交互作为视频自动开始播放的触发器？

我不能使用 jQuery 或其他框架，因为我的雇主对我们的开发施加了限制。一个例外是 pixi.js，在所有其他动画中，我们还使用它在 pixi 容器内播放视频。

_{*The same restriction also applies on Mobile Chrome.}

是的，您可以绑定不是直接在视频元素上触发的事件：

btn.onclick = e => vid.play();

<button id="btn">play</button><br>
<video id="vid" src="https://dl.dropboxusercontent.com/s/bch2j17v6ny4ako/movie720p.mp4"></video>

因此，您可以将此按钮替换为请求用户单击的任何其他启动屏幕，并且您将被授予播放视频的访问权限。

但要保持这种能力，您必须至少在视频播放完毕后调用play method 在事件处理程序内部 itself.

不工作：

btn.onclick = e => {
  // won't work, we're not in the event handler anymore
  setTimeout(()=> vid.play().catch(console.error), 5000);
  }

<button id="btn">play</button><br>
<video id="vid" src="https://dl.dropboxusercontent.com/s/bch2j17v6ny4ako/movie720p.mp4"></video>

正确修复：

btn.onclick = e => {
  vid.play().then(()=>vid.pause()); // grants full access to the video
  setTimeout(()=> vid.play().catch(console.error), 5000);
  }

<button id="btn">play</button><br>
<video id="vid" src="https://dl.dropboxusercontent.com/s/bch2j17v6ny4ako/movie720p.mp4"></video>

Ps: 这是列表可信事件根据规范定义，我不确定 Safari 是否仅限于这些，也不确定它是否包含所有这些。

有关 Chrome 和准备多个媒体元素的重要说明

Chrome 有一个长期存在的错误由每个主机的最大同时请求数引起，这确实会影响页面中 MediaElement 的播放，将其数量限制为 6。

这意味着您不能使用上述方法在页面中准备超过 6 个不同的 MediaElement。

但至少存在两种​​解决方法：

• 似乎一旦 MediaElement 被标记为用户认可的，即使您更改其 src，它也会保持此状态。因此，您可以准备最多 MediaElements，然后在需要时更改它们的 src。
• Web Audio API，同时也关注这个用户手势要求一旦允许，可以播放任意数量的音频源。所以，感谢decodeAudioData()方法，可以将所有音频资源加载为 AudioBuffer，甚至可以加载视频媒体中的音频资源，而图像流只能以静音方式显示<video>与 AudioBuffer 并行的元素。