视频作为背景在网站上播放命令

问题描述：

我一直在试图设置一个视频作为背景，我有flv文件和youtube链接。把它放在我的网站上并不困难的HTML5视频标签或jQuery，但我无法找到我可以把它放在我的网站上，但不能自动启动。我有一个半透明的矩形，文本将会出现。所以我的想法是创建一个按钮或链接，让文本和矩形消失，让视频播放。视频作为背景在网站上播放命令

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

格尔茨

你能告诉我们你有什么了吗？如果你正在使用'

目前我有视频在顶部和下面，我的网站的其余部分xs，我可以' t似乎把视频作为背景。 – jochemke 2012-08-10 15:08:55

答

您可以用本机浏览器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命令来设置隐藏的可见性？或者什么 – jochemke 2012-08-10 15:31:21

你可以用CSS来操作内容区域。在那里不需要jQuery。我用jQuery来设置包装（main_container）区域以防止css冲突。 – 2012-08-10 15:33:43

我现在工作得太:)现在只剩下问题了，我似乎无法增加窗口和内容的高度。 – jochemke 2012-08-10 15:46:54

答

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

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

自动播放布尔

视频作为背景在网站上播放命令

相关推荐