Question

我正在尝试创建一个首页，以自动播放全宽和全高的视频。它在FireFox和Chrome上的我的机器（Linux [名称] 4.15.0-33-通用＃36-Ubuntu SMP于8月15日16:00:05 UTC 2018 x86_64 x86_64 x86_64 GNU / Linux）上运行良好。在iPhone和Mac上进行测试时，视频将替换为黑屏。

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

WebM是否支持IOS？

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

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

Answer 2

<video autoplay loop playsinline>

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

Answer 3

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

值得一试。

Answer 4

适用于所有浏览器的解决方案：https://stackoverflow.com/a/66344245/3087186 ...

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

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

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

4 个答案: