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

Question

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

我的问题是，即使上述活动未直接与视频元素相关联，我能否以某种方式利用玩家与游戏的互动来触发视频自动开始播放？

由于雇主限制我们的发展，我不能使用jQuery或其他框架。pixi.js是一个例外，除其他动画外，我们还使用pixi.js在pixi容器中播放视频。

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

Answer 1

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

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>

附言：这是规范定义的 受信任事件
的列表
，我不确定Safari是否将自身限制为这些事件，也不确定它是否包括所有这些事件。

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

Chrome浏览器存在一个[长期存在的错误是由每台主机的最大同时请求数引起的，但确实会影响页面中MediaElement的播放，因此将其数量限制为6个。

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

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

• 看起来，一旦MediaElement被标记为 用户批准 ，即使您更改其src，它也将保持此状态。因此，您可以准备最多MediaElement，然后在需要时更改其src。
• 该 用户手势要求 也涉及Web音频API，一旦允许，它可以播放任意数量的音频源。因此，decodeAudioData()借助该方法，可以将其所有音频资源加载为AudioBuffer，甚至可以从视频媒体加载音频资源，这些图像流可以仅<video>在与AudioBuffer并行的静音元素中显示。