視頻作爲背景在網站上播放命令

我一直在試圖設置一個視頻作爲背景，我有flv文件和youtube鏈接。把它放在我的網站上並不困難的HTML5視頻標籤或jQuery，但我無法找到我可以把它放在我的網站上，但不能自動啓動。我有一個半透明的矩形，文本將會出現。所以我的想法是創建一個按鈕或鏈接，讓文本和矩形消失，讓視頻播放。視頻作爲背景在網站上播放命令

有沒有人知道一個好的插件或腳本來做到這一點，或有人碰到正確的方向。

格爾茨

來源

2012-08-10 jochemke

你能告訴我們你有什麼了嗎？如果你正在使用'

目前我有視頻在頂部和下面，我的網站的其餘部分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示例。

來源

2012-08-10 14:54:28

謝謝，我現在正在進一步發展。並讓矩形與文本消失我應該只使用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，似乎有一個布爾參數自動播放選項...所以我猜只是將其設置爲假

自動播放布爾

來源

2012-08-10 15:00:54 Patriotec

視頻作爲背景在網站上播放命令

回答

相關問題