Scroll Magic Pinning 和 HTML 5 个视频标签

Question

我正在使用 Scroll Magic JS。我的目标是拍摄我的 HTML5 视频（下方）并使用固定方法使其固定在背景中，同时文本在其顶部滚动。

<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 时，视频仍然出现，并且固定了，但无法播放。有谁知道如何克服这个问题？

谢谢

Answer 1

我最近运行遇到了同样的问题，视频固定后无法播放。我已经能够通过强制视频在 enter 事件处理程序上再次播放来解决这个问题。像下面我的伪代码这样的东西应该可以解决问题。

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

Scroll Magic Pinning 和 HTML 5 个视频标签

Scroll Magic Pinning and HTML 5 Video tag

html

jquery

scroll

scrollmagic