The trials of an accessible video player

• 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]