视频作为根据命令播放的网站的背景答案

【问题标题】：Video as background on a website playing on command视频作为根据命令播放的网站的背景
【发布时间】：2012-08-10 14:36:36
【问题描述】：

我一直在尝试将视频设置为背景，我有 flv 文件和 youtube 链接。使用 html5 视频标签或 jquery 将它放在我的网站上并不难，但我找不到如何将它放在我的网站上但不能自动启动。我有一个半透明的矩形，文本将在其中出现。所以我的想法是创建一个按钮或链接，让文本和矩形消失并让视频播放。

有没有人知道一个好的插件或脚本来做到这一点，或者有人能找到正确的方向。

问候

【问题讨论】：

你能告诉我们你已经得到了什么吗？如果您使用的是<video> 标签，那么它不应该自动播放您的视频，除非您使用autoplay 属性...
目前我的视频位于网站其他部分的顶部和下方，我似乎无法将视频作为背景。

标签： javascript jquery css jquery-plugins html5-video

【解决方案1】：

您也可以使用本机浏览器 html5 视频播放器来执行此操作，这会更快，无需使用插件。试试这个：

Here is working jsFiddle example.

jQuery:

$(document).ready(function() {
    var windowH =  $(window).height();
    $('#main_container, #overlay').height(windowH);
    $(window).resize(function () {
        var windowH =  $(window).height();
        $('#main_container, #overlay').height(windowH);
    });
});

css:

body { background-color: #000000; font-family: Arial; font-size: 12px;
       color: #000; margin: 0; padding: 0; overflow: hidden; }
#main_container { float: left; position: relative; width: 100%; height: 100%; 
                  background-color: #000000; }
#video { position: absolute; left: 0px; top: 0px; min-height: 100%;
         min-width: 100%; z-index: 9997; }
#overlay { position: absolute; left: 0px; top: 0px; height: 100%; width: 100%;
           z-index: 9998; }

html:

<div id="main_container">
<div id="overlay"></div>
<video id="video" width="" height="" controls="controls" loop="loop" autoplay="">
 <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
 <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg" />
  Your browser does not support the video tag.
</video>
</div>

注意：使用覆盖 div 来停用控件，您可以使用视频中的任何内容，例如 jsFiddle 示例。

【讨论】：

谢谢，我现在走得更远了。让带有文本的矩形消失我应该只使用 jquery/js 命令将可见性设置为隐藏吗？什么的
您可以使用 CSS 操作内容区域。那里不需要jQuery。我使用 jQuery 设置包装器的（main_container's）区域以防止 css 冲突。
我现在也搞定了 :)，我唯一剩下的问题是我似乎无法增加窗口和内容的高度。
您可以从变化中更改该值。例如： var windowH = $(window).height() +10;
它没有给出我想要的结果。我想增加内容部分的高度并将视频保持在同一位置。如下图所示，框在页面下方继续，但我无法获得滚动条或增加高度imageshack.us/photo/my-images/853/94047586.png

【解决方案2】：

如果你想要一个脚本，你可以试试：https://github.com/sydlawrence/jquery.videoBG

在此处的文档中：http://syddev.com/jquery.videoBG/index.html#documentation，似乎有一个带有布尔参数的自动播放选项...所以我猜只是将其设置为 false

自动播放布尔

【讨论】：