我已将视频转换为 .mp4、.webm、.gov 等 3 种格式，但背景视频仍然无法在 safari 浏览器中播放
<video autoplay="" muted="" loop="" id="myVideo">
<source src="videos/2.0-Welcome-to-DISTRO_1 (1).ogv" type="video/ogv">
<source src="videos/2.0-Welcome-to-DISTRO_1 (1).webm" type="video/webm">
<source src="videos/2.0-Welcome-to-DISTRO_1 (1).mp4" type="video/mp4">
</video>
页面地址为http://gnxtsystems.com/cookie-test/
请帮我解决它。提前致谢。
【问题讨论】：
标签： html css html5-video
试试这两件事..
像这样在视频标签中添加playsinline属性
<video class="video-background" autoplay loop muted playsinline>
其次，对于苹果设备，您必须关闭低功耗模式。
然后检查...它会工作
【讨论】：
如果你在 React 中使用它是非常简单的。您只需要启用它以内联播放并禁用“画中画”功能。
<video className="background-video" loop autoPlay playsinline="true" disablePictureInPicture="true">
【讨论】：
这可能是因为 mime 类型。仅尝试 mp4 文件。由于某种原因，除非我设置了 controls="true" 标志，否则视频将无法在 iPad 上播放。 示例：这适用于我的 iPhone，但不适用于 iPad。
<video loop autoplay width='100%' height='100%' src='//some_video.mp4' type='video/mp4'></video>
现在这适用于 iPad 和 iPhone：
<video loop autoplay controls="true" width='100%' height='100%' src='//some_video.mp4' type='video/mp4'></video>
【讨论】：
您需要根据标准使用海报属性，并且不得在移动设备上加载视频背景。那么 ogv 是一种 webm 格式，所以你需要使用：
<video autoplay="" muted="" loop="" id="myVideo" poster="image.jpg">
<source src="videos/2.0-Welcome-to-DISTRO_1 (1).ogv" type="video/webm">
<source src="videos/2.0-Welcome-to-DISTRO_1 (1).mp4" type="video/mp4">
</video>
无需加载 webm，因为您将加载 ogv，并且只有在无法加载 ogv 时才会加载 mp4。 poster 属性在视频加载后使用，应在移动设备上用作背景，而不根据移动优先设计加载视频，以免浪费访问者的数据并获得加载时间的好处。
编辑： 在网络上工作时尽量使用不带空格的名称：
videos/2.0-Welcome-to-DISTRO_1 (1).ogv
should be:
videos/2.0-Welcome-to-DISTRO_1_1.ogv
这是一个您可以检查的工作示例： http://joelbonetr.com/
【讨论】：