html - 如何在网站 HTML/CSS 上放置背景视频循环

Question

我想在我的网站上放置一个视频作为背景视频。我研究了很多，但它不起作用，我也不知道为什么。

在我的 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;
}

但是，视频没有播放并且背景保持白色。有什么解决这个问题的建议吗？？

非常感谢

Answer 1

这应该可行

   <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 文件以包含以下内容

   AddType video/mp4 .mp4 .m4v
   AddType video/ogg .ogv
   AddType video/webm .webm

执行此操作的有用教程是 here