Question

我已将视频转换为3种格式，例如.mp4，.webm，.gov但仍无法在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/

请帮我修理一下。提前谢谢。

Answer 1

尝试这两件事。

在视频标签中添加playsinline属性

<video class="video-background" autoplay loop muted playsinline>

第二，对于苹果设备，您必须关闭低功耗模式。

然后检查...它将起作用

Answer 2

可能是因为mime类型。只试用mp4文件。由于某些原因，除非我设置控件=＆＃34; true＆＃34;否则视频不会在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>

Answer 3

您需要根据标准使用海报属性，不得在移动设备上加载视频背景。然后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。自从视频加载后使用海报属性，并且应该在移动设备上使用海报属性作为背景，而不根据移动优先设计加载视频，以免浪费访问者的数据并获得加载时间的好处。

修改在网络上工作时，尝试使用不带空格的名称：

videos/2.0-Welcome-to-DISTRO_1 (1).ogv should be: videos/2.0-Welcome-to-DISTRO_1_1.ogv

以下是您可以检查的工作示例： http://joelbonetr.com/

Answer 4

如果在React中使用它很简单。您只需要启用它以内联播放并禁用“画中画”功能即可。

<video className="background-video" loop autoPlay playsinline="true" disablePictureInPicture="true">

背景视频不在移动和桌面的Safari浏览器中播放

4 个答案: