React:自动播放视频

⚠️自动播放只能静音播放

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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容