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

Question

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

我的问题是，我能否以某种方式使用玩家与游戏的互 Action 为视频自动开始播放的触发器，即使所述事件未直接链接到视频元素？

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

_{*同样的限制也适用于 Mobile Chrome。}

Answer 1

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

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 在事件处理程序中本身的方法。

不工作:

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>

附言:here is the list of trusted events as defined by the specs ，我不确定 Safari 是否仅限于这些，也不确定它是否包括所有这些。

---

关于 Chrome 和准备多个 MediaElements 的重要说明

Chrome 有一个 long-standing bug由每个主机的最大并发请求引起，这确实会影响页面中播放的 MediaElement，将它们的数量限制为 6。

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

不过至少有两种解决方法:

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