背景视频

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>