Accessibility of videos embedded as web objects

Hi there.

From my testing, when I embed videos as web objects into storyline files, the controls for the video are not keyboard navigable, and I can't get it to start playing with keyboard controls. It doesn't seem to matter whether I have the video set to start automatically or when clicked. See attached, and also at https://360.articulate.com/review/content/abdf4f7a-042c-482f-b86e-a0a2a8bc6348/review.

Anyone have any solutions?

 

36 Replies
Crystal Horn

Hey Kyle!  I noticed that the space bar worked for play and pause, but only once it started playing.  I tabbed through and couldn't get a way for it to play initially using the keyboard either.

Is this a YouTube video?  I'll see if I can find out if there's anyway to add a parameter to the embed URL to make the video start without pressing play.

Michael Anderson

Kyle, you will most likely need to use the Kaltura javascript api to control your video from within Storyline. You could create triggers to capture keyboard input that would then control the video through the api. See https://corp.kaltura.com/Products/video-API and https://knowledge.kaltura.com/javascript-api-kaltura-media-players .

I have demo files on my website, showing how this is done with Vimeo, Wistia, and the VideoJS player, (http://www.andersonelearning.com/Demos/) but I haven't looked at Kaltura yet. Do you have an in-house javascript programmer that can assist you with this?

Michael Anderson

The demo just detects the end of the video, but you can use that framework to do whatever you want with the API. I need to make download links for the index files to make it a little easier for people to see the source code. You can always get it by viewing it in the published output, in the WebObjects folder. Here's the source for that one:

<iframe src="https://player.vimeo.com/video/76979871" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

<script src="https://player.vimeo.com/api/player.js"></script>
<script>
var SLplayer = parent.GetPlayer();
var iframe = document.querySelector('iframe');
var player = new Vimeo.Player(iframe);

player.on('play', function() {
SLplayer.SetVar("videoStatus","Playing video now");
});

player.on('ended', function() {
SLplayer.SetVar("videoStatus","Ended");
});

</script>