• Click to edit Master text styles• Second level
• Third level• Fourth level
• Fifth level
The trials of an accessible video player
• Click to edit Master text styles• Second level
• Third level• Fourth level
• Fifth level
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.
• Click to edit Master text styles• Second level
• Third level• Fourth level
• Fifth level
Who?
• Sean Norrey• Worked for 10 years at KI
as a student, teacher and multimedia developer
• Have participated in many various projects.
• Click to edit Master text styles• Second level
• Third level• Fourth level
• Fifth level
Stage 2 of the project
• Create an accessible player in HTML5• Make it easy to use
• Click to edit Master text styles• Second level
• Third level• Fourth level
• Fifth level
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
• Click to edit Master text styles• Second level
• Third level• Fourth level
• Fifth level
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
• Click to edit Master text styles• Second level
• Third level• Fourth level
• Fifth level
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.
• Click to edit Master text styles• Second level
• Third level• Fourth level
• Fifth level
Here it is
• Hopefully the WIFI works• http://www.kangan.edu.au/lrd/et
• Click to edit Master text styles• Second level
• Third level• Fourth level
• Fifth level
Great, glad the WIFI worked!
• That would have been a bit embarrassing if it didn’t
• Click to edit Master text styles• Second level
• Third level• Fourth level
• Fifth level
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>
• Click to edit Master text styles• Second level
• Third level• Fourth level
• Fifth level
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
• Click to edit Master text styles• Second level
• Third level• Fourth level
• Fifth level
Thanks for your time
• Questions• Feel free to email me any more questions you might
have later [email protected]