你能将HTML5 显示为全屏幕背景吗？

Question

如何将HTML5 <video>作为全屏幕背景显示到您的网站？与此类似Flash网站演示...你能将HTML5 <video>显示为全屏幕背景吗？

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

Answer 1

上的视频使用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 ，视频需要被激活，并且不喜欢它上面的元素。

Answer 2

只是一个评论 - 我已经使用HTML5视频的全屏背景，它的工作原理 - 但一定要使用高度：100％和宽度：汽车或其他方式 - 以确保你保持宽高比。

至于Ipad - 你可以（显然）做到这一点，通过隐藏然后强制点击事件触发，并具有点击事件的功能启动加载/播放（）。如果你的目标是任何移动设备（我想你可能会......）远离任何这样的框架是前进的方向。

Answer 3

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

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

我不久前进入了这个问题，我找到了使用媒体查询的解决方案。

下面是我对如何创建写了一个教程Fullscreen Video Background with only 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%; 
    } 
} 

我希望你觉得它有用。