by Hello, all! Time for another project post about my experiences so far!
EKU Online has been using a dated HTML5 player to feature videos in their online learning modules. I decided to help update the player and include features that would increase accessibility and meeting ADA expectations. So far, I have also made my player responsive — it doesn’t look the best, but I am formulating a design once I get the back end worked out.
For the player, I used video.js and several plugins. Here is a list of those plugins for those that are curious and would like to integrate it on their own Web sites.
- Video.js
- Video.js Youtube Plugin (Github)
- Video.js Interactive Transcript Plugin (Github)
- Video.js Skinner (Codepen)
I also used some custom JavaScript with the Interactive Transcript Plugin since it did not support keyboard tabbing or selection. Simply put, you could not navigate the transcript lines or activate them with a keyboard, which seemed a little odd to me. I fixed that, although the tabindex stuff is wiley at this point.
I am still working on putting in accessibility information so people will know that the transcript is the first thing activated on the page when tabbing. Obviously, I messed around with the CSS from all plugins, especially visually with Video.js Skinner and the Interactive Transcript. Note: Automatic, responsive scaling within Video.js does not work with the positioning in the Video.js Skinner — I ended up deleting that code since I had problems with scaling the “big play button.” I don’t see a loss with that at this point, although that is something I will experiment with in the future. Someone’s probably got that worked out. If so, I’d love to see that.
Anyway, here are the features of the player I put together:
- HTML5 Player with Flash fallback
- Interactive Transcript, activated by keyboard and mouse
- Multi-language support for transcripts
- Code is Open-Source, MIT license
- Player can use hosted video files or streaming video from YouTube
- This means that you can use a custom VTT file on your server with YouTube streaming.
- Interactive Transcript works with YouTube streaming like a charm.
The final product I have hosted on my own server for now. Click here to see an example. Take it for a spin and resize your browser window — I think I did a fair job with responsive design on that one, using columns. I think it turned out well.
At this point, the only problem is with implementation. I will have to create something to allow others to generate their own HTML pages with links, otherwise they may not be able to edit it on their own.
Thanks for reading!
