首页 / JAVASCRIPT / javascript – 以编程方式在Safari和移动Chrome上播放带声音的视频

javascript – 以编程方式在Safari和移动Chrome上播放带声音的视频

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript – 以编程方式在Safari和移动Chrome上播放带声音的视频，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2204字，纯文字阅读大概需要4分钟。

内容图文

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

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

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

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

解决方法:

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

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

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

但要保持这种能力,你必须至少在事件处理程序本身内调用一次视频播放方法.

不工作：

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并行的元素.

内容总结

以上是互联网集市为您收集整理的javascript – 以编程方式在Safari和移动Chrome上播放带声音的视频全部内容，希望文章能够帮你解决javascript – 以编程方式在Safari和移动Chrome上播放带声音的视频所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/734628.html

来源：【匿名】