43

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

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

4

3 回答 3

28

在视频上使用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，并且不喜欢上面的元素。

于 2010-10-17T18:20:38.203 回答
7

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

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

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

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

希望对你有帮助。

于 2016-07-14T14:34:37.313 回答
5

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

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

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

于 2011-10-10T21:19:57.027 回答