Safari浏览器html5网页自动播放bgm

2022-09-17 16:17:28 浏览数 (1)

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

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

代码语言:javascript复制
<video id="audio" controls autoplay playsinline muted />

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

代码语言:javascript复制
window.onload = () => {
	document.getElementById('webcam').muted = false;
}

0 人点赞