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.
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 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!
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.
Hi Joe, thank you so much for this one. Yup this works but the problem is we do need the video controls that's why I can't do the one that you are suggesting.
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!
Since this discussion is a bit older, Darryl may no longer be subscribed. If you want to reach out to him directly about the Javascript solution he shared, you can do so by clicking on his name and using the 'contact me' button.
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?
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!
@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?
19 Replies
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 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 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 Joe, thank you so much for this one. Yup this works but the problem is we do need the video controls that's why I can't do the one that you are suggesting.
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,
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!
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.
Hi Sandeep!
Since this discussion is a bit older, Darryl may no longer be subscribed. If you want to reach out to him directly about the Javascript solution he shared, you can do so by clicking on his name and using the 'contact me' button.
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;}")
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!
@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