Accessible Video in a Accessible Video in a Diverging Web Diverging Web EnvironmentEnvironment
Association for Educational Communications and Association for Educational Communications and Technology (AECT)Technology (AECT)
2005 International Convention2005 International Convention--
Orlando, FLOrlando, FLOctober 2005October 2005
http://disability.law.uiowa.edu/lhpdc/publications/kleinpubs.htmlhttp://disability.law.uiowa.edu/lhpdc/publications/kleinpubs.html
David Klein David Klein K. “Fritz” ThompsonK. “Fritz” Thompson
OverviewOverview
IntroductionIntroduction Web-based video playersWeb-based video players The technologyThe technology Creating accessible videoCreating accessible video Flash videoFlash video Our Flash playerOur Flash player Future of Web-based videoFuture of Web-based video
IntroductionIntroduction Law, Health Policy & Disability CenterLaw, Health Policy & Disability Center
Grant-funded Research &Grant-funded Research &Training CenterTraining Center
Our NeedsOur Needs
Provide accessible Web-based trainingProvide accessible Web-based training High quality video with quality audioHigh quality video with quality audio Closed captionsClosed captions TranscriptsTranscripts Supporting documents (PowerPoints, Handouts, etc.)Supporting documents (PowerPoints, Handouts, etc.)
Different formats (QuickTime, Windows Media Different formats (QuickTime, Windows Media Player, Flash)Player, Flash)
Efficient development and deploymentEfficient development and deployment
PlayersPlayers
QuickTimeQuickTime Windows Media PlayerWindows Media Player Real PlayerReal Player OthersOthers
FlashFlash JavaJava ??
The TechnologyThe Technology
Clients and serversClients and servers Plugins or whateverPlugins or whatever DownloadingDownloading Embedding video in Web pagesEmbedding video in Web pages CaptioningCaptioning FlashFlash
Understanding how the pieces fit together Understanding how the pieces fit together helps for producing accessible videohelps for producing accessible video
Clients vs. ServersClients vs. Servers
Server
Clients Clients
Clients vs. ServersClients vs. Servers Server Server
Stores HTML, video, caption text, other filesStores HTML, video, caption text, other files Files can be stored on different serversFiles can be stored on different servers
ClientClient Displays HTML in browserDisplays HTML in browser Launches playersLaunches players Assembles/packages the pieces Assembles/packages the pieces
VideoVideo Caption Caption Video PlayerVideo Player HTMLHTML
Client ViewClient View
Browser Window
Embedded Player
Video
Captions
The Player / Plug-inThe Player / Plug-in
Embeds the player in the browserEmbeds the player in the browser ActiveXActiveX
Internet Explorer Internet Explorer Plug-insPlug-ins
NetscapeNetscape FirefoxFirefox OperaOpera
Need to account for both in the HTMLNeed to account for both in the HTML User must install if not availableUser must install if not available
Accessible Video and Accessible Video and Web PagesWeb Pages
Accessibility of player controlsAccessibility of player controls Best as standalone playersBest as standalone players
RealReal Windows Media PlayerWindows Media Player
Best as embeddedBest as embedded QuickTimeQuickTime FlashFlash
Embedded Captioned Embedded Captioned VideoVideo
HTML File
Server Client
Video File
Caption File
Combining File
Embedded PlayersEmbedded Players
Different technologies among browsersDifferent technologies among browsers <OBJECT> versus <EMBED><OBJECT> versus <EMBED>
Control user experienceControl user experience Player sizePlayer size Automatic startupAutomatic startup Surround video with Surround video with supporting informationsupporting information
Difficult to implement when players are not Difficult to implement when players are not up to dateup to date
Valid HTML?Valid HTML?
Process - Creating a Process - Creating a VideoVideo
Shoot (or acquire) video/audio of highest Shoot (or acquire) video/audio of highest possible qualitypossible quality
Acquire secondary audio source and/or Acquire secondary audio source and/or CART file if possibleCART file if possible
Capture, edit and compress videoCapture, edit and compress video 3 output formats: .mov, .wmv, and .flv3 output formats: .mov, .wmv, and .flv
Make audio tapes for transcriptionMake audio tapes for transcription
Captioning – Captioning – TechnologiesTechnologies
XML XML Extensible Markup LanguageExtensible Markup Language
SMILSMIL Synchronized Multimedia Integration LanguageSynchronized Multimedia Integration Language
SAMISAMI Microsoft® Synchronized Accessible Media Microsoft® Synchronized Accessible Media
Interchange Interchange QuickTime caption fileQuickTime caption file
AppleApple FlashFlash
MacromediaMacromedia
Process - Transcribing Audio Process - Transcribing Audio or Videoor Video
High quality audio makes better movies and High quality audio makes better movies and better transcriptsbetter transcripts
TranscribeTranscribe Includes speaker identification and non-verbal Includes speaker identification and non-verbal
elements ([Laughter], [Inaudible])elements ([Laughter], [Inaudible]) Transcript saved in 3 formatsTranscript saved in 3 formats
MS Word .docMS Word .doc Accessible .pdfAccessible .pdf Plain .txt for caption filePlain .txt for caption file
Proof and correctProof and correct
Process - Precaptioning Process - Precaptioning StepsSteps
Text is broken up into “caption-sized chunks” Text is broken up into “caption-sized chunks” (based on Captioned Media Program guidelines)(based on Captioned Media Program guidelines)
Special characters eliminated (“smart” quotes, Special characters eliminated (“smart” quotes, em dashes, etc.)em dashes, etc.)
Caption timing software (Caption timing software (MAGpieMAGpie or or HiCaptionHiCaption Both let you transcribe directly or import prepared text Both let you transcribe directly or import prepared text
filesfiles Both attach timecodes to text in real timeBoth attach timecodes to text in real time Both export in plain text, SAMI, QuickTime SMIL or Both export in plain text, SAMI, QuickTime SMIL or
RealPlayer SMILRealPlayer SMIL Proof and CorrectProof and Correct
Caption FilesCaption Files
Caption textCaption text Time codes for synchronization with videoTime codes for synchronization with video Text FormattingText Formatting
Font and font sizeFont and font size Carriage returnsCarriage returns Bolding, colors, etc.Bolding, colors, etc.
SpeakersSpeakers Language supportLanguage support
Captioning – QuickTimeCaptioning – QuickTime
Video Video .mov file and others.mov file and others
Caption file Caption file .txt .txt QuickTime caption fileQuickTime caption file
SMIL SMIL .smi or .mov.smi or .mov Integrates video and caption filesIntegrates video and caption files
Captioning – Media Captioning – Media PlayerPlayer
VideoVideo .wmv .wmv
Caption fileCaption file .smi (XML / SAMI).smi (XML / SAMI)
Integration fileIntegration file .asx .asx Integrates video and caption filesIntegrates video and caption files
Captioning – FlashCaptioning – Flash
VideoVideo .flv.flv
Caption fileCaption file Whatever (.txt, .xml, .smi)Whatever (.txt, .xml, .smi)
XML configuration fileXML configuration file Flash player (Shockwave)Flash player (Shockwave)
.swf compiled from Flash code.swf compiled from Flash code Integrates video and caption filesIntegrates video and caption files
Final Assembly Final Assembly (QuickTime)(QuickTime)
The movie - moviename.movThe movie - moviename.mov The caption file - moviename_captions.txtThe caption file - moviename_captions.txt The SMIL file - moviename_smil.movThe SMIL file - moviename_smil.mov
Avoid .smi file extensionAvoid .smi file extension .mov extension elicits QT playback.mov extension elicits QT playback
Captions display automatically as part of Captions display automatically as part of SMIL standardSMIL standard
Final Assembly Final Assembly (Windows (Windows Media Player)Media Player)
The movie - moviename.wmvThe movie - moviename.wmv The SAMI file - moviename.smiThe SAMI file - moviename.smi
Captions and timing infoCaptions and timing info The ASX file - moviename.asxThe ASX file - moviename.asx
Includes URLs to movie & caption filesIncludes URLs to movie & caption files
User must toggle captions in Windows User must toggle captions in Windows Media Player “View” menuMedia Player “View” menu
Final Assembly (Flash Final Assembly (Flash Player )Player )
The Flash playback engine - moviename.swfThe Flash playback engine - moviename.swf The movie - moviename.flvThe movie - moviename.flv The caption file -moviename_captions.txtThe caption file -moviename_captions.txt
Same file as QTSame file as QT The caption control file - captions.xmlThe caption control file - captions.xml
Includes URLs to movie & caption filesIncludes URLs to movie & caption files
User can toggle captions in our Flash video player User can toggle captions in our Flash video player with CC icon (on by default)with CC icon (on by default)
Flash VideoFlash Video
Becoming more accessible by version 6Becoming more accessible by version 6 More integration with videoMore integration with video Frustrated with “player wars”Frustrated with “player wars” Lack of standards complianceLack of standards compliance Continual, relentless upgradesContinual, relentless upgrades Difficulty in upgrading – pushing users Difficulty in upgrading – pushing users
toward paid versionstoward paid versions Hijacking of media types / file extensionsHijacking of media types / file extensions
Flash – Compress VideoFlash – Compress Video
Create .flv file from movie (.mov, .avi)Create .flv file from movie (.mov, .avi) Method 1Method 1
Import into Flash library and compressImport into Flash library and compress Sorenson Spark within FlashSorenson Spark within Flash
Export to external file or drag to timelineExport to external file or drag to timeline Method 2Method 2
Or compress using non-Flash application Or compress using non-Flash application Sorenson SqueezeSorenson Squeeze
Create XML Create XML ConfigurationConfiguration
Open configuration file (XML)Open configuration file (XML) Add settingsAdd settings
Video locationVideo location Caption file locationCaption file location Video size and width in pixelsVideo size and width in pixels Video total time in secondsVideo total time in seconds
Combine FilesCombine Files
Upload Upload Video (.flv)Video (.flv) Caption file Caption file Caption configuration (caption.xml)Caption configuration (caption.xml) Flash file (.swf)Flash file (.swf)
Incorporate embedding tags in Incorporate embedding tags in HTMLHTML <OBJECT><OBJECT> <EMBED><EMBED>
Flash SecurityFlash Security
Keep files in same folderKeep files in same folder Use BASE attributeUse BASE attribute
<object><object><param name="base" value="http://domain.com/"><param name="base" value="http://domain.com/"></object</object
AndAnd<embed … base="http://domain.com/" … ><embed … base="http://domain.com/" … >
Test thoroughly, especially among browsers and Test thoroughly, especially among browsers and browser versionsbrowser versions
Satay Method for Validated Satay Method for Validated XHTMLXHTML
Eliminates the use of the <EMBED> tag.Eliminates the use of the <EMBED> tag. Uses only the <OBJECT> tag.Uses only the <OBJECT> tag. Anything that a browser doesn’t understand Anything that a browser doesn’t understand
is ignored.is ignored. If Flash is not installed within a browser, a If Flash is not installed within a browser, a
default message will be displayed.default message will be displayed. http://www.alistapart.com/articles/flashsatay/http://www.alistapart.com/articles/flashsatay/ http://allinthehead.com/retro/234/embedding-http://allinthehead.com/retro/234/embedding-
macromedia-flash-in-xhtmlmacromedia-flash-in-xhtml
Satay Method ExampleSatay Method Example <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/fcodebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" width="100%" height="100%"> lash/swflash.cab#version=6,0,40,0" width="100%" height="100%"> <param name="movie" value="http://domain.com/dpnc02.swf" /> <param name="movie" value="http://domain.com/dpnc02.swf" /> <param name="base" value=" http://domain.com/" /> </object> <param name="base" value=" http://domain.com/" /> </object>
<!--For Firefox--> <!--For Firefox--> <object data=" http://domain.com/dpnc02.swf" width="100%" <object data=" http://domain.com/dpnc02.swf" width="100%" height="100%" type="application/x-shockwave-flash"> height="100%" type="application/x-shockwave-flash"> <param name="base" value=" http://domain.com/" /> <param name="base" value=" http://domain.com/" /> <param name="pluginurl" <param name="pluginurl" value="http://www.macromedia.com/go/getflashplayer" /> value="http://www.macromedia.com/go/getflashplayer" />
<p>You do not have the Flash player installed. <p>You do not have the Flash player installed. See <a href="http://www.macromedia.com/go/getflashplayer" See <a href="http://www.macromedia.com/go/getflashplayer" title="Click here to get the Flash Player"> title="Click here to get the Flash Player"> http://www.macromedia.com/go/getflashplayer</a>. http://www.macromedia.com/go/getflashplayer</a>. </object> </object>
FutureFuture
Our Flash video player developmentOur Flash video player development Customized controlsCustomized controls More configuration options in external XML More configuration options in external XML
filefile Embedded formatting in captionsEmbedded formatting in captions
Speech recognitionSpeech recognition Real-time voice recognitionReal-time voice recognition Automatic time codes (real-time)Automatic time codes (real-time)
Searchable / Linkable videoSearchable / Linkable video
ResourcesResources WebAIMWebAIM
http://www.webaim.org/techniques/captions/http://www.webaim.org/techniques/captions/ World Wide Web Consortium Web Video StandardsWorld Wide Web Consortium Web Video Standards
http://www.w3.org/AudioVideo/http://www.w3.org/AudioVideo/ Hi Software (HiCaption)Hi Software (HiCaption)
http://www.hisoftware.com/hmcc/acc4mcc.htmlhttp://www.hisoftware.com/hmcc/acc4mcc.html National Consortium on Accessible Media (MAGpie)National Consortium on Accessible Media (MAGpie)
http://ncam.wgbh.org/webaccess/magpie/http://ncam.wgbh.org/webaccess/magpie/ Captioned Media ProgramCaptioned Media Program
http://www.cfv.orghttp://www.cfv.org National Association of the DeafNational Association of the Deaf
http://www.nad.org/http://www.nad.org/
ContactContact Law, Health Policy & Disability CenterLaw, Health Policy & Disability Center
http://disability.law.uiowa.edu/http://disability.law.uiowa.edu/
LHPDC Bulletin Board (download Flash playback engine)LHPDC Bulletin Board (download Flash playback engine) http://disability2.law.uiowa.edu/dbtachttp://disability2.law.uiowa.edu/dbtac
David Klein280-1 Boyd Law Bldg.College of LawUniversity of IowaIowa City, IA [email protected]
K. “Fritz” Thompson280-1 Boyd Law Bldg.College of LawUniversity of IowaIowa City, IA [email protected]