Question

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

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

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

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

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

但要保持此功能，您必须至少拨打一次视频的play方法在事件处理程序内部。

不工作：

＆＃13;

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

＆＃13;

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

＆＃13;

正确修复：

＆＃13;

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

＆＃13;

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

＆＃13;

Ps：here is the list of trusted events as defined by the specs，我不确定Safari是否仅限于这些，也不包括所有这些内容。

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

Chrome每个主机同时发出的最大请求数会导致long-standing bug，这会影响在页面中播放的MediaElement，将其数量限制为6个。

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

至少存在两种解决方法：

似乎一旦MediaElement被标记为用户批准的，它就会保持这种状态，即使你更改了它的src。因此，您可以准备最多的MediaElements，然后在需要时更改其src。
Web Audio API虽然也受此用户手势要求的影响，但一旦允许，就可以播放任意数量的音频源。因此，感谢decodeAudioData()方法，可以将所有音频资源加载为AudioBuffers，甚至可以加载来自视频媒体的音频资源，图像流可以只显示在静音的<video>元素中。 AudioBuffer。

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

1 个答案:

不工作：

正确修复：

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