如何将 HTML5 显示<video>
为网站的全屏背景?类似于此 Flash 站点演示...
http://activeden.net/item/full-screen-video-background-template-v2/full_screen_preview/29617
如何将 HTML5 显示<video>
为网站的全屏背景?类似于此 Flash 站点演示...
http://activeden.net/item/full-screen-video-background-template-v2/full_screen_preview/29617
在视频上使用position:fixed
,将其设置为 100% 宽度/高度,并在其上放置负片z-index
,使其出现在所有内容的后面。
如果您查看VideoJS,控件只是位于视频顶部的 html 元素,使用 z-index 确保它们在上方。
HTML
<video id="video_background" src="video.mp4" autoplay>
(添加 webm 和 ogg 源以支持更多浏览器)
CSS
#video_background {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: -1000;
}
它适用于大多数 HTML5 浏览器,但可能不适用于需要激活视频的 iPhone/iPad,并且不喜欢上面的元素。
我回答这个问题可能有点晚了,但这对寻找这个答案的新人很有用。
上面的答案很好,但是要获得完美的视频背景,您必须检查宽高比,因为在调整屏幕大小或在不同屏幕尺寸上使用时,视频可能会剪切或周围的画布变形。
不久前我遇到了这个问题,我找到了使用媒体查询的解决方案。
这是我写的关于如何仅使用 CSS 创建全屏视频背景的教程
我也会在这里添加代码:
HTML:
<div class="videoBgWrapper">
<video loop muted autoplay poster="img/videoframe.jpg" class="videoBg">
<source src="videosfolder/video.webm" type="video/webm">
<source src="videosfolder/video.mp4" type="video/mp4">
<source src="videosfolder/video.ogv" type="video/ogg">
</video>
</div>
CSS:
.videoBgWrapper {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: -100;
}
.videoBg{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
@media (min-aspect-ratio: 16/9) {
.videoBg{
width: 100%;
height: auto;
}
}
@media (max-aspect-ratio: 16/9) {
.videoBg {
width: auto;
height: 100%;
}
}
希望对你有帮助。
只是对此的评论-我已将 HTML5 视频用作全屏背景,并且效果很好-但请确保使用 Height:100% 和 width:auto 或其他方式-以确保保持纵横比.
至于Ipads - 你可以(显然)这样做,通过隐藏然后强制点击事件触发,并让点击事件的功能启动加载/播放()。
Ps - 这不应该需要任何插件,并且可以用最少的 JS 来完成 - 如果你的目标是任何移动设备(我想你可能是......)远离任何这样的框架是前进的方向。