Concepts & Techniques for Accessible, Closed Captioned Web-Based Video 10th Annual Accessing Higher Ground: Accessible Media, Web and Technology Conference.

Slides:



Advertisements
Similar presentations
Combining the strengths of UMIST and The Victoria University of Manchester 15 th June 2006 Keep SMILing Institutional Web Management Workshop 10 th June.
Advertisements

Accessible Video in a Diverging Web Environment CSUN Conference: Technology and Persons with Disabilities Los Angeles, CA March 16, 2005 David Klein K.
Techniques for Creating Accessible, Closed Captioned Web-Based Video California State University - Northridge 21st Annual International Technology and.
Techniques for Creating Accessible, Closed Captioned Web-Based Video California State University - Northridge 21st Annual International Technology and.
Concepts & Techniques for Accessible, Closed Captioned Web-Based Video 10th Annual Accessing Higher Ground: Accessible Media, Web and Technology Conference.
Concepts & Techniques for Accessible, Closed Captioned Web-Based Video 10th Annual Accessing Higher Ground: Accessible Media, Web and Technology Conference.
Techniques for Creating Accessible, Closed Captioned Web-Based Video California State University - Northridge 22nd Annual International Technology and.
Guidelines for Presenting Archived Video on the Web: An Overview AECT Annual Convention Dallas, TX October 12, 2006 David Klein K. “Fritz” Thompson.
Concepts & Techniques for Accessible, Closed Captioned Web-Based Video 10th Annual Accessing Higher Ground: Accessible Media, Web and Technology Conference.
Accessible Video in a Diverging Web Environment Association for Educational Communications and Technology (AECT) 2005 International Convention - Orlando,
Conference-CD phdcc: PHD Computer Consultants Ltd CD Format Layout of CDs produced by Conference-CD What folders are on the CD How to use templates to.
What is Multimedia ? Multi ( Multiple ) and Media ! So…. Information in multiple formats, including text, images, audio, video and animation :) It makes.
Techniques for Creating Accessible, Closed Captioned Web-Based Video California State University - Northridge 21st Annual International Technology and.
Concepts & Techniques for Accessible, Closed Captioned Web-Based Video 10th Annual Accessing Higher Ground: Accessible Media, Web and Technology Conference.
ACCESSING HIGHER GROUND 2010 Norman Coombs CEO EASI
Techniques for Creating Accessible, Closed Captioned Web-Based Video California State University - Northridge 21st Annual International Technology and.
Timing in XML XML and XSL Timing framework in XML Approaches Inline syntax (SMIL) Styled Timing Timesheets Timesheets and SMIL comparison.
Timing in XML Timing framework in XML Approaches Inline syntax (SMIL) Styled Timing Timesheets Timesheets and SMIL comparison.
Office of Campus Life - Disability Support Services In-House Captioning! By Kamran Rasul
Techniques for Creating Accessible, Closed Captioned Web-Based Video California State University - Northridge 21st Annual International Technology and.
Techniques for Creating Accessible, Closed Captioned Web-Based Video California State University - Northridge 21st Annual International Technology and.
Paul Trani Adobe Certified Instructor/Expert Resources:
Chapter 11 Adding Media and Interactivity. Flash is a software program that allows you to create low-bandwidth, high-quality animations and interactive.
© 2011 Delmar, Cengage Learning Chapter 11 Adding Media and Interactivity with Flash and Spry.
Timed Media Accessibility: Surveying the terrain David Singer, with help from the web media team Apple Inc.
E0262 – MIS – Multimedia Storage Techniques SMIL – Synchronized Multimedia Integration Language.
SMIL Manousos Bouloukakis 26/05/2001 What does SMIL mean? Synchronized Multimedia Integration Language Pronounce it "smile" !
Chapter 15 Video. Importing Video Into Flash Once you import video into Flash MX 2004, you can control it using behaviors and very basic ActionScript,
 a style language that defines layout & appearance of HTML documents  CSS covers fonts, colours, margins, lines, height, width, background images and.
