首先,很棒的库!非常喜欢使用ScrollMagic。太棒了!
其次,我希望这个问题的主题足够清楚……
我想要实现的是:
我有一个场景-在视口的全宽和全高-它上设置了大头针,持续时间和补间时间轴。补间工作正常,没有问题。
我还有一段HTML5视频放在后台。这是在进入场景(禁用自动播放)时注入到场景容器中的。我想要做的是,在我所有的青少年都完成后,在背景中的视频(全尺寸的场景)来播放,场景仍然固定,直到它完成。
问题是,当补间结束时,当视频正在播放时,场景实际上完成了,因此大头针被移除,我的下一个场景被滚动到。
在我的视频播放完成之前,保持场景固定在那里的最佳方法是什么?这里有没有我想要达到的目标的例子?
我尝试过的一个方向是在视频播放时添加另一个延迟如此之多秒的空补间。它提供了一些锁定,但如果用户继续滚动,并且在播放过程中速度很快,他们将滚动到下一个场景,而视频尚未完全完成……
如果任何人有任何初步的想法,那将是很好的。我一直在反反复复,试图想出一种方法,但没有找到一个优雅的解决方案。
先谢谢你,克雷格
发布于 2015-06-02 08:23:36
HTML5视频有一个onended事件,您可以在视频播放完成时触发该事件。
// Disable scrolling
vodObject.play();
vidObject.onended=function(){
// Re-enable scrolling
};也许您可以在视频开始播放时禁用鼠标滚动,然后在视频到达onended时使用以下答案中提供的方法重新启用它:How to disable scrolling temporarily?
https://stackoverflow.com/questions/30119340
复制相似问题