【问题标题】:HTML5 <video> element not playing in iOSHTML5 <video> 元素不在 iOS 中播放
【发布时间】:2017-10-15 22:14:42
【问题描述】:
  • 我有一个 .mp4 视频上传到 Google Cloud Storage。

  • 我正在使用&lt;video&gt; 元素在我的网站上播放它。

  • 它在桌面上加载,但 不是 iOS。 (尚未在 Android 上测试)

代码

<video muted autoplay loop playsinline>
  <source src="https://storage.googleapis.com/BUCKET/FILE.mp4" type="video/mp4">
</video>

 

在 Safari 网络检查器的 Resources 选项卡中,视频文件有错误提示:

  • “尝试加载资源时出错”

这可能是 CORS 问题吗?

值得注意的是,直接访问视频网址(使用 iOS Safari)按预期工作,所以我认为视频编码没问题。

【问题讨论】:

  • 你在使用 UIWebView 吗?
  • @MoeAbdul-Hameed 不,我正在向 iOS Safari 用户提供 .html 文件。
  • 这在 iOS Chrome 中也不起作用(使用 WKWebView)。
  • 这很奇怪!您尝试了另一个视频吗?
  • @MoeAbdul-Hameed 我尝试使用this video,但也没有用。

标签: html ios google-cloud-storage html5-video


【解决方案1】:

问题是一个否定的z-index 导致父元素被隐藏。

奇怪的是,它只在 iOS 而不是桌面浏览器上引起了问题。

【讨论】:

  • 这样的事情并不总是这样——我有一个静态网站,使用上传到 netlify 的视频标签。它适用于除桌面/移动 safari 之外的任何地方(这意味着它也适用于 ios chrome/ios ff)。在我的情况下,问题来自 netlify 的 CDN,因为我们看到了范围请求的问题,其中第一个可以,第二个失败,第三个和第四个很好。
  • @StephenTetreault 您不会认为浏览器会有所作为,因为所有 iOS 浏览器都使用相同的 Webkit 引擎。很有趣。
  • 100% 同意你@aleclarson,完全令人沮丧。我可以确认它是 netlify,并且已经将我的所有网站内容移动到 aws s3 并且没有任何问题。
  • 我顺便解决了这个问题。它与此线程中的任何内容无关。我正在使用 vuejs Nuxt 构建一个 webapp。 Nuxt 很棒,但我决定使用他们新的 PWA 模块。服务人员/html5 视频/safari 播放效果不佳。远程请求失败的问题并不特定于这个 Nuxt 模块,我还追踪了一个 angularJS github 问题线程,该线程有据可查,描述了完全相同的事情。所以未来的读者——如果你遇到这种情况,请检查你的 PWA 模块。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-04-22
  • 2023-03-24
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多