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 52242319-335-6748david-klein@uiowa.edu

K. “Fritz” Thompson280-1 Boyd Law Bldg.College of LawUniversity of IowaIowa City, IA 52242319-335-6748kenneth-d-thompson@uiowa.edu