Forum Discussion
Solved
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 user...
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.
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.