Question

我在stackoverflow上找到了关于如何创建具有视差效果的视频div的答案推荐的插件是： https://github.com/linnett/backgroundVideo

然而，我在一个网站上需要多个视差背景，而我遇到了麻烦，第一个按顺序排列是正常的，但其他人是错位的，不会像你期望的那样绝对工作

这是什么解决方案？分别为每个背景调用相同的插件？我该怎么做？

这不起作用：

<script>
  $(document).ready(function() {
    $("#my-video").backgroundVideo();
    $("#my-video2").backgroundVideo();
  });
</script>

这是视频元素的HTML：

<div id="video-wrap" style="height: 300px;">
  <video id="my-video" preload="metadata" autoplay loop>
    <source src="blahblah/video/video1.mp4" type="video/mp4">
  </video>
</div>

Answer 1

好的，我想出了解决方案

您必须为要显示的每个视差视频设置不同的视频换行ID，然后在JS中指定它

HTML：

<div id="video-wrap1" class="video">
  <video id="my-video1" preload="metadata" autoplay loop>
    <source src="<?php echo get_template_directory_uri(); ?>/video/video1.mp4" type="video/mp4">
  </video>
</div>

<div id="video-wrap2" class="video">
  <video id="my-video2" preload="metadata" autoplay loop>
    <source src="<?php echo get_template_directory_uri(); ?>/video/video1.mp4" type="video/mp4">
  </video>
</div>
...

JS：

$(document).ready(function() {
$("#my-video1").backgroundVideo({$videoWrap: $('#video-wrap1')});
$("#my-video2").backgroundVideo({$videoWrap: $('#video-wrap2')});
...

作为魅力：）

Answer 2

该插件已更新为允许多个视频，请查看示例使用：https://github.com/linnett/backgroundVideo

多视差视频背景

2 个答案: