生产中的 iOS (Safari) 无法播放自动播放视频

Question

我想在我的 react-app 上添加一个循环视频。我是这样做的

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

它在 Chrome/Firefox 移动设备和桌面设备上运行良好。
但不是在 iPhone (Safari) 上播放。
它正在本地播放，但当我部署时。它没有播放 :(

Answer 1

我创建了 sandbox and deployed 但无法在 iOS 15.2 (iPhone 12) 上重现您的问题，它会按预期自动播放和循环播放。能否添加更多详细信息？

Answer 2

我以前的项目有类似的需求，下面的代码工作正常，我们将有一个 muted 视频运行循环，自动播放。

 <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>

Answer 3

这是因为，根据 apple documentation，视频只有在以下情况下才会自动播放：

它包含 playsinline 属性，并且
它没有音轨，或者它包含 muted 属性。

所以我建议您包含 playsinline 属性。了解有关内联播放的更多信息 here。

生产中的 iOS (Safari) 无法播放自动播放视频

autoplay video not playing on iOS (Safari) in production

html

ios

reactjs

iphone

safari