Question

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

有没有人知道一个好的插件或脚本来执行此操作，或者有人可能会遇到正确的方向。

格尔茨

Answer 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>

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

Answer 2

如果您需要脚本，可以尝试：https://github.com/sydlawrence/jquery.videoBG

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

自动播放布尔

作为背景的录影在使用在命令的网站上

2 个答案: