HTML5 视频无法在 IOS 设备上播放，但在其他任何地方都可以正常播放

Posted 2023-05-07

【中文标题】HTML5 视频无法在 IOS 设备上播放，但在其他任何地方都可以正常播放

【英文标题】：HTML5 Video not playing on IOS devices but works fine everywhere else

【发布时间】：2019-02-07 20:42:56

【问题描述】：

我正在尝试创建一个自动播放全宽和全高视频的首页。它在我的机器上运行良好（Linux [名称] 4.15.0-33-generic #36-Ubuntu SMP Wed Aug 15 16:00:05 UTC 2018 x86_64 x86_64 x86_64 GNU/Linux）在 FireFox 和 Chrome 中。在我的 iPhone 和 mac 上测试时，视频被替换为空白屏幕。

我在网上看到 ios 放弃了对视频自动播放的支持。有没有办法解决这个问题？

IOS 是否支持 WebM？

<video autoplay loop muted playsinline>
  <source src="static/video/video.webm" type="video/webm"/>
  Your browser does not support the video tag.
</video>

【问题讨论】：

不，它没有。 wiki.webmproject.org/software/webm 使用 h.264 作为后备。 html5rocks.com/en/tutorials/video/basics

【参考方案1】：

我可以通过将以下来源添加到视频标签来解决我的问题：

<video autoplay loop muted playsinline>
    <source src="devstories.webm" 
          type='video/webm;codecs="vp8, vorbis"' />
    <source src="devstories.mp4" 
          type='video/mp4;codecs="avc1.42E01E, mp4a.40.2"' />
  Your browser does not support the video tag.
</video>

【参考方案2】：

<video autoplay loop playsinline> 

请将playsinline 添加到视频标签中，对我来说效果很好

【参考方案3】：

大家都只是想我会在那里提出一个解决方案。我只是想建立一个超级简单的投资组合并将其托管在 Github 页面上。不幸的是，无法访问服务器来配置任何内容。我什么都试过了。我只需在 Vimeo 上托管视频就可以让它工作。我能够使用免费版本完成这一切。然后，您可以嵌入他们的 iframe。这在所有平台上都能完美运行，而且 vimeo 没有烦人的广告。

值得一试。

【参考方案4】：

所有浏览器的解决方案：https://***.com/a/66344245/3087186 ...

<video controls autoplay loop muted playsinline>
    <source src="https://example.com/my_video.mov" type="video/mp4">
</video>

将视频转换为 .MOV 和 2) 在同一标签中键入 =“video/mp4”。工作！