Tutorial 7 Working with Multimedia. XP Introducing Multimedia Bandwidth is a measure of the amount of data that can be sent through a communication pipeline.
CSS Cascading Style Sheets By Garrett Garman. CSS Why use Style Sheets? Separates Appearance and Structure Modularity Quick and Easy changes Flexibility.
Copyright © 2013 MyGraphicsLab / Pearson Education STRUCTURE AND HTML TAGS MyGraphicsLab: Adobe Dreamweaver CS6 ACA Certification Preparation for Web Communication.
Css. Definition Cascading style sheet (CSS) Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents.
Copyright 2007, Information Builders. Slide 1 Understanding Basic HTML Amanda Regan Technical Director June, 2008.
Supplementary Materials on Web Authoring. Insert Anchors & Add Hyperlinks Insert other multimedia elements: Flash animations Video clips & Audio clips.
Tutorial 7 Working with Multimedia. New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition 2 Objectives Explore various multimedia applications.
audio video object Options: controls autoplay Need to define height and width Options: controls autoplay.
CHAPTER 5 Working with Data Tables and Inline Frames.
Using Plug-Ins Adding Multimedia to an HTML Document.
1 © Netskills Quality Internet Training, University of Newcastle Using Style Sheets in Dreamweaver CS © Netskills, Quality Internet Training, University.
The Synchronized Multimedia Integration Language (SMIL) Kuo-Hao Li.
The Web Wizard’s Guide To DHTML and CSS Chapter 8 Putting It All Together and Moving Forward.
HTML (Advanced) -forms, iframe, audio, video. Outline – Forms – iFrames – Audio/Video.
Basic HTML Document Structure. Slide 2 Goals (XHTML HTML5) XHTML Separate document structure and content from document formatting HTML 5 Create a formal.
Department of Computer Science, Florida State University CGS 3066: Web Programming and Design Spring Forms, HTML5 layout.
Javascript Basic Concepts Presentation By: Er. Sunny Chanday Lecturer CSE/IT RBIENT.
 Pictures  Page backgrounds  Element backgrounds (list items!)  Link displays (arrows)  List markers.
Chapter 8 Adding Multimedia Content to Web Pages HTML5 & CSS 7 th Edition.
Internet & World Wide Web How to Program, 5/e Copyright © Pearson, Inc All Rights Reserved.
Basic HTML Page 1. First Open Windows Notepad to type your HTML code 2.
HTML is the language that allows text and graphics to be displayed as Web pages. It is a set of special codes, called tags, that tells a browser application.
What is CSS? A set of style rules that tell the web browser how to present a web page or document. – In earlier versions of HTML, style characteristics,
Cascading Style Sheets Using HTML. What are they? A set of style rules that tell the web browser how to present a web page or document. In earlier versions.
CSS Introductions. Objectives To take control of the appearance of a Web site by creating style sheets. To use a style sheet to give all the pages of.
Advanced HTML Tags:.
The new way of presenting web lectures
Using Templates A template is a special type of document that you use to design a “fixed” page layout; you can then create documents based on the template.
>> Introduction to CSS
Key concepts of Computing
Using Templates A template is a special type of document that you use to design a “fixed” page layout; you can then use the web page to create a template.
ITI 133 HTML5 Desktop and Mobile Level I
Images and Backgrounds
Playing Audio (Part 1).
DHTML Javascript Internet Technology.
HTML5 Level I Session II Chapter 3 - How to Use HTML to Structure a Web Page
HTML5 Media.
Basic HTML and Embed Codes
DHTML Javascript Internet Technology.
5.00 Apply procedures to organize content by using Dreamweaver. (22%)
Using Templates A template is a special type of document that you use to design a “fixed” page layout; you can then create documents based on the template.
Presentation transcript:

Concepts & Techniques for Accessible, Closed Captioned Web-Based Video 10th Annual Accessing Higher Ground: Accessible Media, Web and Technology Conference Boulder, Colorado November 7, David Klein K. “Fritz” Thompson

Embedded Closed Captioning QuickTime Text Track  QuickTime Pro required  Embedded in video file itself  Video & captions self-contained  Easy to Deploy (1 file)  May start faster in browser (1 file)  Hard to modify  Captions can’t be closed without script  Can be “masked” (e.g., translucent)

Embedded Closed Captioning QuickTime Text Track  Demo of embedding text track into QuickTime  Also see WebAIM: uicktime/add_captions.php uicktime/add_captions.php uicktime/add_captions.php

Embedded Captioned Video – Single File Embed in HTML File ServerClient Video File with Captions

QuickTime Captioned Video  SMIL file option  Requires 3 files  Relatively easy to modify captions and video  Video and caption files can be reused  Captions separate, so can be eliminated  Harder to deploy

Embedded Captioned Video – Multiple Files Embed in HTML File ServerClient Video File Caption File Combine Files in Player

QuickTime Captioning & Deployment  Video .mov file  Caption file .txt  QuickTime caption file  SMIL .smi,.sml, or.mov  Integrates video and caption files  HTML  Integrates video, captions, player, text, other files

Final Assembly (QuickTime) Video file videoname.mov Caption file videoname_captions.txt SMIL file videoname_smil.movvideoname_smil.sml videoame_smil.smi (avoid)

SMIL File Characteristics  Use XML standards  Tags case sensitive  All elements closed  xxx (open and close tags)  (no explicit close tag; end with the slash)  “SMILtext” identifier not standard

SMIL File Layout SMILtext SMILtext <smil> </smil>

SMIL File  “SMILtext” tag, encoding, QuickTime association  Header  Metadata (video name, copyright info)  Player layout (“region” sizes, background / text colors)  Container IDs for linking parts  Body  Video duration  Start (and end) times  File locations  Links to regions

SMIL and the Player Layout Root Layout Video region Text region

SMIL File Activity  Handout: Activity 2: QuickTime  Objective:  Modify MAGpie files to assemble a captioned QuickTime video