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

Question

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

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

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

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

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

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

希望对你有帮助。

Answer 3

仅仅是对此的评论 - 我已经使用HTML5视频获得全屏背景并且它可以使用 - 但请确保使用高度:100%和宽度:自动或相反 - 以确保您保持宽高比.

至于Ipads - 你可以(显然)这样做,通过隐藏然后强制点击事件来触发,并使点击事件的功能启动Load/Play().

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