视频作为网站背景？ HTML 5答案

【问题标题】：video as site background? HTML 5视频作为网站背景？ HTML 5
【发布时间】：2011-04-17 13:55:54
【问题描述】：

我想使用视频作为背景，而不是使用自动拉伸到整个屏幕（背景）的图像。

我还想旋转视频和图像.. 以便以任意顺序显示随机视频/图像。

如果知道如何延迟视频播放也很不错，这样视频只会在网站加载后 30 秒播放一次。

谢谢！

【问题讨论】：

请考虑到很多访问者会讨厌这个功能（我用 adblock 主动阻止了这个）。此外，视频可能会在两种情况下对用户造成伤害 - 在按流量计费的连接上以及在远程桌面会话中查看页面时，如果上传带宽较低，这可能会变得不可用。

标签： video html background html5-video

【解决方案1】：

看看我的 jquery videoBG 插件

http://syddev.com/jquery.videoBG/

将任何 HTML5 视频设为网站背景...为不支持 html5 的浏览器提供图像回退

非常好用

如果您需要任何帮助，请告诉我。

【讨论】：

谢谢西德劳伦斯！我从一本 HTML5 书籍（Lawson 和 Sharp）开始，然后上网......到处搜索“video background html5”并阅读了大量不完全正确的信息。您的解决方案非常有效。
@sydlawrence 太棒了！我已经实施了您的解决方案。我在集成时遇到了一个问题，那就是海报在视频加载前会闪烁一秒钟 - 如何做到这一点，以便仅在与 html5 视频不兼容的情况下才加载海报？
嗨，syd，您的插件运行良好，但在 Firefox 上似乎无法运行？这怎么可能？它在其他任何地方都有效
嘿@sydlawrence！如何默认静音？提前感谢您的帮助。

【解决方案2】：

首先，您的 HTML 标记如下所示：

<video id="awesome_video" src="first_video.mp4" autoplay />

其次，您的 JavaScript 代码将如下所示：

<script type="text/javascript">
  var index = 1,
      playlist = ['first_video.mp4', 'second_video.mp4', 'third_video.mp4'],
      video = document.getElementById('awesome_video');

  video.addEventListener('ended', rotate_video, false);

  function rotate_video() {
    video.setAttribute('src', playlist[index]);
    video.load();
    index++;
    if (index >= playlist.length) { index = 0; }
  }
</script>

最后但同样重要的是，您的 CSS：

#awesome_video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

这将在您的页面上创建一个视频元素，该元素会立即开始播放第一个视频，然后遍历由 JavaScript 变量定义的播放列表。您使用 CSS 的里程可能会因网站其余部分的 CSS 而有所不同，但 100% 的宽度/高度应该在基本页面上完成。

【讨论】：

谢谢，但全屏代码并没有真正起作用。它只是在左上角以原始大小显示视频，并使网站上的其余文本消失！
好吧，如果你想要全屏，那么网站上的其余文字显然会消失。至于全屏不起作用，请尝试将视频元素的高度和宽度设置为视口大小。例如，video.width = 1024; video.height = 768;
看看下面我的回答。它考虑了所有屏幕尺寸:)

【解决方案3】：

我可能有一个解决方案，将视频作为背景，拉伸到浏览器的宽度或高度，（但视频仍将保留纵横比，还没有找到解决方案。）：

将视频放在带有style="width:100%;" 的body-tag 之后。紧接着，放一个“bodydummy”标签：

<body>
<video id="bgVideo" autoplay poster="videos/poster.png">
    <source src="videos/test-h264-640x368-highqual-winff.mp4" type="video/mp4"/>
    <source src="videos/test-640x368-webmvp8-miro.webm" type="video/webm"/>
    <source src="videos/test-640x368-theora-miro.ogv" type="video/ogg"/>    
</video>

<img id="bgImg" src="videos/poster.png" />

<!-- This image stretches exactly to the browser width/height and lies behind the video-->

<div id="bodyDummy">

将所有内容放入bodydummy-div 中，并将z-indexes 正确放入CSS 中，如下所示：

#bgImg{ 
    position: absolute;
    top: 0;
    left: 0;
    border: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
}

#bgVideo{ 
    position: absolute;
    top: 0;
    left: 0;
    border: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
}

#bodyDummy{ 
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    overflow: auto;
    width: 100%;
    height: 100%;
}

希望我能帮上忙。让我知道您何时能找到解决方案，视频确实不保持宽高比，因此它可以填满整个浏览器窗口，因此我们不必放置 bgimage。

【讨论】：