Forum Discussion
How to prevent screen reader users from clicking directly on video & de-syncing from timeline?
I always need my eLearning videos to be in sync with the Storyline player's timeline, so that if the learner wants to pause/play the video, they must click on the Pause/Play button in the Storyline player. This makes the user experience easy to understand and ensures that any other slide elements such as text boxes animating with the timeline sync correctly with the video.
The problem is that when you directly click a video it pauses it and de-syncs it from the timeline. (The video will be paused but the slide timeline continues to play)
Up to this point, I have put a transparent rectangle over videos to prevent learners from clicking the video directly. This works for mouse users.
But users who are using the keyboard to navigate (such as screen reader users or users who can't use a mouse) can navigate to the video element, then click Enter, which will select the video directly causing it to pause/play and get out of sync with the timeline.
How can I prevent keyboard users from "clicking" (pressing Enter) directly on the video and de-syncing videos from the timeline? I don't want to mark the .mp4 video file as decorative (hidden from screen readers) because a blind colleague has told me that it's helpful to know that a video is on the slide (if I mark the .mp4 video file as decorative, the screen reader will have nothing to announce on the slide, so it will seem at first like an empty slide which would be a confusing experience).
Ideally there would be a setting that disables pause/play when users click directly on a video, but given that that's not currently a Storyline capability, please help me find an alternate solution!
Thank you AaronBurgessAU , this solved it! By setting Video Tools / Options / Play Video: Automatic and then creating a trigger that basically causes a useless action when the user clicks the video (i.e. Set state of Dummy Rectangle to Normal when the user clicks Video) this prevents direct play/pause of the video when selecting the video with the keyboard. (Demonstrated in slide 1 of the attached .story file)
Interestingly (this might be a bug in Storyline) but clicking on the video with the mouse in the above configuration still pauses/plays the video, causing it to de-sync with the timeline. To workaround this, I created a 100% transparent blocker rectangle that prevents mouse clicking on the video. This, along with Aaron's solution above, seems to be a holistic solution (Demonstrated in slide 2 of the attached .story file as the Final Solution).
9 Replies
We recommend adjusting the video properties to play by a trigger and then set a trigger to play when the timeline starts. This will keep the video playing in sync with the timeline and will prevent the video from being selected via mouse or tab. No need for the hotspot mask.
Thanks so much Ron for your swift response and guidance. I actually need to make this fix today so this is a life saver! I'll try this technique and report back how it goes.
Glad I could help. It should work with no issues. If not, let me know, share your file, or submit a support ticket because something else could be going on.
Unfortunately, I tried this, but if you click later in the slide timeline, the video does not track. So if a user paused the slide then clicked later in the timeline, the video would still play from its earlier point and it would be de-synced. Leaving the video set to "Play Video: Automatically" at least keeps the timeline and video synced (though we're still back to the original problem of screen reader users being able to pause the video). RonPrice have you run into this issue before and found a workaround?
Could the solution be
Play Video when user clicks video. This way even if a keyboard user clicks the video it just plays the video which it is already doing.
AaronBurgessAU solution - Can work. When the video is pressed it will just briefly flash, but does not pause or impact the timing. So the Video would be set to play automatically and then add a trigger to play the video when the user clicks the video.
Could the solution be
Play Video when user clicks video. This way even if a keyboard user clicks the video it just plays the video which it is already doing.
I thought it might solve the issue, but when the timeline is paused, the user can still directly click the video with the keyboard and restart it playing, de-syncing it from the timeline.
I love, though, your lateral thinking AaronBurgessAU and thanks RonPrice for contributing more details .
I've attached the following storyline file to demonstrate the issue that persists.
Slide 1: RonPrice 's original solution. Issue: pause the timeline then click towards the end of the timeline, then click play. You'll see the video continues playing from the earlier part of the video not the end (meaning it's de-synced)
Slide 2: AaronBurgessAU 's solution. Solves the issue in Slide 1, but has outstanding issue: if you pause the timeline then use the keyboard to select the video, it will start playing, de-syncing from the paused timeline.
Slide 3: I tried to combine Ron and Aaron's solution, but still has the Slide 2 issue: if you pause the timeline then use the keyboard to select the video, it will start playing, de-syncing from the paused timeline.
If there was a way to create the following two triggers, I think Aaron's solution would be perfect, but I don't think there's a condition we can add for the parts below in italics, correct?
- Pause Video 1 when the user clicks Video 1 if Video 1 is paused
- Play Video 1 when the user clicks Video 1 if Video 1 is playing
Thanks to your input, we're getting closer to a solution, but there's still a way for the screen reader user to de-sync the video from the slide. Since most users don't realize that the slide and video are two separate entities, it is a disorienting user experience (for both typical users and screen reader users) when the timeline and video de-sync and unclear to the user how to fix the issue.
Another option might be to have a layer with nothing on it,
When user click video show layer (blank). Or Set a shape to hidden that is already hidden, so clicking the video does nothing for either option.
Thank you AaronBurgessAU , this solved it! By setting Video Tools / Options / Play Video: Automatic and then creating a trigger that basically causes a useless action when the user clicks the video (i.e. Set state of Dummy Rectangle to Normal when the user clicks Video) this prevents direct play/pause of the video when selecting the video with the keyboard. (Demonstrated in slide 1 of the attached .story file)
Interestingly (this might be a bug in Storyline) but clicking on the video with the mouse in the above configuration still pauses/plays the video, causing it to de-sync with the timeline. To workaround this, I created a 100% transparent blocker rectangle that prevents mouse clicking on the video. This, along with Aaron's solution above, seems to be a holistic solution (Demonstrated in slide 2 of the attached .story file as the Final Solution).
