universal media player terrill thompson [email protected] @terrillthompson (ump)
TRANSCRIPT
![Page 1: Universal Media Player Terrill Thompson tft@uw.edu @terrillthompson (UMP)](https://reader030.vdocument.in/reader030/viewer/2022032705/56649db25503460f94aa1534/html5/thumbnails/1.jpg)
Universal Media Player
Terrill [email protected]
@terrillthompsonhttp://terrillthompson.com/ump
(UMP)
![Page 2: Universal Media Player Terrill Thompson tft@uw.edu @terrillthompson (UMP)](https://reader030.vdocument.in/reader030/viewer/2022032705/56649db25503460f94aa1534/html5/thumbnails/2.jpg)
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>
![Page 3: Universal Media Player Terrill Thompson tft@uw.edu @terrillthompson (UMP)](https://reader030.vdocument.in/reader030/viewer/2022032705/56649db25503460f94aa1534/html5/thumbnails/3.jpg)
Media Players Now
<audio src="myaudio.mp3" controls></audio>
![Page 4: Universal Media Player Terrill Thompson tft@uw.edu @terrillthompson (UMP)](https://reader030.vdocument.in/reader030/viewer/2022032705/56649db25503460f94aa1534/html5/thumbnails/4.jpg)
What if your browser doesn't support MP3?
<audio controls> <source src="myaudio.mp3"> <source src="myaudio.ogg"></audio>
![Page 5: Universal Media Player Terrill Thompson tft@uw.edu @terrillthompson (UMP)](https://reader030.vdocument.in/reader030/viewer/2022032705/56649db25503460f94aa1534/html5/thumbnails/5.jpg)
Your browser doesn't support HTML5 <audio>?
<audio controls> <source src="myaudio.mp3"> <source src="myaudio.ogg"> <!-- fallback content goes here --></audio>
![Page 6: Universal Media Player Terrill Thompson tft@uw.edu @terrillthompson (UMP)](https://reader030.vdocument.in/reader030/viewer/2022032705/56649db25503460f94aa1534/html5/thumbnails/6.jpg)
The Same Code Works for Video
<video controls> <source src="myvideo.mp4"> <source src="myvideo.ogv"> <!-- fallback content goes here --></video>
![Page 7: Universal Media Player Terrill Thompson tft@uw.edu @terrillthompson (UMP)](https://reader030.vdocument.in/reader030/viewer/2022032705/56649db25503460f94aa1534/html5/thumbnails/7.jpg)
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
![Page 8: Universal Media Player Terrill Thompson tft@uw.edu @terrillthompson (UMP)](https://reader030.vdocument.in/reader030/viewer/2022032705/56649db25503460f94aa1534/html5/thumbnails/8.jpg)
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
![Page 9: Universal Media Player Terrill Thompson tft@uw.edu @terrillthompson (UMP)](https://reader030.vdocument.in/reader030/viewer/2022032705/56649db25503460f94aa1534/html5/thumbnails/9.jpg)
It sort of works in Chrome and Safari
• Tab gives the player focus, but then what? • Player doesn't respond to keyboard commands
![Page 10: Universal Media Player Terrill Thompson tft@uw.edu @terrillthompson (UMP)](https://reader030.vdocument.in/reader030/viewer/2022032705/56649db25503460f94aa1534/html5/thumbnails/10.jpg)
Accessibility of the player controls are the same for audio and video
But HTML5 video has other cool features too...
![Page 11: Universal Media Player Terrill Thompson tft@uw.edu @terrillthompson (UMP)](https://reader030.vdocument.in/reader030/viewer/2022032705/56649db25503460f94aa1534/html5/thumbnails/11.jpg)
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>
![Page 12: Universal Media Player Terrill Thompson tft@uw.edu @terrillthompson (UMP)](https://reader030.vdocument.in/reader030/viewer/2022032705/56649db25503460f94aa1534/html5/thumbnails/12.jpg)
WebVTT Format
• Stands for "Web Video Text Tracks" • Based on SubRip format (*.srt)• The draft spec:
http://dev.w3.org/html5/webvtt
![Page 13: Universal Media Player Terrill Thompson tft@uw.edu @terrillthompson (UMP)](https://reader030.vdocument.in/reader030/viewer/2022032705/56649db25503460f94aa1534/html5/thumbnails/13.jpg)
WebVTT ExampleWEBVTT
00:00:09.165 --> 00:00:10.792You want these people.
00:00:10.792 --> 00:00:13.759They order your products, sign up for your services,
00:00:13.759 --> 00:00:16.627enroll in your classes, read your opinions,
00:00:16.627 --> 00:00:18.561and watch your videos.
![Page 14: Universal Media Player Terrill Thompson tft@uw.edu @terrillthompson (UMP)](https://reader030.vdocument.in/reader030/viewer/2022032705/56649db25503460f94aa1534/html5/thumbnails/14.jpg)
Internet Explorer 10+ has good support for captions + accessible controls
![Page 15: Universal Media Player Terrill Thompson tft@uw.edu @terrillthompson (UMP)](https://reader030.vdocument.in/reader030/viewer/2022032705/56649db25503460f94aa1534/html5/thumbnails/15.jpg)
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
![Page 16: Universal Media Player Terrill Thompson tft@uw.edu @terrillthompson (UMP)](https://reader030.vdocument.in/reader030/viewer/2022032705/56649db25503460f94aa1534/html5/thumbnails/16.jpg)
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>
![Page 17: Universal Media Player Terrill Thompson tft@uw.edu @terrillthompson (UMP)](https://reader030.vdocument.in/reader030/viewer/2022032705/56649db25503460f94aa1534/html5/thumbnails/17.jpg)
Another WebVTT ExampleWEBVTT
00:00:02.000 --> 00:00:06.000A blue circle has pairs of arching pairs inside.Underneath, DO-IT.
00:00:06.000 --> 00:00:16.000Words appear in a white box:World Wide Access.
00:00:37.000 --> 00:00:47.000Terrill Thompson:
![Page 18: Universal Media Player Terrill Thompson tft@uw.edu @terrillthompson (UMP)](https://reader030.vdocument.in/reader030/viewer/2022032705/56649db25503460f94aa1534/html5/thumbnails/18.jpg)
Browser Support for Description
![Page 19: Universal Media Player Terrill Thompson tft@uw.edu @terrillthompson (UMP)](https://reader030.vdocument.in/reader030/viewer/2022032705/56649db25503460f94aa1534/html5/thumbnails/19.jpg)
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...
![Page 20: Universal Media Player Terrill Thompson tft@uw.edu @terrillthompson (UMP)](https://reader030.vdocument.in/reader030/viewer/2022032705/56649db25503460f94aa1534/html5/thumbnails/20.jpg)
Resources
• UMPhttp://terrillthompson.com/ump
• My Blog http://terrillthompson.com
• These Slideshttp://staff.washington.edu/tft
• DO-IT Video http://uw.edu/doit/video