Universal Media Player
(UMP)
Terrill Thompson
tft@uw.edu
@terrillthompson
http://terrillthompson.com/ump
Media Players Then
<object id="mediaPlayer1" width="180" height="50"
classid="CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95"
codebase=http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=5,1,
52,701 type="application/x-oleobject"
standby="Loading Microsoft Windows Media Player components..." >
<param name="fileName" value="take5.wmv">
<param name="animationatStart" value="true">
<param name="transparentatStart" value="true">
<param name="autoStart" value="false">
<param name="showControls" value="true">
<param name ="ShowAudioControls"value="true">
<param name="ShowStatusBar" value="true">
<param name="loop" value="false">
<embed type="application/x-mplayer2"
pluginspage="http://microsoft.com/windows/mediaplayer/en/download/"
id="mediaPlayer" name="mediaPlayer" displaysize="4" autosize="-1"
bgcolor="darkblue" showcontrols="true" showtracker="-1"
showdisplay="0" showstatusbar="-1" videoborder3d="-1" width="420" height="380"
src="take5.wmv" autostart="false" loop="false">
</embed>
</object>
Media Players Now
<audio src="myaudio.mp3" controls>
</audio>
What if your browser doesn't
support MP3?
<audio controls>
<source src="myaudio.mp3">
<source src="myaudio.ogg">
</audio>
Your browser doesn't support
HTML5 <audio>?
<audio controls>
<source src="myaudio.mp3">
<source src="myaudio.ogg">
<!-- fallback content goes here -->
</audio>
The Same Code Works for Video
<video controls>
<source src="myvideo.mp4">
<source src="myvideo.ogv">
<!-- fallback content goes here -->
</video>
The player works well in
IE9 and higher
•
•
•
•
•
Tab gives the player focus
Space toggles play/pause
Right/left arrows fast forward/rewind
Up/down arrows control volume
Controls have informative labels for screen
reader users
It sort of works in Firefox
• Tab gives the player focus
• Space and arrow keys work as they do in IE,
but not if screen reader is running
• Screen readers announce controls
– Very high precision on the progress bar
It sort of works in
Chrome and Safari
• Tab gives the player focus, but then what?
• Player doesn't respond to keyboard commands
Accessibility of the player controls
are the same for audio and video
But HTML5 video has other cool
features too...
Can't hear the audio?
<video controls>
<source src="myvideo.mp4">
<source src="myvideo.webm">
<track kind="captions" src="mycaps.vtt">
<!-- fallback content goes here -->
</video>
WebVTT Format
• Stands for "Web Video Text Tracks"
• Based on SubRip format (*.srt)
• The draft spec:
http://dev.w3.org/html5/webvtt
WebVTT Example
WEBVTT
00:00:09.165 --> 00:00:10.792
You want these people.
00:00:10.792 --> 00:00:13.759
They order your products, sign up for your services,
00:00:13.759 --> 00:00:16.627
enroll in your classes, read your opinions,
00:00:16.627 --> 00:00:18.561
and watch your videos.
Internet Explorer 10+ has good support for
captions + accessible controls
Captions in Other Browsers
• Firefox will support captions in 28.0 (current
version is 27.0.1)
• Chrome, Safari, and Opera support captions
but they all have issues:
http://terrillthompson.com/blog/366
Can't see the visual content?
<video controls>
<source src="myvideo.mp4">
<source src="myvideo.webm">
<track kind="captions" src="mycaps.vtt">
<track kind="descriptions" src="mydesc.vtt">
<!-- fallback content goes here -->
</video>
Another WebVTT Example
WEBVTT
00:00:02.000 --> 00:00:06.000
A blue circle has pairs of arching pairs inside.
Underneath, DO-IT.
00:00:06.000 --> 00:00:16.000
Words appear in a white box:
World Wide Access.
00:00:37.000 --> 00:00:47.000
Terrill Thompson:
Browser Support for Description
Summary
• Browsers have some support for accessible
HTML5 media, but it's still less than ideal
• HTML5 media has a robust API, so we can
make our own player...
Resources
• UMP
http://terrillthompson.com/ump
• My Blog
http://terrillthompson.com
• These Slides
http://staff.washington.edu/tft
• DO-IT Video
http://uw.edu/doit/video