【问题标题】: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】:

我创建了 sandboxdeployed,但无法在 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

    【讨论】:

    • 我已经尝试过了,就像我在顶部提到的那样
    猜你喜欢
    • 2021-03-06
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-07-30
    • 2019-01-21
    • 1970-01-01
    相关资源
    最近更新 更多