自动播放视频在 iOS (Safari) 上无法播放答案

【问题标题】：autoplay video not playing on iOS (Safari) in production自动播放视频在 iOS (Safari) 上无法播放
【发布时间】：2022-01-19 18:27:57
【问题描述】：

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

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

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

【问题讨论】：

我也试过了 - medium.com/@BoltAssaults/… 还是不行
你能在codesandbox上提供最小的可重复性吗？
可以添加使用的浏览器和版本
@oldmayn 我为您创建了一个页面，请注意您是否使用 youtube 上的视频对其进行测试

标签： html ios reactjs iphone safari

【解决方案1】：

我创建了 sandbox 和 deployed，但无法在 iOS 15.2 (iPhone 12) 上重现您的问题，它会按预期自动播放和循环播放。可以补充更多细节吗？

【讨论】：

感谢沙盒，iOS 加载本地保存的视频时遇到问题。所以我最终从云端在线加载视频，此后一切正常。

【解决方案2】：

我之前的项目也有类似的需求，下面的代码运行良好，由此我们将有一个静音视频运行 in loop 和 >自动播放。

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

【讨论】：

【解决方案3】：

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

它包含playsinline 属性，并且
不存在音轨或包含muted 属性。

所以我建议你包含playsinline 属性。了解更多关于在线播放的信息here。

【讨论】：

我已经尝试过了，就像我在顶部提到的那样