Scroll Magic Pinning和HTML 5视频标签

时间:2015-02-15 23:35:19

标签: jquery html5 scroll scrollmagic

我正在使用Scroll Magic JS。我的目标是使用我的HTML5视频(下面)并使用pin方法使其在背景中粘贴,同时文本滚动到它的顶部。

<video preload="auto" autoplay="autoplay" loop="loop" id="bgvid">
    <source src="../../pictures/coding.mp4" type="video/mp4">
</video>

我的Javascript:

var scene_statement = new ScrollScene({triggerElement: "#trigger5", duration: 400})
                    .setPin("#bgvid")
                    .addTo(controller);

当我不包含javascript时,视频完美运行(显然不会固定),当我在图像而不是视频上使用javascript时,固定效果非常好。

当我在视频中使用javascript时,视频仍会显示,并且它会固定,但它不会播放。有谁知道如何克服这个问题?

由于

1 个答案:

答案 0 :(得分:7)

我最近遇到了同样的问题,视频在被固定后没有播放。我已经能够通过强制视频在enter事件处理程序上再次播放来解决它。像我下面的伪代码那样可以解决问题。

.on("enter", function (event) {
    $('video').get(0).play();
 })