你可以显示HTML5 <video>作为全屏幕背景吗?

如何将HTML5 <video>作为全屏幕背景显示到您的网站? 类似于这个Flash网站演示…

http://activeden.net/item/full-screen-video-background-template-v2/full_screen_preview/29617

使用position:fixed在video上,将其设置为100%宽度/高度,并在其上放置一个负z-index ,使其出现在所有内容之后。

如果您查看VideoJS ,则控件只是位于video顶部的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,video需要被激活,并且不喜欢其上的元素。

只是对此的评论 – 我已经使用HTML5video的全屏幕背景,它的作品 – 但请确保使用高度:100%和宽度:汽车或其他方式 – 以确保您保持高宽比。

至于iPad,你可以(显然)做到这一点,通过隐藏,然后强制点击事件触发,并有点击事件的function启动加载/播放()。

Ps – 这不应该需要任何插件,可以用最小的JS完成 – 如果你的目标是任何移动设备(我想你可能是..)远离任何这样的框架是前进的方向。

我可能有点晚回答这个问题,但这对于寻找答案的新人很有用。

上面的答案很好,但要获得完美的video背景,您必须检查宽高比,video可能会剪切,或者在调整屏幕大小或在不同的屏幕尺寸上使用屏幕时,屏幕四周变形。

我不久前进入了这个问题,我find了使用媒体查询的解决scheme。

这里是我写的如何创build一个只有CSS的全屏video背景的教程

我将在这里添加代码:

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%; } } 

希望对你有帮助。