iOS（Safari）上生产环境中自动播放的视频无法播放。

Question

我希望在我的React应用程序上添加一个循环视频。我是这样做的：

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

在移动设备和桌面电脑的Chrome/Firefox浏览器上运行良好。
但是在iPhone (Safari)浏览器上无法播放。
虽然在本地可以播放，但是当我部署它时，它就无法播放 :(

- oldmayn

---

我也尝试了这个 - https://medium.com/@BoltAssaults/autoplay-muted-html5-video-safari-ios-10-in-react-673ae50ba1f5 仍然不起作用。 - oldmayn

您能在 codesandbox 上提供一个最小可重现的例子吗？ - the Hutt

你能添加所使用的浏览器和版本吗？ - Santosh Karanam

@oldmayn，我为您制作了一个页面，您介意使用来自YouTube的视频进行测试吗？ - Ahmed amin shahin

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>

- Ravindra Bosamiya

Answer 2

这是因为根据苹果文档，只有视频同时满足以下两个条件才会自动播放：

• 包含playsinline属性
• 没有音频轨道或包含muted属性

因此，建议您添加playsinline属性。在此处了解更多关于内联播放的信息：这里。

- iudoh

---

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

Answer 3

我创建了一个沙盒并部署了它，但在iOS 15.2（iPhone 12）上无法复现您的问题，它按预期自动播放和循环。请添加更多细节。

- insetoman

---

感谢沙盒环境，我遇到了一个iOS加载本地保存的视频的问题。所以最终我从云端在线加载视频，一切都正常工作了。 - oldmayn

我正在Safari 15.6.1上尝试您的沙盒，但是我在中间看到了一个播放按钮... - Kasper Kamperman

版本15.6（17613.3.9.1.5）和播放按钮位于中间。 - user3615851