Question

我的网站中有背景视频，并且在PC上可以正常工作，但在移动设备上却无法正常工作，我尝试了一些解决方案，但无法正常工作。为什么？

此背景视频代码

<div class="parallax-background">
     <video loop="" muted="" autoplay="" poster="" >
          <source src="http://192.168.100.19/wordpress/wp-content/uploads/2018/08/iStock-521071485.mp4" type="video/mp4">
          <source src="http://192.168.100.19/wordpress/wp-content/uploads/2018/08/a5313d4aa7c96007b5f1f2cbb3bc6685.ogv" type="video/ogg">
          <source src="http://192.168.100.19/wordpress/wp-content/uploads/2018/08/68afede30f42dba3dc38d0478d92ea4d.webm" type="video/webm">
     </video>
</div>

这是我的CSS代码

.parallax-background {
bottom: 0;
left: 0;
overflow: hidden;
position: fixed;
right: 0;
top: 0;
z-index: -100;
}
parallax-background {
left: 0;
overflow: hidden;
position: fixed;
top: 0;
width: 100%;
}

Answer 1

如何在网站上手动放置视频背景（没有任何插件）？

到目前为止，我们已经了解了使用插件向网站添加背景视频的方法。但是我们也可以手动将视频设置为背景。

可以按照以下步骤将视频背景放置到他的WordPress网站上：

导航到网站的HTML文件的元素。对于拥有WordPress之类的CMS的用户，应导航至您主题的header.php文件。为视频创建一个单独的div，然后将源Src =””指定为要显示为背景的视频的网址，例如：

<div class="video">
<video loop="" muted="" autoplay="" poster="" class="fullscreen_bg">
<source src="big_buck_bunny.mp4" type="video/mp4"></source>
</video></div>

最后一步需要CSS为视频的不同属性设置包含源视频的类的背景样式。对于使用WordPress等CMS的用户，需要在样式表文件（stylesheet.css）中添加CSS代码。 CSS类似于：

.video {
bottom: 0;
left: 0;
overflow: hidden;
position: fixed;
right: 0;
top: 0;
z-index: -100;
}
video {
left: 0;
position: absolute;
top: 0;
width: 100%;
}

尝试此步骤。

Answer 2

有时候，这与代码无关，而与视频本身的“视频容器”有关。检查您要显示的视频的属性。

更多信息： https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats#Browser_compatibility

我建议制作WEBM版本并将其添加到您的视频源中：

<div class="video">
    <video loop="" muted="" autoplay="" poster="" class="fullscreen_bg">
    <source src="big_buck_bunny.mp4" type="video/mp4"></source>
    <source src="big_buck_bunny.webm" type="video/webm"></source>
</video>
</div>

WordPress视频无法在移动设备上使用

2 个答案: