120 likes | 231 Views
The trials of an accessible video player. Acknowledgment to Country .
E N D
Acknowledgment to Country On behalf of all present, I would like to acknowledge and pay respects to the original custodians of this country we are meeting on today, the Wurundjeri peoples. I pay my personal respects to the existing family members of the Wurundjeri. I also pay respects to Elders past and present.
Who? • Sean Norrey • Worked for 10 years at KI as a student, teacher and multimedia developer • Have participated in many various projects.
Stage 2 of the project • Create an accessible player in HTML5 • Make it easy to use
But aren’t there other options? • There are many video players • Vimeo, Youtube, Acorn, JW player • But all video players fall into one of these categories: • Flash based • Not accessible • Partially accessible • A lot of JavaScript used for setup
This player was designed to… • Work on HTML5 based web browsers (not mobile) • Be easy to add to a web page • Use no JavaScript to set up the player • Use a common JavaScript library for support (jQuery) • Have an easy to update design (CSS not JavaScript) • Use available ARIA attributes • Comply with WCAG2. AA where technically possible
The player is quite accessible • Screen reader accessible • Keyboard accessible (fullscreen and not) • No keyboard trap • Subtitles • Audio description track • Subtitles can be changed in many ways – Font, colour, size, opacity, position. • Updated feedback on some browsers, Firefox reports ARIA information better than other browsers.
Here it is • Hopefully the WIFI works • http://www.kangan.edu.au/lrd/et
Great, glad the WIFI worked! • That would have been a bit embarrassing if it didn’t
A bit of code (and jQuery) <script src="js/access.js" type="text/javascript" language="javascript"></script> <div class="accessVid" role="application" tabindex="0"> <video width="100%" height="100%" tabindex="0" poster="images/poster-frame.jpg" title="This video describes the 3 4 5 principle." preload> <source src="video/345.mp4" type="video/mp4" /> <source src="video/345.webm" type="video/webm" /> <track src="video/subs/345.vtt" kind="subtitle" /> </video> <audio controls="controls"> <source src="video/345-ad.ogg" type="audio/ogg"> <source src="video/345-ad.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio></div>
Conclusion • HTML5 is set to become the standard in 2014 making it easier to embed video • There should be one video format that is accepted by all browsers • The track tag should and is being made available • Flash fall-back will be necessary due to MS support for XP. IE8 doesn’t support the video tag and IE9 won’t install on XP. • Saving subtitles straight to WebVTT format should be much easier • Google are doing a lot of work with subtitles in YouTube
Thanks for your time • Questions • Feel free to email me any more questions you might have later snorrey@kangan.edu.au