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
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
Conventional Embedding
•	<OBJECT>
•	Object parameters
•	File location
•	<EMBED>
•	Embed parameters
•	File location
•	</EMBED>
•	</OBJECT>
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>
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>
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>
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
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/ 
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
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> 

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
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/
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  
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> tags
http://www.macromedia.com/go/tn_12701
•	Flash Object (using JavaScript)
http://blog.deconcept.com/flashobject/
•	Joe Clark
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
Contact
•	Law, Health Policy & Disability Center
•	http://disability.law.uiowa.edu/ 

•	LHPDC Bulletin Board (download Flash playback engine)
•	http://disability2.law.uiowa.edu/dbtac