Disable dragging a video seekbar in Storyline 360
Hi everyone! Just wondering if there's a way to disable the seekbar dragging functionality of an inserted video in the storyline.
Please see attached screenshot file for reference.
Thanks in advance!
Forum Discussion
Hi Darryl,
You're right; the video controls are still accessible using the keyboard. Combined with Judy's suggestion, will removing the video object from the focus order be an acceptable workaround for you? That way, clicking the Tab key won't go through the video and its controls.
Hi Eric, thanks for this. Unfortunately, the video object is needed in the focus order.
Hi Everyone! I did some JavaScript to make this work by simply adding an Execute JavaScript when the timeline starts Trigger.
These are the JS codes:
// One liner function:
const addCSS = css => document.head.appendChild(document.createElement("style")).innerHTML=css;
// Usage:
addCSS(".video-seekbar {display: none;} .modern-video-controls .video-controlbar {height: 50px !important;}")
Thank you so much, everyone!Hi Darryl, Can you guide how to use these codes. Newbie here and wanted a similar solution
The video completely skips and goes to the next section when I'm going through the course.
If you cover the video controls with a 99%-transparent shape, the user won't be able to use the controls. (That's transparent enough that it won't be visible, but it will prevent clicking the controls.)
FYI: You can hide that shape when the video is done so the user can access the controls for replaying.
Hi Judy, thanks for this but if that's the case, the seek bar is still accessible when using the keyboard (tab and arrow keys).
Hi Everyone, I just simply created an Execute JavaScript trigger when the timeline starts, copy and paste the code below to your trigger.
These are the JS codes:
// One liner function:
const addCSS = css => document.head.appendChild(document.createElement("style")).innerHTML=css;
// Usage:
addCSS(".video-seekbar {display: none;} .modern-video-controls .video-controlbar {height: 50px !important;}")@darryl, i know it's been a while but i wanted to say this solution worked for me. the alternative solution posted elsewhere of adding a transparent box didn't work for me because (1) the box doesn't stay put when you resize the screen, and (2) people using the keyboard can still activate it.
My follow-up question for you is: what would be the javascript to enable the bar again once the video is complete?
Thanks!
brenda
Hi Brenda, you can reverse it using these codes:
// One liner function:
const addCSS = css => document.head.appendChild(document.createElement("style")).innerHTML=css;
// Usage:
addCSS(".video-seekbar {display: block;} .modern-video-controls .video-controlbar {height: 37px !important;}")
It's 2:37am on a Saturday night/Sunday morning. I have been working 12-18 hours a day for a couple weeks now, 7 days/week. I have spent hours upon hours today trying to figure out this problem. Your code did EXACTLY what I needed. THANK YOU. I just wanted to say, I love you. That is all. Have a great day!!!
Hi Darryl!
Thanks for letting us know your needs for that video being included in the focus order. I wanted to pop into this discussion with a quick suggestion.
I found this discussion thread where community member Nancy shares a workaround that might be of help to you. She suggests going to Slide Properties and Player Defaults as a workaround for with the Seekbar.
Please let me know if you have any other questions. Happy to help!
Hi Luciana, thanks for sharing. I tried doing this but it doesn't work on my end, or maybe I'm doing it the wrong way? are you willing to share a story file that this workaround is working so I can replicate it in the right way? Thank you!
Hi Darryl,
There isn't a way to disable the functionality of the video control's seek bar. We recommend hiding this entirely if you would like to prevent your learners from skipping through the video.
One alternative that you can explore is to use the player's Play/Pause button to control your video instead.
This article explains how you can customize the Player for your course. I've attached a sample demo so you can see how the Player's Play/Pause button can control the video.
Let me know if you have any questions!
Hi Darryl,
I'm glad to hear that the issue is sorted out on your end; thanks for letting us know! I appreciate you sharing the JavaScript solution that worked for you. I'm sure other community members will find that helpful!
Hi Eric, thanks as well. I'm happy to share this!
The community has been asking for a native "disable seek function" in the integrated video controls for over a decade. How is this still not available? Does anyone from Articulate staff have an answer?
Hi Marcus!
Thanks for checking in on this!
I don't have any updates to share at the moment as our development team has been prioritizing other features. Not to worry! I've included you in the feature report so you can be notified as soon as we have news to share!
In the meantime, here's a deeper look at how we manage feature requests.
Nicely done Darryl! I've been looking for a good solution to this issue. Articulate Community strikes again!
Hi Darryl,
Thanks,
But I need Video control seek bar read Only.
