Question

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

是否有人有一个可以成功启动桌面和平板电脑全屏背景视频的工作源代码？

干杯，塞巴斯蒂安

Answer 1

检查这个非常好的教程：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

Answer 2

您需要注意两件事：

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指数数字之上。

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

带有HTML5的全屏背景视频

2 个答案: