Upload
della-sutton
View
214
Download
0
Embed Size (px)
Citation preview
MULTIM
EDIA
TUTO
RIAL F
OR
BLACKBOARD U
SING E
-BOOK
TECHNOLO
GY
SI
RI
SH
B
AT
HI
NA
WI
LL
IA
M
HI
ND
ER
MA
N
MO
NI
CA
C
ZA
RN
Y
GOALS
• Create an accessible set of video tutorials for the Blackboard Learning system implementing a custom video framework built upon HTML5's <video> and <audio> tags
• Implement a timed text format• Implement a audio description track, putting audio cues in spots to pause
main video• Build the media player framework with buttons to toggle CC and AD
display• Hadi identified a previous resource from Blackboard • Liam Moran - ATLAS Group has made accessible video demo (Flash
encoded) • http://media01.atlas.uiuc.edu/atlas/test/CWV.html
• Structure to define the elements of the multimedia file to be sent to player• The project needs to be extensible
DEMONSTRATION
KEY TECHNOLOGIES
• Gabby and Hadi create the video script to cover Login, myCourse, Homepage• Sirish worked with them to create the video using Camtasia
• Bill created the framework for the video player• Buttons Turn on/off audio
descriptions - if on, video pauses, plays audio, then un-pauses
• Time-elapsed, time-remaining, and jump to certain time (ARIA progress bar or slider)
• Access key shortcuts
KEY TECHNOLOGIES
• HTML5 <video> tag• Prior to HTML5, there was no standards-based way to embed a
video in a web page• Set up a video container, used with attributes
KEY TECHNOLOGIES
• Closed captions are a solved problem for HTML5, the jQuery Javascript library includes a set of functions for handling them pretty easily• Use SRT format to add captions, audio track, and chapters• Each line gets timestamp, additional information extracted from .srt file
• SRT files allow project to be customizable and easily edited
jquery.srt
FURTHER IMPROVEMENTS
• Added chapters to navigate to topics with additional SRT file• Removed Audio Description
chapters to reduce clutter• Attempted ARIA slider for more
accessible time display• High contrast mode for visual
impairments• Stylized buttons added• ARIA compatible button
CHALLENGES• Compatibility with different video formats• Issues with having the video pause while having only one audio description play• Solved using Booleans surrounding play functions
• Want to attach video sources and text for captioning in a way that is not hard-coded into the web page• Solved using widely used .srt format and jquery
• No resources for best practices on audio descriptions• How we solved having to create new audio object each time a new source is extracted
from the .srt file for audio description• ARIA slider implementation
DISCUSSION ON IMPACT
• Accessibility for web video and audio is the need of extending content with functionality that allows people with varying degrees and types of disabilities to access content on the Web
• Functionalities implemented in the project are not only usable for disabled people• Audio descriptions useful for those who are multitasking• Subtitles useful for those who are in loud environments or
internationalisation
• Overall project was an enormous success• Successfully generalized a framework for attaching additional
information such as CC, AD, chapters• Able to incorporate all concepts learned into final product• Project is extensible