在 Safari 和 Mobile Chrome 上以编程方式播放带声音的视频 [英] Programmatically play video with sound on Safari and Mobile Chrome

问题描述

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

With the release of OSX High-Sierra*, one of the new features in Safari is that videos on websites will not auto play anymore and scripts can't start it either, just like on iOS. As a user, I like the feature, but as a developer it puts a problem before me: I have an in-browser HTML5 game that contains video. The videos do not get automatically played anymore unless the user changes their settings. This messes up the game flow.

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

My question is, can I somehow use the players' interaction with the game as a trigger for the video to start playing automatically, even if said activity is not directly linked to the video element?

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

I cannot use jQuery or other frameworks, because of a restraint that my employer has put on our development. The one exception is pixi.js which - among all other animations - we are also using to play our videos inside a pixi container.

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

推荐答案

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

Yes, you can bind on event that are not directly ones triggered on the video element:

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

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

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

So you can replace this button with any other splash screen requesting an user click, and you'll be granted access to play the video.

但要保持这种能力，您必须至少调用一次视频的play 方法在事件处理程序中本身.

But to keep this ability, you must call at least once the video's play method inside the event handler 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 是否仅限于这些事件，也不确定它是否包含所有这些.

Ps: here is the list of trusted events as defined by the specs, I'm not sure if Safari limits itself to these, nor if it includes all of these.

Chrome 有一个长期存在的错误导致每个主机的最大同时请求数会影响页面中的 MediaElement 播放，将它们的数量限制为 6.

Chrome has a long-standing bug caused by the maximum simultaneous requests per host which does affect MediaElement playing in the page, limiting their number to 6.

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

This means that you can not use the method above to prepare more than 6 different MediaElements in your page.

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

At least two workarounds exist though:

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

• It seems that once a MediaElement has been marked as user-approved, it will keep this state, even though you change its src. So you could prepare a maximum of MediaElements and then change their src when needed.
• The Web Audio API, while also concerned by this user-gesture requirement can play any number of audio sources once allowed. So, thanks to the decodeAudioData() method, one could load all their audio resources as AudioBuffers, and even audio resources from videos medias, which images stream could just be displayed in a muted <video> element in parallel of the AudioBuffer.

这篇关于在 Safari 和 Mobile Chrome 上以编程方式播放带声音的视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！