您可以将 HTML5 <video> 显示为全屏背景吗？答案

【问题标题】：Can you display HTML5 <video> as a full screen background?您可以将 HTML5 <video> 显示为全屏背景吗？
【发布时间】：2011-04-23 10:15:19
【问题描述】：

如何将 HTML5 <video> 显示为网站的全屏背景？类似于此 Flash 站点演示...

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

【问题讨论】：

stackoverflow.com/questions/1055214/…你可以在那里签到
我已经看过那个帖子了，这似乎更关心在浏览器窗口外全屏播放视频，我正在寻找可调整大小的浏览器内视频。我认为这方面可能还有更多内容，尽管此链接看起来更有希望
我不会将此作为答案发布，因为我只有经验证据，但在 Chrome 和 Firefox (Ubuntu 10.04) 中进行的测试表明这是不可能的。然而，我很着迷于被证明是错误的。 +1 并加注星标，以防万一。

标签： html5-video

【解决方案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，因为需要激活视频，并且不喜欢上面的元素。

【讨论】：

【解决方案2】：

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

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

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

这是我写的关于如何创建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%;
  }
}

希望对你有用。

【讨论】：

这对我来说是一个很好的答案，我不知道人们会否决这个答案。投反对票的人你能解释一下为什么吗？

【解决方案3】：

对此发表评论 - 我已将 HTML5 视频用作全屏背景，效果很好 - 但请确保使用 Height:100% 和 width:auto 或其他方式 - 以确保您保持纵横比。

至于 Ipad - 你可以（显然）做到这一点，通过隐藏然后强制点击事件触发，并让点击事件的功能启动 Load/Play()。

Ps - 这不应该需要任何插件，并且可以用最少的 JS 来完成 - 如果你的目标是任何移动设备（我想你可能是......）远离任何这样的框架是前进的方向。

【讨论】：