HTML5 video player for elearning

Designed and implemented a HTML5 video player to play mp4/h.264 formatted elearning videos in supported browsers. The player was specifically developed to work in Chrome 6+, IE9+ and Safari5+ which are among the top used browsers today. The player uses WAI-ARAI attributes which is strongly recommended by W3C for the disabled/visually impaired people. The player was tested to work with screen reader software such as Jaws.

The player was implemented for all users including visually handicapped people. The front-end of the website was developed using HTML5 and the interaction used JavaScript&jQuery heavily. Among features we implemented replay, play/pause, toggle to play the first video. We also implemented the ability for the user to smoothly move backward and forward on the video timeline as oppossed to a jerky point and click on the timeline. This was similar to your video/DVD players fast forward feature. A seek slider was implemented to show the current position of the video.

We also implemented a volume control option that allowed for instant muting as well as sliding the volume controls. A closed caption button which allows the user to see the captions in the caption bar. We implemented a .srt file parser that displays the text according to the position of the video frame being displayed.

The key element implemented was enabling shortcuts which allowed the player menu to be controlled via the user’s keyboard.

Special attention to detail was given to meet Section 508 compliance and our QA engineers ensured that guidelines were followed and implemented. We used meaningful alt attributes on all the images on the player/site/page it was hosted on. We gave each graphical element, including transparent gifs to fill in real state. The level of contrast between the elements of design was also high while considering visual appeal. We avoided and did not use iframes or java script code that contained information about the site in general. All form elements had label tags used. The HTML and CSS code was validated with w3c validator services. Each video on the site had an accompanying transcript which was available on demand. Any documents that were part of the video and made available for download had meta data with a summary of the content in the document.