关于Safari 中禁止音视频自动播放的问题:

apple 开发者声明:https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html

苹果为了用户着想,禁止了 AutoplayJS "onload" 加载播放,也就是说即使你在html文件里使用了preloadautoplay 属性,在移动版 Safari 上,此属性会被忽视,并且不会加载视频流,甚至不会下载该视频流。除非用户物理点击一次媒体播放。

Safari 中通过 playsinline + muted 实现媒体自动播放

其实从 ios10 开始 safari 重新支持了自动播放,不过有前置条件,需要在 videoaudio 添加 muted 属性并且设置为 true(或者视频本身没有音轨),这样设置了 muted (静音)的媒体标签就符合自动播放的规则了,不过单单设置了 muted 并不能自动播放,还有另外一个关键属性,那就是 playsinline 属性,这个属性可以让我们的媒体在浏览器中不必以全屏的形式播放,众所周知,在 ios 中媒体播放默认都以全屏形式播放,加上 playsinline 即可不全屏播放媒体,nice~。

<video id="webcam" controls autoplay playsinline muted />

给 video 设置了以上属性后,那么就已经实现了视频的自动播放了,然后另一个问题就来了,现在是静音播放的状态,如何取消静音呢?可以在 window.onload() 等事件中取消 video 标签静音状态即可,即完美实现媒体自动播放。

window.onload = () => {
	document.getElementById('webcam').muted = false;
}
总结:
关于在 H5 中自动播放的问题,一直都有很大的争议,自动播放的确会带来安全性问题和一些不好的用户体验,但是在一些特殊场景中还是需要自动播放支持,例如直播流、WebRTC等等需要自动播放,后续继续收集各种 H5 中遇到的兼容问题以及API支持问题,觉得写的不错的话,点个赞吧,你的支持是我坚持的动力~~
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