⚠️自动播放只能静音播放
<video
style={{position:'absolute',zIndex:1}}
width='100%'
height={'auto'}
loop
muted
autoPlay
playsInline
>
<source src={'/video/home_video.mp4'} type="video/mp4"></source>
</video>
苹果为了用户着想,禁止了 Autoplay 和 JS "onload" 加载播放,也就是说即使你在html文件里使用了preload 和 autoplay 属性,在移动版 Safari 上,此属性会被忽视,并且不会加载视频流,甚至不会下载该视频流。除非用户物理点击一次媒体播放。
从 ios10 开始 safari 重新支持了自动播放,不过有前置条件,需要在
video
或audio
添加muted
属性并且设置为true
(或者视频本身没有音轨),这样设置了muted
(静音)的媒体标签就符合自动播放的规则了,不过单单设置了muted
并不能自动播放,还有另外一个关键属性,那就是playsinline
属性,这个属性可以让我们的媒体在浏览器中不必以全屏的形式播放,众所周知,在 ios 中媒体播放默认都以全屏形式播放,加上playsinline
即可不全屏播放媒体,nice~。