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