背景視頻

Question

有什麼辦法放置在一個div容器中的背景視頻與視差效果呢？我正在尋找的是類似這樣的模板的內容：

Click here to see example

我已經嘗試了一些流行的插件，我發現在互聯網上，如：

BigVideo.js

YTPlayer

jquery.videoBG

但他們沒有做什麼我在尋找或者他們這樣做，但我無法弄清楚:(

謝謝大家！

Answer 1

有一個插件，不正是你所需要的位置：https://github.com/linnett/backgroundVideo

Answer 2

我首先創建HTML5視頻的div元素，然後創建視差滾動。添加HTML5視頻並將其全寬可以如此簡單：

<video id="myVideo" controls> 
    <source src="video.mp4" type="video/mp4"> 
    <source src="video.ogg" type="video/ogg"> 
    Your browser does not support the video element. 
</video> 
<script> 
    document.getElementById("myVideo").width=document.body.offsetWidth; 
</script> 

對於視差，您需要單獨實施。帶有HTML5視頻的div元素將僅僅是頁面的組件，就像任何其他圖層或內容部分一樣。

如果你需要創建視差網站一些教程，我公司創建的可用視差網站（按技術分類：jQuery的，stellar.js和skrollr.js）的列表。 http://potentpages.com/parallax-tutorials/

對HTML5視頻Mozilla的參考：https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video

Answer 3

萬一你還在尋找使用YouTube播放的解決方案。 在HTML構造函數中設置containment:'self'或containment:'#elementID'，其中#elementID是您的div，section或您希望視頻在後臺播放的視差部分的ID。

參考YTPlayer維基頁面here。

<div id="P1" class="player" 
    data-property="{videoURL:'http://youtu.be/l_tHTmd5pgk',containment:'self',startAt:50,mute:false,autoPlay:false,loop:false,opacity:.8}"> 
</div>