使用 HTML5 的全屏背景视频 [关闭]

Question

我正在尝试创建一个具有全屏背景视频的网站，因此我在 Google 上搜索了几个网站并在 StrackoverFlow 上搜索了一些帖子。最有趣的帖子是关于 http://www.html5-fullscreen-video.com 的帖子，但是我无法让它工作。

有没有人有可以成功启动桌面和平板电脑全屏背景视频的有效源代码？

干杯， 塞巴斯蒂安

Answer 1

您需要注意两件事：

1.您的视频元素必须适合孔屏 f.e.用css通过

 .videotag{
  min-width: 100%;
  min-height: 100%;
 }  
 //should work, if not add position:absolute; left: 0px; top:0px;

2.请确保您的视频标签始终在后台，并且不会覆盖任何 html 内容。你可以用 z-index 解决这个问题。较高的数字位于较低的 z-index 数字之上。

 .videotag{
   min-width: 100%;
   min-height: 100%;
   z-index: 1;
 }
 .contentToOverlayVideo{
   z-index: 5;
 }

Answer 2

查看这个非常好的教程：https://dev.opera.com/blog/everything-you-need-to-know-about-html5-video-and-audio-2/

你的视频标签应该看起来像

 <video poster="movie.jpg" controls>
   <source src='movie.webm' type='video/webm'/>
   <source src='movie.ogv' type='video/ogg'/>
   <source src='movie.mp4' type='video/mp4'/>
   <p>Your browser doesn t support html5.</p>
 </video>

海报是您的缩略图，来源是不同浏览器的不同来源。

您可以使用 .htaccess 文件在服务器上注册您的视频类型，例如：

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