Accessible Video in a Diverging Web Environment

1
Accessible Video in a Diverging Web Environment
David Klein K. Fritz Thompson

• Association for Educational Communications and
  Technology (AECT)2005 International Convention
• -
• Orlando, FL
• October 2005
• http//disability.law.uiowa.edu/lhpdc/publications
  /kleinpubs.html

2
Overview

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

3
Introduction

• Law, Health Policy Disability Center
• Grant-funded Research
• Training Center

4
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

5
Players

• QuickTime
• Windows Media Player
• Real Player
• Others
• Flash
• Java
• ?

6
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
7
Clients vs. Servers
Server
Clients
Clients
8
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

9
Client View
Browser Window
Embedded Player
Video
Captions
10
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

11
Accessible Video and Web Pages

• Accessibility of player controls
• Best as standalone players
• Real
• Windows Media Player
• Best as embedded
• QuickTime
• Flash

12
Embedded Captioned Video
Server
Client
Video File
HTML File
Combining File
Caption File
13
Embedded Players

• Different technologies among browsers
• ltOBJECTgt versus ltEMBEDgt
• Control user experience
• Player size
• Automatic startup
• Surround video with supporting information
• Difficult to implement when players are not up to
  date
• Valid HTML?

14
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

15
Captioning Technologies

• XML
• Extensible Markup Language
• SMIL
• Synchronized Multimedia Integration Language
• SAMI
• Microsoft Synchronized Accessible Media
  Interchange
• QuickTime caption file
• Apple
• Flash
• Macromedia

16
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

17
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
• 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

18
Caption Files

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

19
Captioning QuickTime

• Video
• .mov file and others
• Caption file
• .txt
• QuickTime caption file
• SMIL
• .smi or .mov
• Integrates video and caption files

20
Captioning Media Player

• Video
• .wmv
• Caption file
• .smi (XML / SAMI)
• Integration file
• .asx
• Integrates video and caption files

21
Captioning Flash

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

22
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

23
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

24
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)

25
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

26
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

27
Create XML Configuration

• Open configuration file (XML)
• Add settings
• Video location
• Caption file location
• Video size and width in pixels
• Video total time in seconds

28
Combine Files

• Upload
• Video (.flv)
• Caption file
• Caption configuration (caption.xml)
• Flash file (.swf)
• Incorporate embedding tags in HTML
• ltOBJECTgt
• ltEMBEDgt

29
Flash Security

• Keep files in same folder
• Use BASE attribute
• ltobjectgtltparam name"base" value"http//domain.c
  om/"gtlt/object
• Andltembed base"http//domain.com/" gt
• Test thoroughly, especially among browsers and
  browser versions

30
Satay Method for Validated XHTML

• Eliminates the use of the ltEMBEDgt tag.
• Uses only the ltOBJECTgt tag.
• Anything that a browser doesnt 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-macrom
  edia-flash-in-xhtml

31
Satay Method Example

• ltobject classid"clsidD27CDB6E-AE6D-11cf-96B8-444
  553540000" codebase"http//download.macromedia.co
  m/pub/shockwave/cabs/flash/swflash.cabversion6,0
  ,40,0" width"100" height"100"gt ltparam
  name"movie" value"http//domain.com/dpnc02.swf"
  /gt ltparam name"base" value" http//domain.com/"
  /gt lt/objectgt lt!--For Firefox--gt ltobject
  data" http//domain.com/dpnc02.swf" width"100"
  height"100" type"application/x-shockwave-flash"
  gt ltparam name"base" value" http//domain.com/"
  /gt ltparam name"pluginurl" value"http//www.macr
  omedia.com/go/getflashplayer" /gt ltpgtYou do not
  have the Flash player installed. See lta
  href"http//www.macromedia.com/go/getflashplayer"
  title"Click here to get the Flash Player"gt
  http//www.macromedia.com/go/getflashplayerlt/agt.
  lt/objectgt

32
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

33
Resources

• WebAIM
• http//www.webaim.org/techniques/captions/
• World Wide Web Consortium Web Video Standards
• http//www.w3.org/AudioVideo/
• Hi Software (HiCaption)
• http//www.hisoftware.com/hmcc/acc4mcc.html
• National Consortium on Accessible Media (MAGpie)
• http//ncam.wgbh.org/webaccess/magpie/
• Captioned Media Program
• http//www.cfv.org
• National Association of the Deaf
• http//www.nad.org/

34
Contact

• Law, Health Policy Disability Center
• http//disability.law.uiowa.edu/
• LHPDC Bulletin Board (download Flash playback
  engine)
• 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_at_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_at_uiowa.edu