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

只是对此进行评论 - 我使用HTML5视频作为全屏幕背景并且它可以实现 - 但请务必使用高度：100％和宽度：自动或相反 - 以确保您保持宽高比。

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

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

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

我希望你觉得它很有用。

您能否将HTML5 <video>显示为全屏背景？</video>

3 个答案: