如何在网站HTML / CSS上放置一个背景视频循环 [英] How to put a background video loop on a website HTML/CSS
本文介绍了如何在网站HTML / CSS上放置一个背景视频循环的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想在我的网站上将视频作为背景视频。我已经研究了很多,它不工作,我不知道为什么。
I'm trying to put a video as a background video on my website. I've researched a lot and it is not working and I don't know why.
在我的html我有:
<video id="bgVideo" controls preload="true" autoplay loop muted>
<source src="../images/Home_Page.mp4" type="video/mp4" >
<source src="../images/Home_Page.ogv" type="video/ogg" >
<source src="../images/Home_Page.webm" type="video/webm" >
</video>
<script src="scripts/html5ext.js" type="text/javascript"></script>
在我的CSS我有:
body
{
background: url("../images/Home_Page.png") no-repeat fixed center;
}
video#bgVideo {
position: fixed;
right: 0;
bottom: 0;
width: auto;
min-width: 100%;
height: auto;
min-height: 100%;
z-index: -100;
background-size: cover;
}
但是,视频没有播放,背景保持白色。任何建议解决这个问题
However, the video is not playing and the background stays white. Any suggestions to solve this problem??
非常感谢你
推荐答案
p>这应该工作
<video id="bgVideo" controls preload="true" autoplay loop muted>
<source src="Home_Page.mp4" type="video/mp4" >
<source src="Home_Page.ogv" type="video/ogv" >
<source src="Home_Page.webm" type="video/webm" >
</video>
此外,您应该创建一个htaccess文件/修改您的htaccess文件,包括以下
Also you should create a htaccess file/amend your htaccess file to include the following
AddType video/mp4 .mp4 .m4v
AddType video/ogg .ogv
AddType video/webm .webm
这是一个有用的教程,这是此处
a helpful tutorial to doing this is here
这篇关于如何在网站HTML / CSS上放置一个背景视频循环的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文