• Click to edit Master text styles
• Second level
• Third level
• Fourth level
• Fifth level
The trials of an
accessible video
player
Acknowledgment to Country
• Click to edit Master text styles
• Second level
On behalf
of level
all present, I would like to acknowledge and
• Third
• Fourth
leveloriginal custodians of this country we
pay respects
to the
• Fifth
level the Wurundjeri peoples. I pay my
are meeting on
today,
personal respects to the existing family members of the
Wurundjeri. I also pay respects to Elders past and
present.
Who?
• Click to edit Master text styles
• Sean
Norreylevel
• Second
• Third
levelyears at KI
• Worked
for 10
• Fourth level
as a student, •teacher
and
Fifth level
multimedia developer
• Have participated in many
various projects.
Stage 2 of the project
• Click
Create
toan
editaccessible
Master text
player
styles
in HTML5
• Second
levelto use
• Make
it easy
• Third level
• Fourth level
• Fifth level
But aren’t there other options?
• There
Click toare
edit
many
Master
video
textplayers
styles
• Vimeo,
SecondYoutube,
level
Acorn, JW player
• Third level
• But all
video players fall into one of these categories:
• Fourth level
Flash based
• Fifth level
•
• Not accessible
• Partially accessible
• A lot of JavaScript used for setup
This player was designed to…
•
•
•
•
•
•
•
Work to
Click
onedit
HTML5
Master
based
text web
styles
browsers (not mobile)
• Second
Be
easy tolevel
add to a web page
• Third level
Use no •JavaScript
Fourth level to set up the player
• Fifth JavaScript
level
Use a common
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
Click
to reader
edit Master
accessible
text styles
• Second level
Keyboard
accessible (fullscreen and not)
• Third level
No keyboard
• Fourthtrap
level
Subtitles • Fifth level
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
• Click
Hopefully
to edit
theMaster
WIFI works
text styles
• Second level
• http://www.kangan.edu.au/lrd/et
• Third level
• Fourth level
• Fifth level
Great, glad the WIFI worked!
• That
Click would
to edithave
Master
been
textastyles
bit embarrassing if it didn’t
• Second level
• Third level
• Fourth level
• Fifth level
A bit of code (and jQuery)
<script
src="js/access.js"
type="text/javascript"
• Click
to edit Master
text styles
language="javascript"></script>
• Second level
<div class="accessVid" role="application" tabindex="0">
• Third level
<video width="100%" height="100%" tabindex="0"
• Fourth level
poster="images/poster-frame.jpg"
title="This video describes the
• Fifth level
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
• Click
HTML5
to is
edit
setMaster
to become
text styles
the standard in 2014 making it
easier
to embed
video
• Second
level
• Third level
• There
should be one video format that is accepted by
• Fourth level
all browsers• Fifth level
• 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
• Click
Questions
to edit Master text styles
• Second
level
• Feel
free to
email me any more questions you might
Third level
have• later
[email protected]
• Fourth level
• Fifth level