背景视频带有视差效果

Question

有没有一种方法可以在具有视差效果的div容器中放置背景视频？我想要的是类似于这个模板的东西： 点击这里查看示例 我已经尝试了一些在互联网上找到的流行插件，例如： BigVideo.js YTPlayer jquery.videoBG 但是它们都不能做到我想要的，或者可能它们可以，但我只是想不通:（

谢谢大家！

- Nesta

Answer 1

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

- 30secondstosam

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

- David Selden-Treiman

Answer 3

如果您仍在寻找使用YTPlayer的解决方案，请在HTML构造器中设置containment：'self'或containment：'#elementID'，其中#elementID是您想要视频在背景中播放的div、section或视差部分的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>

- Zakky Akhtar