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

vshtjzan  于 2023-01-18  发布在  其他
关注(0)|答案(5)|浏览(476)

我已经将视频转换为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/
请帮我修一下,先谢了。

mpbci0fu

mpbci0fu1#

尝试这两件事..
像这样在video标签中添加playsinline属性

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

其次,对于苹果设备,你将不得不关闭低功耗模式。
然后检查...它会工作

iq0todco

iq0todco2#

如果你在React中使用它,这是非常简单的。你只需要启用它来播放内联和禁用“画中画”功能。

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

e7arh2l63#

这可能是因为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>
hpcdzsge

hpcdzsge4#

你需要根据标准使用poster属性,并且不能在移动的设备上加载视频背景。那么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属性是在视频加载时使用的,应该在移动的设备上用作背景,而不加载视频,根据移动优先的设计,不浪费访问者的数据,并在加载时间上获得好处。

**EDIT:**并尝试在Web上工作时始终使用不带空格的名称:

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

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

nimxete2

nimxete25#

你可以试试WEBM格式,希望对你有帮助!

<source src="<?php echo the_sub_field('banner_background_video_webm');?>" type="video/webm">

相关问题