保持固定背景视频的场景，直到视频播放完毕答案

【问题标题】：Keep a scene with background video pinned until after video has finished playing保持固定背景视频的场景，直到视频播放完毕
【发布时间】：2015-06-02 08:23:36
【问题描述】：

首先，很棒的图书馆！真的很享受使用 ScrollMagic。太棒了！

其次，我希望这个问题的主题足够清楚......

我想要达到的目标：

我有一个场景——在视口的全宽和全高——上面设置了一个图钉、持续时间和补间时间轴。补间工作正常，没有问题。

我还有一个 HTML5 视频放在背景中。这在进入场景时被注入到场景容器中（自动播放关闭）。我想要做的是，在所有补间完成之后，播放背景中的视频（场景的全尺寸），并且场景仍然固定直到完成。

问题是，当补间完成时，当视频播放时，场景有效地结束了，因此引脚被移除，我的下一个场景被滚动到。

在我的视频播放完毕之前，将场景固定在那里的最佳方式是什么？有什么我想在这里实现的例子吗？

我尝试采取的方向之一是在视频播放时添加另一个延迟这么多秒的空补间。它提供了一些固定，但如果用户在播放过程中继续滚动并且快速滚动，他们将滚动到视频尚未完成的下一个场景......

如果有人有任何初步想法，那就太好了。我一直在来回想办法，但找不到优雅的解决方案。

提前致谢，克雷格

【问题讨论】：

标签： jquery gsap scrollmagic

【解决方案1】：

HTML 5 视频有一个onended 事件，您可以在视频播放完毕时触发该事件。

// Disable scrolling
vodObject.play();

vidObject.onended=function(){
    // Re-enable scrolling
};

也许您可以在视频开始播放时禁用鼠标滚动，然后在视频到达onended 时使用此答案中提供的方法重新启用它：How to disable scrolling temporarily?

【讨论】：