保持带有背景视频固定的场景,直到视频播放完毕

时间:2015-05-08 08:34:52

标签: jquery greensock tweenmax scrollmagic

首先,伟大的图书馆!真的很享受使用ScrollMagic。奇妙!

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

我想要实现的目标:

我有一个场景 - 在视口的全宽和高度 - 有一个针脚,持续时间和补间时间轴设置在它上面。补间工作正常,没有问题。

我还在背景中放置了一个HTML5视频。这在进入场景时被注入场景容器中(关闭自动播放)。我想做的是,在我的所有补间完成之后,播放背景中的视频(场景的大小)以及场景仍然固定直到完成。

问题是,当补间完成时,当视频正在播放时,场景会有效地完成,因此引脚会被删除,我的下一个场景会滚动到。

在我的视频完成播放之前,将场景固定在那里的最佳方法是什么?有什么我想在这里实现的例子吗?

我试图采取的一个方向是在视频播放时添加另一个空补间,延迟时间为这么多秒。它提供了一些固定,但如果用户继续滚动,并在播放期间快速,它们将滚动到下一个场景,视频还没有完成...

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

提前致谢, 克雷格

1 个答案:

答案 0 :(得分:0)

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

// Disable scrolling
vodObject.play();

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

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