2015-05-08 112 views
0

首先,伟大的图书馆!真的很享受使用ScrollMagic。太棒了!让背景视频保持一个场景,直到视频播放完毕后

其次,我希望这个问题的主题是很清楚......

我想实现:

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

我也有一个HTML5视频铺设在后台。当进入场景时,这被注入场景容器(关闭自动播放)。我想要做的,毕竟我的补间完成了,背景中的视频(场景的大小)可以播放,场景仍然固定,直到完成。

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

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

我尝试采取的方向之一是在播放视频的同时延迟了很多秒的时间来添加空补间。它给出了一些固定,但如果用户保持滚动,并在播放过程中快速,他们将滚动到下一个场景,视频还没有完成...

如果任何人有任何初步的想法,那将是伟大的。我一直在试图想方设法,但找不到一个优雅的解决方案。

由于提前, 克雷格

回答

0

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

// Disable scrolling 
vodObject.play(); 

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

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