带HTML5的全屏幕背景视频

问题描述：

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

有没有人有一个工作源代码，成功地启动桌面和平板电脑的全屏幕背景视频？

干杯，塞巴斯蒂安

任何人都多一些提示吗？ http://www.ycoyacht.com/看起来很不错，只在平板电脑上不起作用。 – Sebastian 2012-03-13 16:18:00

答

检查这真的是很好的教程：https://dev.opera.com/blog/everything-you-need-to-know-about-html5-video-and-audio-2/

您videotag应该像

<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文件喜欢你的服务器videotypes：

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

谢谢，会检查它！ – Sebastian 2012-03-14 16:04:26

欢迎您。以及未来：每个问题只能接受一个答案！如果您发现其他评论有用，您可以在点击左侧数字上方的箭头的同时上传它们。 – longilong 2012-03-15 10:31:41

答

有需要照顾的两件事情：

1.您的视频元素具有以适应孔筛F.E.通过

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

2.be肯定的，那你的视频标签总是在背景和没有按牛逼覆盖任何HTML内容的CSS。你可以用z-index来解决这个问题。更高的数字位于较低的Z指数数字之上。

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

您好，感谢您的评论，我如何需要将视频放在网站上？ YCOYacht网站使用这样的东西：

– Sebastian 2012-03-13 21:19:30

带HTML5的全屏幕背景视频

相关推荐