自动播放视频无法在制作中的 iOS (Safari) 上播放

Question

我想在我的反应应用程序上添加循环视频。 我就是这样做的

 <video
   ref={videoRef}
   playsInline
   autoPlay
   muted
   loop>
  <source src={Video} type='video/mp4' />
</video>

它在移动设备和桌面上的 Chrome/Firefox 上运行良好。
但它不能在iPhone（Safari）上播放。
它正在“本地”播放，但是当我“部署”它时。它没有播放:( 我与之前的项目有类似的要求，以下代码工作正常，从此我们将有一个

静音

Answer 1

循环

与自动播放。

 <video width="300px" height="500px" autoplay="autoplay" muted loop>
       <source src="https://user-images.githubusercontent.com/27606753/144578902-9b14dc56-9056-4650-942f-4d25f0ecbcc1.mp4" type="video/mp4" />
 </video>

之所以如此，是因为根据

apple 文档

Answer 2

它包含 playsinline

属性，并且

• 它没有音轨，或者它包含

  muted

  属性。

• 所以我建议您包含 

  playsinline
属性。了解有关内联播放的更多信息

此处

。

我创建了一个

沙箱

Answer 3

部署了

，但无法在iOS 15.2（iPhone 12）上重现您的问题，它会按预期自动播放和循环。可以添加更多细节吗？ 最新更新->

Answer 4

保持属性顺序如下

playsInline autoPlay muted loop

然后就可以了

视频源是本地文件还是url并不重要，属性顺序很重要，我自己也不知道原因。