具有视差效果的背景视频

Question

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

点击这里查看示例

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

BigVideo.js

YouTube播放器

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