Forum Discussion
Manual Seek bar for Videos
Hi Guys.
Recently I got a requirement to give seek bar manually to videos instead of default video controls. But I tried several methods and nothing is working out.
Can anyone help me to solve this issue?
6 Replies
Hi Niyas,
Thanks for reaching out!
There's a bar included in the video controls that your learners can use to manually seek through the video.
With that being said, would you mind providing me with more information regarding your requirement and how it should differ from the built-in video control seekbar?
Hi Joe,
Thank you for your response.The problem with the built-in control panel is that only two different themes and icons will be in a default style. We must change according to our color panel, icon style, etc. I can give a slide animation to a long rectangle to show as a seek bar. But I cannot control it with that.
Is there any way to make it a custom control panel?
Try using a slider. Set it to change when released and create triggers to jump to a point in the timeline when the slider variable changes. The triggers will have a condition to jump to a certain point if the variable has a certain value.
Create triggers to change the variable value (which will change the location of the slider’s thumb) when the timeline reaches certain times.
The degree of detail depends on how many triggers you are willing to create.
Hi Niyas,
Looks like you're getting awesome help from Walt!
To address your question, there isn't a way to create a custom video control panel for videos in Storyline 360, but you're welcome to raise this as a feature request here.
I have made a manual video seekbar in articulate and you can check it here
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:
