滚动魔术固定和 HTML 5 视频标签答案

【问题标题】：Scroll Magic Pinning and HTML 5 Video tag滚动魔术固定和 HTML 5 视频标签
【发布时间】：2015-02-15 23:35:19
【问题描述】：

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

谢谢

【问题讨论】：

您是否尝试过将视频封装在 <div> 中并将其固定？
是的，仍然导致视频无法播放。
您是否可以提供一个jsfiddle或codepen供我们观察和检查这种行为？

标签： jquery html scroll scrollmagic

【解决方案1】：

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

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

【讨论】：

很好，谢谢。我刚刚添加了 $('video').get(0).play();设置好场景后，一切正常。