Forum Discussion
Manual Seek bar for Videos
You can use a built-in Storyline slider to control video playback, but it's not straightforward, and there are several technical limitations. Storyline sliders are essentially built on top of native HTML <input type="range"> elements. Two-way sync is tricky. You have to write custom JavaScript to constantly synchronize the slider with the video’s current time and vice versa. While you can set min/max/step values, Storyline doesn’t give you precise control over how those values behave at runtime. Progress bar is hard to replicate. While you can link the slider to a custom shape with a number of states to visually mimic progress, it lacks precision and doesn’t scale well with longer or more complex videos.
In a nutshell, the Storyline slider is essentially an <input type="range"> under the hood, but makes precise video control difficult. A better alternative is to inject a native HTML range slider directly into your slide using JavaScript. This gives you accurate control over video seeking, responsive scrubbing, custom styling of the slider with CSS, and automatic syncing between video and slider.
To compare the two approaches, I created two working examples:
One using the Storyline slider and another using a native HTML range input. The difference in performance and flexibility is clear.
SLIDER:
HTML INPUT:
Nedim Is there any way you can drop that JavaScript code for the HTML in a reply? Or link to a sample storyline file?
I've attached a sample Storyline file. Everything is handled using JavaScript. No HTML files or web objects are involved.
There are five scripts included, some of which are experimental or optional. For example, there's a script to keep the video controls always visible. Another one is related to slider functionality, which can be removed as it didn't meet my expectations.
The two main scripts are enabled at the bottom of the list:
- The first one styles the seekbar.
- The second one enforces seekbar functionality and keeps it synchronized with the video.
The seekbar's progress fill also changes color dynamically based on the video's progress.
Thank you so much! I'm excited to try it out!