Accessibility of videos embedded as web objects

Hi Kyle,

Storyline can select the entire web object container, but there isn't a way to force the focus inside web object, since we're relying on the hosting site for video controls.

Hopefully someone in the community has a workaround that they can share with you here!

...open it in another window, I suppose. clunky.

With a YouTube video there is talk this syntax works

http://www.youtube.com/embed/JW5meKfy3fY?autoplay=1

Where they replaced the & with a ? 

It's not a Youtube video. It's hosted on an instance of Kaltura.

Sorry I didn't see any reference in your post to where it was hosted.

All the best

Hi again, Kyle.  I did a quick search to see if I could find something helpful to autoplay Kaltura videos, but I couldn't pull anything up.

Is it worth reaching out to their support folks to see if you can add some syntax like Wendy suggested to their video embed code or URL?

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?

I'm going to chime in and ask if anyone has had any luck doing this with Vimeo videos. I can't figure out how to capture the tab like the embedded web objects from YouTube do. 

Hi Erich,

I haven't seen any other discussions about how to activate elements of the web object using the tab key, but you can also  use the "contact me" button on a ELH users' profile to reach out to them directly!

Best of luck with your project! 

Erich, what function would you like the TAB key to perform on your Vimeo video?

I would like to be able to TAB into a Vimeo video to access the Vimeo player controls (pause/play/volume).

Oh I see. You shouldn't need to use the TAB key if we can capture the proper keys in Storyline and send them through to the Vimeo API. Which keys did you want to use for pause, play, and volume?

People using a screen reader would want to use the tab key, but I could create some offscreen buttons (with alt text) that sent the commands to the API. If you could show me how to connect to this functionality via the Vimeo API, I'd really appreciate it.

I just have one thing to do and I'll get right on it.

That's awesome. Thanks, Michael. I'm messing around with the Vimeo Javascript API (https://github.com/vimeo/player.js), but I'm having a hard time getting a handle on the correct iframe.

Erich, which version of Storyline are you using?

I do already have one Vimeo demo uploaded, but it doesn't capture keypresses. http://www.andersonelearning.com/Demos/

SL 360 and I'm hoping to output to HTML5. Basically, if I could just get a Storyline button that plays the Vimeo video, I think I could build it from there.

Looking at your demo, Michael, I'm curious what code was in the HTML page you embedded (z:\working\vimeo\index.html).

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>

Erich, did you figure this out or would you still like me to look into it?

I got it working. Thanks so much for giving me the push in the right direction I needed.

Hi Erich,

Glad to hear that! Looks like your email signature came through when you replied via email! No worries, this Peek video will show you how to remove it. 

Has anyone found a workaround for this? I've also embedded a Youtube video as a web object.