首页 文章

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

提问于
浏览 次
3

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

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

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

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

javascript html5 video safari html5-video

1 回答

  • 5

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

    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 方法 inside the event handler 本身 .

    不工作：

    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：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，甚至可以加载来自视频媒体的音频资源，图像流可以只显示在与AudioBuffer并行的静音 <video> 元素中 .

    回复于

相关问题