Forum Discussion
Storyline Video and base layer timeline
Hi there, I could use some help with a video setup in Storyline.
I’ve placed a video on the base layer and set it to start automatically, with built-in controls below and plays in the slide so users can freely navigate through it...watching the whole thing isn’t mandatory.
Toward the end of the video, I’ve added a thumbnail image, and over it, a transparent clickable box that lets users launch another video if they choose to.
The issue is: when users skip ahead using the video controls, the base layer timeline doesn’t follow the video’s position. As a result, the clickable box never appears, because it appears at a specific point in the timeline (nothing fancy, just comes in at that point).
Is there a way to make this work without using any code (JavaScript or HTML)? Or would it be better to remove the thumbnail section from the video and instead place a “Watch the next video” option directly on the slide?
A few important things to know. In Storyline, the slide timeline and a video’s playback are not inherently synchronized. Here’s how it works under the hood:
- Slide Timeline: Runs independently once the slide starts. Anything placed on the timeline (shapes, text, animations) follows Storyline’s internal clock.
- Video: Has its own internal playback clock.
- If the video is set to play automatically when the timeline starts, they appear to start together, but they’re not "locked" in sync.
- If you pause/resume the video (with built-in controls), the timeline keeps running, so they drift apart.
- If you scrub the video, the timeline doesn’t follow.
Your options:
- JavaScript to intercept timeupdate from the video element.
- Custom solution with a pause/play button that controls the Storyline timeline rather than the video directly. The video plays automatically, but when the timeline is paused, resumed, or scrubbed, it appears that the video is paused, played, or scrubbed at the same time. This creates the illusion that the video and timeline are perfectly synchronized, even though the video is not actually controlled by the timeline. Then you can insert a thumbnail image anywhere on the timeline to launch a new video. It will always appear at the correct position on the timeline, so when the timeline is scrubbed, it displays exactly where it’s placed. This also eliminates the need for cue points.
See the attached example.
4 Replies
Have you experimented with setting the initial state of the next video button to hidden and triggering it's state change to normal when the media completes?
Hey Ron, so there's no next button...in the video that I created I have added a thumbnail image. If the video is played without pausing or skipping there is a clear box that appears at that point via the timeline, the user can then click it (they think they are clicking the thumbnail in the video) and it will allow them to view an additional video.
The issue I'm having is that if a user skips or pauses the video it doesn't pause or skip the timeline...so if they do that, the box that should appear in the timeline at that point will not appear because technically the timeline is out of synch with the video.
I wanted to know if there was a way to synch the video and timeline so that if a user pauses/skips the video that box will still appear when it should.
I'm thinking is the video that long that the learner shouldn't just watch the whole thing then move on to the next video.
Next idea, put a button that states jump to next video on the time lien that is shown until the end. You might think about less on 1 slide. Without seeing the slide it's a little hard to see what youo are trying to accomplish.
Good luck
A few important things to know. In Storyline, the slide timeline and a video’s playback are not inherently synchronized. Here’s how it works under the hood:
- Slide Timeline: Runs independently once the slide starts. Anything placed on the timeline (shapes, text, animations) follows Storyline’s internal clock.
- Video: Has its own internal playback clock.
- If the video is set to play automatically when the timeline starts, they appear to start together, but they’re not "locked" in sync.
- If you pause/resume the video (with built-in controls), the timeline keeps running, so they drift apart.
- If you scrub the video, the timeline doesn’t follow.
Your options:
- JavaScript to intercept timeupdate from the video element.
- Custom solution with a pause/play button that controls the Storyline timeline rather than the video directly. The video plays automatically, but when the timeline is paused, resumed, or scrubbed, it appears that the video is paused, played, or scrubbed at the same time. This creates the illusion that the video and timeline are perfectly synchronized, even though the video is not actually controlled by the timeline. Then you can insert a thumbnail image anywhere on the timeline to launch a new video. It will always appear at the correct position on the timeline, so when the timeline is scrubbed, it displays exactly where it’s placed. This also eliminates the need for cue points.
See the attached example.
