视频作为在使用命令的网站上的背景 [英] Video as background on a website playing on command

问题描述

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

I've been trying to set a video as background, I have the flv-file and youtube-link. Putting it on my website isn't that difficult with html5 video-tag or jquery but I can't find how I can put it on my website but not auto starting. I have a semi-transparent rectangle where the text will come over. So my idea was creating a button or link to let the text and rectangle dissappear and letting the video play.

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

Does anyone knows a good plugin or script to do this or can someone bump into the right direction.

greetz

推荐答案

您可以使用原生浏览器html5视频玩家也会更快，不需要使用插件。尝试此操作：

You can do this with native browser html5 video player too which will be much faster, no need to use a plugin. Try this:

这里是工作jsFiddle示例。

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示例。

Note: Used overlay div for deactivating controls and you can use whatever content on your video, like in jsFiddle example.

这篇关于视频作为在使用命令的网站上的背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！