Techniques for Creating Accessible, Closed Captioned Web-Based Video California State University - Northridge 21st Annual International Technology and.

Slides:



Advertisements
Similar presentations
3.02B Authoring Languages 3.02 Develop webpages..
Advertisements

Combining the strengths of UMIST and The Victoria University of Manchester 15 th June 2006 Keep SMILing Institutional Web Management Workshop 10 th June.
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,
What is Multimedia ? Multi ( Multiple ) and Media ! So…. Information in multiple formats, including text, images, audio, video and animation :) It makes.
CHAPTER 7 STYLING CONTENT WITH CASCADING STYLE SHEETS.
Neal Stublen Pre-HTML5 Solutions  Audio and video were embedded in pages using plug-ins Apple Quicktime Microsoft Silverlight Adobe.
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.
CAPTIONING ONLINE MEDIA An introductory guide for colleges and universities Mary Reilly Captioned Media Specialist Services for Students with Disabilities.
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.
Tags through Forms. This element is required for all HTML pages It must be at the top of every page of every website We’ll see later on why it is important.
Paul Trani Adobe Certified Instructor/Expert Resources:
Techniques for Creating Accessible, Closed Captioned Web-Based Video California State University - Northridge 21st Annual International Technology and.
Chapter 11 Adding Media and Interactivity. Flash is a software program that allows you to create low-bandwidth, high-quality animations and interactive.
Microsoft Office PowerPoint 2013 Microsoft Office PowerPoint 2013 Courseware # 3256 Lesson 8: Sharing Presentations.
© 2011 Delmar, Cengage Learning Chapter 11 Adding Media and Interactivity with Flash and Spry.
CHAPTER 18 INTEGRATING AUDIO AND VIDEO. LEARNING OBJECTIVES How the HTML 5 and tag pair can be used to include a video file within a webpage How video.
E0262 – MIS – Multimedia Storage Techniques SMIL – Synchronized Multimedia Integration Language.
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.
Bare bones notes. Suggested organization for main folder. REQUIRED organization for the 115 folder.
Copyright © 2013 MyGraphicsLab / Pearson Education STRUCTURE AND HTML TAGS MyGraphicsLab: Adobe Dreamweaver CS6 ACA Certification Preparation for Web Communication.
Concepts & Techniques for Accessible, Closed Captioned Web-Based Video 10th Annual Accessing Higher Ground: Accessible Media, Web and Technology Conference.
Session 1 SESSION 1 Working with Dreamweaver 8.0.
Microsoft FrontPage 2003 Illustrated Complete Using a Dynamic Web Template.
Bare bones slide show. The format is text files, with.htm or.html extension. Hard returns, tabs, and extra spaces are ignored. DO NOT use spaces in file.
 Remember that HTML is just text  Need to point to pictures  Use the img tag  alt: › screen reader › REQUIRED for this class and to validate.
Tutorial 7 Working with Multimedia. New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition 2 Objectives Explore various multimedia applications.
Tutorial 7 Working with Multimedia. New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition 2 Objectives Explore various multimedia applications.
Chapter 16 Video. Importing Video Into Flash  Once you import video into Flash, you can control it using behaviors and very basic ActionScript, target.
XP 1 Creating an XML Document Developing an XML Document for the Jazz Warehouse XML Tutorial.
audio video object Options: controls autoplay Need to define height and width Options: controls autoplay.
HTML5 Audio and Video. Slide 2 History Playing audio and video used to be something of a novelty You would embed a control (with the element) into your.
INTRODUCTION TO DREAMWEAVER CS SOFT. OVERVIEW  DreamWeaverCS5.5  Defining a site  Site files  Authoring views  Property Inspector  AP Divs.
1 © Netskills Quality Internet Training, University of Newcastle Using Style Sheets in Dreamweaver CS © Netskills, Quality Internet Training, University.
Photo Story. How to use Photo Story Photo Story 3 can be located in the Accessories folder on school computers. You will need to have your pictures already.
Chapter 11 Adding Media and Interactivity. Chapter 11 Lessons Introduction 1.Add and modify Flash objects 2.Add rollover images 3.Add behaviors 4.Add.
Basic HTML Document Structure. Slide 2 Goals (XHTML HTML5) XHTML Separate document structure and content from document formatting HTML 5 Create a formal.
Chapter 28. Copyright 2003, Paradigm Publishing Inc. CHAPTER 28 BACKNEXTEND 28-2 LINKS TO OBJECTIVES Table Calculations Table Properties Fields in a Table.
 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.
Text2PTO: Modernizing Patent Application Filing A Proposal for Submitting Text Applications to the USPTO.
Basic HTML Page 1. First Open Windows Notepad to type your HTML code 2.
HTML And the Internet. HTML and the Internet ► HTML: HyperText Markup Language  Language in which all pages on the web are written  Not Really a Programming.
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,
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:.
© 2016 Pearson Education, Inc., Hoboken, NJ. All rights reserved.
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.
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.
"Digital Media Primer" Yue-Ling Wong, Copyright (c)2013 by Pearson Education, Inc. All rights reserved.
Integrating Multimedia: Sound, Video and More
Playing Audio (Part 1).
HTML5 Level I Session II Chapter 3 - How to Use HTML to Structure a Web Page
HTML5 Media.
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:

Techniques for Creating Accessible, Closed Captioned Web-Based Video California State University - Northridge 21st Annual International Technology and Persons with Disabilities Conference Los Angeles, California March 22, David Klein K. “Fritz” Thompson

QuickTime Text Track Embedded Open (Burned In) Captioning  QuickTime Pro required  Embedded in video file itself  Video & captions self-contained  Hard to modify  Captions can’t be eliminated without separate video or script  Easier to deploy (1 file), unless script used  May start faster in browser

Embedded Closed Captioning QuickTime Text Track  Demo of embedding text track into QuickTime (see “extras” folder on CD)  Also see WebAIM: uicktime/add_captions.php uicktime/add_captions.php uicktime/add_captions.php  Also see Accessible Digital Media html (link in Resources page) html html

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  Easy to edit  Can be reformatted  Harder to deploy than open captioned QuickTime

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

QuickTime Captioning & Deployment Files  Video .mov file and others (.mpg,.m4v, etc.)  Caption file .txt  QuickTime caption file format  SMIL .smi,.sml, or.mov  Integrates video and caption files  HTML  Integrates video, captions, player, text, other files

Final Assembly (QuickTime)  The video - videoname.mov  The caption file – videoname.en_US.qt.txt  The SMIL file – videoname.sml  Avoid.smi file extension .mov or.sml extension elicits QT playback  Captions display automatically as part of SMIL standard

SMIL File Characteristics  Use XML standards (mostly)  Tags case sensitive  All elements closed  xxx (open and close tags)  (no explicit close tag; use the slash)  “SMILText” identifier specific to QuickTime playback

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: QuickTime SMIL Activity - Assemble files  Objective: Modify MAGpie files to assemble a captioned QuickTime video.