具有视差效果的背景视频

时间:2014-03-01 14:57:09

标签: video jquery-plugins background parallax

有没有办法将背景视频放在具有视差效果的div容器中?我正在寻找的是与此模板类似的东西:

Click here to see example

我尝试了一些我在互联网上找到的流行插件,例如:

BigVideo.js

YTPlayer

jquery.videoBG

但他们都没有做我正在寻找的事情,也许他们没有做但我无法理解:(

谢谢大家!!

3 个答案:

答案 0 :(得分:18)

有一个插件可以完全满足您的需求:https://github.com/linnett/backgroundVideo

答案 1 :(得分:9)

我首先使用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

答案 2 :(得分:1)

以防您仍在寻找使用 YTPlayer 的解决方案。 在HTML构造函数中设置containment:'self'containment:'#elementID',其中#elementID是您要在其中播放视频的divsection或视差区域的ID背景

请参阅 YTPlayer Wiki页面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>