1 / 20

Universal Media Player: Enhancing Accessibility for Audio and Video Content

Explore the functionalities of the Universal Media Player (UMP) developed by Terrill Thompson. This player showcases support for various media formats, including WMV, MP3, and MP4, and emphasizes accessibility features that make it compatible with screen readers and various web browsers. It illustrates how to properly utilize HTML5 media elements, such as <audio> and <video>, and highlights browser-specific support for captions and accessible controls. Discover useful examples and resources to optimize media accessibility for all users.

archer
Download Presentation

Universal Media Player: Enhancing Accessibility for Audio and Video Content

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Universal Media Player (UMP) Terrill Thompson tft@uw.edu @terrillthompson http://terrillthompson.com/ump

  2. 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>

  3. Media Players Now <audio src="myaudio.mp3" controls> </audio>

  4. What if your browser doesn't support MP3? <audio controls> <source src="myaudio.mp3"> <source src="myaudio.ogg"> </audio>

  5. Your browser doesn't support HTML5 <audio>? <audio controls> <source src="myaudio.mp3"> <source src="myaudio.ogg"> <!-- fallback content goes here --> </audio>

  6. The Same Code Works for Video <video controls> <source src="myvideo.mp4"> <source src="myvideo.ogv"> <!-- fallback content goes here --> </video>

  7. 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

  8. 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

  9. It sort of works in Chrome and Safari • Tab gives the player focus, but then what? • Player doesn't respond to keyboard commands

  10. Accessibility of the player controls are the same for audio and video But HTML5 video has other cool features too...

  11. 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>

  12. WebVTT Format • Stands for "Web Video Text Tracks" • Based on SubRip format (*.srt) • The draft spec: http://dev.w3.org/html5/webvtt

  13. 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.

  14. Internet Explorer 10+ has good support for captions + accessible controls

  15. 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

  16. 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>

  17. 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:

  18. Browser Support for Description

  19. 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...

  20. Resources • UMPhttp://terrillthompson.com/ump • My Blog http://terrillthompson.com • These Slideshttp://staff.washington.edu/tft • DO-IT Video http://uw.edu/doit/video

More Related