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

Question

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

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

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

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

Answer 1

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

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>

Ps:这里是规范定义的可信事件列表,我不确定Safari是否限制自己,也不包括所有这些事件.

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

Chrome有一个长期存在的问题,即每个主机同时发出的最大请求数会影响MediaElement在页面中播放,将其数量限制为6.

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

至少存在两种​​解决方法:

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