Accessible Video in a Diverging Web Environment Association for Educational Communications and Technology (AECT) 2005 International Convention - Orlando, FL October David Klein K. “Fritz” Thompson

Overview  Introduction  Web-based video players  The technology  Creating accessible video  Flash video  Our Flash player  Future of Web-based video

Introduction  Law, Health Policy & Disability Center Grant-funded Research & Training Center

Our Needs  Provide accessible Web-based training  High quality video with quality audio  Closed captions  Transcripts  Supporting documents (PowerPoints, Handouts, etc.)  Different formats (QuickTime, Windows Media Player, Flash)  Efficient development and deployment

Players  QuickTime  Windows Media Player  Real Player  Others  Flash  Java  ?

The Technology  Clients and servers  Plugins or whatever  Downloading  Embedding video in Web pages  Captioning  Flash Understanding how the pieces fit together helps for producing accessible video

Clients vs. Servers Server Clients

Clients vs. Servers  Server  Stores HTML, video, caption text, other files  Files can be stored on different servers  Client  Displays HTML in browser  Launches players  Assembles/packages the pieces  Video  Caption  Video Player  HTML

Client View Browser Window Embedded Player Video Captions

The Player / Plug-in  Embeds the player in the browser  ActiveX  Internet Explorer  Plug-ins  Netscape  Firefox  Opera  Need to account for both in the HTML  User must install if not available

Accessible Video and Web Pages Accessibility of player controls  Best as standalone players  Real  Windows Media Player  Best as embedded  QuickTime  Flash

Embedded Captioned Video HTML File ServerClient Video File Caption File Combining File

Embedded Players  Different technologies among browsers  versus  versus  Control user experience  Player size  Automatic startup  Surround video with supporting information supporting informationsupporting information  Difficult to implement when players are not up to date  Valid HTML?

Process - Creating a Video Process - Creating a Video  Shoot (or acquire) video/audio of highest possible quality  Acquire secondary audio source and/or CART file if possible  Capture, edit and compress video  3 output formats:.mov,.wmv, and.flv  Make audio tapes for transcription

Captioning – Technologies  XML  Extensible Markup Language  SMIL  Synchronized Multimedia Integration Language  SAMI  Microsoft® Synchronized Accessible Media Interchange  QuickTime caption file  Apple  Flash  Macromedia

Process - Transcribing Audio or Video  High quality audio makes better movies and better transcripts  Transcribe  Includes speaker identification and non-verbal elements ([Laughter], [Inaudible])  Transcript saved in 3 formats  MS Word.doc  Accessible.pdf  Plain.txt for caption file  Proof and correct

Process - Precaptioning Steps  Text is broken up into “caption-sized chunks” (based on Captioned Media Program guidelines)  Special characters eliminated (“smart” quotes, em dashes, etc.)  Caption timing software (MAGpie or HiCaption MAGpie HiCaptionMAGpie HiCaption  Both let you transcribe directly or import prepared text files  Both attach timecodes to text in real time  Both export in plain text, SAMI, QuickTime SMIL or RealPlayer SMIL  Proof and Correct

Caption Files  Caption text  Time codes for synchronization with video  Text Formatting  Font and font size  Carriage returns  Bolding, colors, etc.  Speakers  Language support

Captioning – QuickTime  Video .mov file and others  Caption file Caption file Caption file .txt  QuickTime caption file  SMIL SMIL .smi or.mov  Integrates video and caption files

Captioning – Media Player  Video .wmv  Caption file Caption file Caption file .smi (XML / SAMI)  Integration file Integration file Integration file .asx  Integrates video and caption files

Captioning – Flash  Video .flv  Caption file  Whatever (.txt,.xml,.smi)  XML configuration file XML  Flash player (Shockwave) .swf compiled from Flash code  Integrates video and caption files

Final Assembly (QuickTime)  The movie - moviename.mov  The caption file - moviename_captions.txt  The SMIL file - moviename_smil.mov  Avoid.smi file extension .mov extension elicits QT playback Captions display automatically as part of SMIL standard

Final Assembly (Windows Media Player)  The movie - moviename.wmv  The SAMI file - moviename.smi  Captions and timing info  The ASX file - moviename.asx  Includes URLs to movie & caption files User must toggle captions in Windows Media Player “View” menu

Final Assembly (Flash Player )  The Flash playback engine - moviename.swf  The movie - moviename.flv  The caption file -moviename_captions.txt  Same file as QT  The caption control file - captions.xml  Includes URLs to movie & caption files User can toggle captions in our Flash video player with CC icon (on by default)

Flash Video  Becoming more accessible by version 6  More integration with video  Frustrated with “player wars”  Lack of standards compliance  Continual, relentless upgrades  Difficulty in upgrading – pushing users toward paid versions  Hijacking of media types / file extensions

Flash – Compress Video  Create.flv file from movie (.mov,.avi)  Method 1  Import into Flash library and compress  Sorenson Spark within Flash  Export to external file or drag to timeline  Method 2  Or compress using non-Flash application  Sorenson Squeeze

Create XML Configuration  Open configuration file (XML) configuration file configuration file  Add settings  Video location  Caption file location  Video size and width in pixels  Video total time in seconds

Combine Files  Upload  Video (.flv)  Caption file  Caption configuration (caption.xml)  Flash file (.swf)  Incorporate embedding tags in HTML HTML  

Flash Security  Keep files in same folder  Use BASE attribute  </object  And  And  Test thoroughly, especially among browsers and browser versions

Satay Method for Validated XHTML  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.   macromedia-flash-in-xhtml macromedia-flash-in-xhtml macromedia-flash-in-xhtml

Satay Method Example  You do not have the Flash player installed. See  You do not have the Flash player installed. See

Future  Our Flash video player development  Customized controls  More configuration options in external XML file  Embedded formatting in captions  Speech recognition  Real-time voice recognition  Automatic time codes (real-time)  Searchable / Linkable video

Resources  WebAIM   World Wide Web Consortium Web Video Standards   Hi Software (HiCaption)   National Consortium on Accessible Media (MAGpie)   Captioned Media Program   National Association of the Deaf 

Contact  Law, Health Policy & Disability Center   LHPDC Bulletin Board (download Flash playback engine)  David Klein Boyd Law Bldg. College of Law University of Iowa Iowa City, IA K. “Fritz” Thompson Boyd Law Bldg. College of Law University of Iowa Iowa City, IA