Presentation is loading. Please wait.

Presentation is loading. Please wait.

Techniques for Creating Accessible, Closed Captioned Web-Based Video California State University - Northridge 21st Annual International Technology and.

Similar presentations


Presentation on theme: "Techniques for Creating Accessible, Closed Captioned Web-Based Video California State University - Northridge 21st Annual International Technology and."— Presentation transcript:

1 Techniques for Creating Accessible, Closed Captioned Web-Based Video California State University - Northridge 21st Annual International Technology and Persons with Disabilities Conference Los Angeles, California March 22, 2007 http://disability.law.uiowa.edu/lhpdc/publications/kleinpubs.html David Klein K. “Fritz” Thompson

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 and tags

3 Conventional Embedding    Object parameters  File location    Embed parameters  File location    

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>

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" /> <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  tag not a standard; doesn’t validate for XHTML  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 or tags  Uses alternative text as a default when all else fails  http://blog.deconcept.com/flashobject/ http://blog.deconcept.com/flashobject/

9 Satay Method of Embedding  Eliminates the use of the tag  Uses only the 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://www.alistapart.com/articles/flashsatay/  http://allinthehead.com/retro/234/embedding- macromedia-flash-in-xhtml http://allinthehead.com/retro/234/embedding- macromedia-flash-in-xhtml 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 You do not have the Flash player installed. See http://www.macromedia.com/go/getflashplayer. You do not have the Flash player installed. See http://www.macromedia.com/go/getflashplayer. </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/ http://www.webaim.org/techniques/captions/  World Wide Web Consortium Web Video Standards  http://www.w3.org/AudioVideo/ http://www.w3.org/AudioVideo/  National Consortium on Accessible Media (MAGpie)  http://ncam.wgbh.org/webaccess/magpie/ http://ncam.wgbh.org/webaccess/magpie/  Hi Software (HiCaption)  http://www.hisoftware.com/hmcc/acc4mcc.html http://www.hisoftware.com/hmcc/acc4mcc.html  Captioned Media Program  http://www.cfv.org http://www.cfv.org  National Association of the Deaf  http://www.nad.org/ http://www.nad.org/

13 Resources II  Video Compression  Ben Waggoner book  SMIL (QuickTime)  http://www.apple.com/quicktime/technologies/interactivity/smil.html 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/REC-smil/  http://www.w3.org/TR/SMIL2/ (SMIL 2.1 general) http://www.w3.org/TR/SMIL2/  http://www.w3.org/TR/SMIL2/smil-timing.html (about synchronizing) http://www.w3.org/TR/SMIL2/smil-timing.html  Windows Media Player / Metafiles  http://msdn.microsoft.com/library/default.asp?url=/library/en- us/wmplay10/mmp_sdk/asx_elementsintro.asp http://msdn.microsoft.com/library/default.asp?url=/library/en- us/wmplay10/mmp_sdk/asx_elementsintro.asp 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/ http://www.joeclark.org/access/captioning/  Creating Accessible Flash  http://at.ufl.edu/accessibility/ela/Accessible_Flash/index.html http://at.ufl.edu/accessibility/ela/Accessible_Flash/index.html  Embedding Multimedia  Flash and tags http://www.macromedia.com/go/tn_12701 http://www.macromedia.com/go/tn_12701  Flash Object (using JavaScript) http://blog.deconcept.com/flashobject/ http://blog.deconcept.com/flashobject/  Joe Clark http://www.joeclark.org/access/captioning/bpoc/embed-object.html http://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 http://www.macromedia.com/devnet/dreamweaver/articles/flash_satay. html http://www.macromedia.com/devnet/dreamweaver/articles/flash_satay. html

15 Contact  Law, Health Policy & Disability Center  http://disability.law.uiowa.edu/ http://disability.law.uiowa.edu/  LHPDC Bulletin Board (download Flash playback engine)  http://disability2.law.uiowa.edu/dbtac 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


Download ppt "Techniques for Creating Accessible, Closed Captioned Web-Based Video California State University - Northridge 21st Annual International Technology and."

Similar presentations


Ads by Google