1 / 15

Techniques for Creating Accessible, Closed Captioned Web-Based Video

Techniques for Creating Accessible, Closed Captioned Web-Based Video. David Klein K. “Fritz” Thompson. California State University - Northridge 21st Annual International Technology and Persons with Disabilities Conference Los Angeles, California March 22, 2006

emlyn
Download Presentation

Techniques for Creating Accessible, Closed Captioned Web-Based Video

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. Techniques for Creating Accessible, Closed Captioned Web-Based Video David Klein K. “Fritz” Thompson California State University - Northridge21st Annual International Technology and Persons with Disabilities Conference Los Angeles, California March 22, 2006 http://disability.law.uiowa.edu/lhpdc/publications/kleinpubs.html

  2. Embedding Videos into HTML • Media Player and RealPlayer better external, not embedded • QuickTime & Flash generally better embedded • Internet Explorer generally better with Flash • Use of <OBJECT> and <EMBED> tags

  3. Conventional Embedding • <OBJECT> • Object parameters • File location • <EMBED> • Embed parameters • File location • </EMBED> • </OBJECT>

  4. Embedding QuickTime <object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" width="260" height="316" codebase="http://www.apple.com/qtactivex/qtplugin.cab"> <param name="src" value="http://www.yourdomain.com/video_smil.mov"> <embed src=" http://www.yourdomain.com/video_smil.mov" width="260" height="316" pluginspage="http://www.apple.com/quicktime/download/"> </embed> </object>

  5. HTML for Media Player <a href=" http://www.yourdomain.com/video.asx"> <img src="mediaplayerimage.jpg" width="215" height="276" alt="Click here to launch Windows Media Player version in new window"> </a>

  6. Embedding Flash Video Player <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="340" height="440" id="video"> <param name="movie" value=" http://www.yourdomain.com/video.swf" /> <param name="quality" value="high" /> <param name="base" value="." /> <embed src=" http://www.yourdomain.com/video.swf" quality="high" width="340" height="440" name="video" type="application/x-shockwave-flash" base="." pluginspage="http://www.macromedia.com/go/getflashplayer" /> </object>

  7. Embedding Issues • <EMBED> tag not a standard; doesn’t validate for XHTML • <OBJECT> tag not supported the same on all browsers • Flash somewhat more accessible in Internet Explorer • Player versioning • Downloading / upgrading versions a major pain • Frequently a showstopper for many users • Earlier required versions may show garbage (or blank space) instead of error message • Flash version 7.0 minimum required

  8. Flash Embedding Alternatives • Flash Object method (uses JavaScript) to determine versions and handle errors gracefully • Avoid unacceptable use of <OBJECT> or <EMBED> tags • Uses alternative text as a default when all else fails • http://blog.deconcept.com/flashobject/

  9. Satay Method of Embedding • Eliminates the use of the <EMBED> tag • Uses only the <OBJECT> tag • Anything that a browser doesn’t understand is ignored • If Flash is not installed within a browser, a default message will be displayed • http://www.alistapart.com/articles/flashsatay/ • http://allinthehead.com/retro/234/embedding-macromedia-flash-in-xhtml • May not work with some (older) browsers and JAWS • May display two players in newer browsers

  10. Satay Method Example <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" width="100%" height="100%"> <param name="movie" value="http://domain.com/dpnc02.swf" /> <param name="base" value=" http://domain.com/" /> </object> <!--For Firefox--> <object data=" http://domain.com/dpnc02.swf" width="100%" height="100%" type="application/x-shockwave-flash"> <param name="base" value=" http://domain.com/" /> <param name="pluginurl" value="http://www.macromedia.com/go/getflashplayer" /> <p>You do not have the Flash player installed. See <a href="http://www.macromedia.com/go/getflashplayer" title="Click here to get the Flash Player"> http://www.macromedia.com/go/getflashplayer</a>.</p> </object>

  11. Future • Podcasts – See iTunes • Our Flash video player development • Customized controls (larger, more accessible) • More configuration options in external XML file • Customized formatting within captions • Speech recognition • Real-time voice recognition • Automatic time codes (real-time) • Searchable / Linkable video • Use of semantic markup (XHTML) for transcript files that can be used to produce caption files automatically

  12. Resources • WebAIM • http://www.webaim.org/techniques/captions/ • World Wide Web Consortium Web Video Standards • http://www.w3.org/AudioVideo/ • National Consortium on Accessible Media (MAGpie) • http://ncam.wgbh.org/webaccess/magpie/ • Hi Software (HiCaption) • http://www.hisoftware.com/hmcc/acc4mcc.html • Captioned Media Program • http://www.cfv.org • National Association of the Deaf • http://www.nad.org/

  13. Resources II • Video Compression • Ben Waggoner book • SMIL (QuickTime) • http://www.apple.com/quicktime/technologies/interactivity/smil.html • W3C Guidelines for SMIL • http://www.w3.org/TR/REC-smil/ (SMIL 1.0 general) • http://www.w3.org/TR/SMIL2/ (SMIL 2.1 general) • http://www.w3.org/TR/SMIL2/smil-timing.html (about synchronizing) • Windows Media Player / Metafiles • http://msdn.microsoft.com/library/default.asp?url=/library/en-us/wmplay10/mmp_sdk/asx_elementsintro.asp

  14. Resources III • Captioning • Joe Clark: http://www.joeclark.org/access/captioning/ • Creating Accessible Flash • http://at.ufl.edu/accessibility/ela/Accessible_Flash/index.html • Embedding Multimedia • Flash <OBJECT> and <EMBED> tagshttp://www.macromedia.com/go/tn_12701 • Flash Object (using JavaScript)http://blog.deconcept.com/flashobject/ • Joe Clarkhttp://www.joeclark.org/access/captioning/bpoc/embed-object.html • Flash Satay Method (may not be accessible to screen readers)http://www.macromedia.com/devnet/dreamweaver/articles/flash_satay.html

  15. Contact • Law, Health Policy & Disability Center • http://disability.law.uiowa.edu/ • LHPDC Bulletin Board (download Flash playback engine) • http://disability2.law.uiowa.edu/dbtac David Klein 280-1 Boyd Law Bldg. College of Law University of Iowa Iowa City, IA 52242 319-335-6748 david-klein@uiowa.edu K. “Fritz” Thompson 280-1 Boyd Law Bldg. College of Law University of Iowa Iowa City, IA 52242 319-335-6748 kenneth-d-thompson@uiowa.edu

More Related