随着OSX High-Sierra*的发布,Safari中的新功能之一是网站上的视频将不再自动播放,脚本也无法启动,就像在iOS上一样。作为用户,我喜欢该功能,但作为开发人员,它给我带来了一个问题:我有一个内置HTML5的浏览器游戏,其中包含视频。除非用户更改设置,否则视频不再自动播放。这弄乱了游戏流程。
我的问题是,即使上述活动未直接与视频元素相关联,我能否以某种方式利用玩家与游戏的互动来触发视频自动开始播放?
由于雇主限制我们的发展,我不能使用jQuery或其他框架。pixi.js是一个例外,除其他动画外,我们还使用pixi.js在pixi容器中播放视频。
*同样的限制也适用于Mobile Chrome。
是的,您可以绑定不是直接在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方法。 *
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的播放,因此将其数量限制为6个。
这意味着您不能使用上述方法在页面中准备6个以上不同的MediaElement。
但是至少存在两种解决方法:
decodeAudioData()
<video>