What is this site?

HTML5Labs is where Microsoft prototypes early and unstable specifications from web standards bodies such as W3C. Sharing these prototypes helps us have informed discussions with developer communities, and enables us to provide better feedback on draft specifications based on this implementation experience. To find out more about HTML5Labs, read the blog by Dean Hachamovitch, Corporate Vice President for Internet Explorer, and the blog by Jean Paoli, President, Microsoft Open Technologies, Inc.

Video Captioning

Contents

1 Introduction.

2 WEBVTT\TTML VIDEO Captioning.

2.1 Track Element

2.1.1 How to add captioning to HTML5 videos with the new HTML5 track element

2.1.2 GLOBAL ATTRIBUTES.

2.1.3 Additional constraints and admonitions.

2.1.4 Tag omission.

2.1.5 Permitted parent elements.

2.1.6 DOM interface.

2.1.7 Additional Resources.

2.2 TTML.

2.2.1 Timed Text Markup Language (TTML) applied to HTML5.

2.2.2 Document format

2.3 Sample Code.

3 WebVTT.

4 Getting Started.

4.1.1 Installing WebVTT\TTML Demo.

4.1.2 WebVTT\TTML DEMO WORKING Process.

1 Introduction

Media accessibility is an important aspect of the HTML5 specification. Soon
web developers will be able to add captioning to HTML5 videos with the new HTML5
track
element - all they need to do is point to a caption file that contains a written
representation of the dialog or actions in the video.

With this new functionality there is now no need for external add-ons to
publish accessible video content.

The following HTML fragment shows how the track element works:



1: <video>

2: <source type="video/mp4" src="video_file">

3: <track src="captions_file" label="English captions" kind="captions"
srclang="en-us" default >

4: <track src="descriptions_file" label="English description"
kind="descriptions" srclang="en-us">

5: </video>

The W3C HTML5 specification allows multiple caption formats. The Internet
Explorer 10 Platform Preview released at our recent Build conference does not
currently support any particular captioning format, but that will change in a
future release.

2 WEBVTT\TTML VIDEOCapt ioning

2.1 Track Element

The <track> element is a child of a <video> or <audio> element that links to a timed track, or time-based data. The kind of data is set via a kind attribute, which can take values of subtitles, captions, descriptions, chapters or metadata, depending on the type of information you're adding to your media. This point to a source files containing timed text that the browser will expose via some kind of user interface, if the visitor requires additional data. This will allow for "write once, use everywhere" accessibility; anyone linking to that file with a <video> or <audio> element that includes the element can access your information.

<track kind=captions src="captions file">

In this prototype the <track> element alongside the video are used to show how TTML and WebVTT formats can be set to enable captions and descriptions on a video playback.

2.1.1 How to add captioning to HTML5 videos with the new HTML5 track element

In order to add captioning to HTML5 videos with the new HTML5 track element, all you need to do is point to a caption file on the server that contains a written representation of the dialog or actions in the video.

With this new functionality there is now no need for external add-ons or extensions to publish accessible video content.

The following HTML fragment shows how the track element works:

<video>

<source type="video/mp4" src="video_file">

<track src="captions_file" label="English captions" kind="captions" srclang="en-us" default >

<track src="descriptions_file" label="English description" kind="descriptions" srclang="en-us">

</video>

Notes: There is no special requirement on what type of format should be used for the src property so HTML5 specification is written in such a way that multiple captioning formats can be used.

2.1.2 GLOBAL ATTRIBUTES

Any attributes permitted globally.

kind = "subtitles" or "captions" or "descriptions" or "chapters" or "metadata"

The kind of timed track.

- "subtitles": Transcription or translation of the dialogue in the soundtrack of the video or audio stream; meant for users who have access to the soundtrack but for whom it is not fully usable as intended (for example, for users who do not understand the language of the soundtrack).

- "captions": Transcription or translation of the dialogue, sound effects, relevant musical cues, and other relevant aural information in the video or audio stream; intended for cases where users do not have any access at all to the soundtrack (for example, for users who are deaf or for the case when the soundtrack is currently muted).

- "descriptions": Textual descriptions of the visual component of a video; meant for use with audio synthesis when the visual component is unavailable (for example, for users who are blind, or for users who are currently unable to view the screen on which the video is displayed-for example, a user accessing the video while driving a car).

- "chapters": Chapter titles.

- "metadata": Metadata content meant for use from script.

src= Non-empty URL potentially surrounded by spaces

The address of the timed track.

srclang = language tag

The language of the timed track.

A valid language tag as defined in [BCP 47].

label = string

A user-readable title for the timed track.

default = "default" or "" (empty string) or empty

Instructs the UA that the track is to be enabled if the user's preferences do not indicate that another track would be more appropriate

2.1.3 Additional constraints and admonitions

  • Attribute label for element track must have non-empty value.
  • The default attribute must not occur on more than one track element within the same audio element or video element.

2.1.4 Tag omission

The track element is a void element. A track element must have a start tag but must not have an end tag.

2.1.5 Permitted parent elements

The permitted parent elements of the html5 track are:

- video

- audio

2.1.6 DOM interface

Here is the DOM interface for the <track> element:

interface HTMLTrackElement : HTMLElement {

attribute DOMString kind;

attribute DOMString src;

attribute DOMString srclang;

attribute DOMString label;

attribute boolean default;

readonly attribute TextTrack track;

};

2.1.7 Additional Resources

For more information about the track element read the full specification here

2.2 TTML

2.2.1 Timed Text Markup Language (TTML) applied to HTML5

The TTML format (Timed Text Markup Language) is a W3C format intended for marking up external timed track resources.

2.2.2 Document format

A TTML file referenced by an HTML5 track element must be capable of being resolved to a TTML Infoset as defined by A Reduced XML Infoset. The following operations are defined on the TTML Infoset.

2.2.2.1 How TTML is used as captioning format in the prototype

Presenting TTML in HTML 5 consists of the following steps:

- Compute inline style sets for the source TTML document

- Construct the list of event times for the source TTML document

- For each event time:

- Calculate the TTML cue object list

- For each TTML cue object

- construct the corresponding styled HTML document fragment.

- While media is playing:

- Generate the CSS blocks for the active cue objects at current media playback time.

- Insert CSS blocks into rendered output.

 

2.2.2.2 TTML Style resolution

TTML offers three mechanisms for defining the equivalent of HTML 5 inline style. The nested and referential styles of TTML being used to avoid having large numbers of repeated attributes on each element, and allow groups of styles to be applied all at once; however this is merely a shorthand mechanism and is entirely equivalent to HTML 5 inline styles. TTML does not define an applicative mode of style application itself, but does not preclude the use of a mechanism such as CSS additionally being used for this purpose, where TTML style application would all have the same specificity as inline style. TTML Style inheritance is that of CSS, applied to the dynamic document. That is after the content is selected into the relevant region and inactive content timing rules. Thus external style sheets should also be applied to the dynamic DOM.

The Specified Style Set of properties is computed for each element:

- The initial specified style set for each element is set to empty

- Then style properties referenced by the affected element using the style attribute (referential styling) are processed in the following manner: For each style element referenced by a style attribute on the affected element and in the order specified in that style attribute; if the referenced style element is a descendant of a styling element, merge the specified style set of the referenced element into the specified style set of the affected element.

- Then style properties referenced through child nodes of the affected element (nested styling) are processed in the following manner: For each style element child of the affected element, and in the specified order of child elements, merge the specified style set of the child element, into the specified style set of the affected element.

- Then style properties that are applies as attributes on the affected element using the style attribute (inline styling) are processed in the following manner: For each style property expressed as a specified styling attribute of on the affected element merge that property into the specified style set of the affected element.

The following is a sample to show how TTML uses mechanisms like referential, nested and inline styling to define the equivalent of HTML 5 inline style.

// recurse over the tree, applying style to each element.

this.applyStyling = function (elem) {

this.applyStyle(elem);

 

var descendants = elem.childNodes;

var childrenCount = descendants.length;

while (childrenCount > 0) {

var child = descendants[--childrenCount];

this.applyStyling(child);

}

}

 

// apply styles in correct order to element.

 

this.applyStyle = function (elem) {

if (elem == null || elem.nodeType != Node.ELEMENT_NODE) return;

 

var styleSet = {};

var i;

 

// do referential styles

 

var styleIds = elem.getAttribute("style");

if (styleIds != null) {

 

// parse styleIds into individual style id's

 

var ids = (styleIds.split(/\s/));

for (i = 0; i < ids.length; i++) {

var styleElement = this.getStyleElement(ids[i]);

this.applyStylesheet(styleSet, styleElement);

}

}

 

// if elem is region, do nested styles

if (matchTagNameNS(elem, "region", TTMLNamespace)) {

var iNodeList = elem.getElementsByTagName("style");

for (i = 0; i < iNodeList.length; i++) {

this.applyStylesheet(styleSet, iNodeList[i]);

}

}

 

// do inline styles

this.applyInlineStyles(styleSet, elem);

 

this.setStyleSet(elem, styleSet)

}

 

this.applyInlineStyles = function (styleSet, element) {

var attrs = element.attributes;

for (var i = 0; i < attrs.length; i++) {

var attribute = attrs[i];

if (attribute.namespaceURI == TTMLStyleNamespace) {

styleSet[getLocalTagName(attribute)] = attribute.value;

}

}

}

 

this.applyStylesheet = function (styleSet, stylesheet) {

if (stylesheet == null) return;

 

var styleIds = stylesheet.getAttribute("style");

if (styleIds != null) {

 

// parse styleIds into individual style id's

 

var ids = (styleIds.split(/\s/));

for (i = 0; i < ids.length; i++) {

var styleElement = this.getStyleElement(ids[i]);

this.applyStylesheet(styleSet, styleElement);

}

}

// do styles that are inline in the stylesheet

 

this.applyInlineStyles(styleSet, stylesheet);

}

 

this.translateStyle = function (elem, translation, tick) {

var baseStyleSet = this.getStyleSet(elem);

 

// clone the base style set

 

var computedStyleSet = {};

for (style in baseStyleSet) {

computedStyleSet[style] = baseStyleSet[style];

}

 

// apply style animations (if any)

 

var animations = elem.childNodes;

for (var i = 0; i < animations.length; i++) {

var animation = animations[i];

if (getLocalTagName(animation) == "set" && this.temporallyActive(animation, tick)) {

var overrides = {};

this.applyInlineStyles(overrides, animation);

for (style in overrides) {

computedStyleSet[style] = overrides[style];

}

}

}

 

// apply properties

 

for (style in computedStyleSet) {

this.applyTTMLStyleAsCSS(translation, style, computedStyleSet[style])

}

}

 

 

 

2.2.2.3 TTML cue object construction

A set of TTML cue objects are constructed from the referenced TTML file by evaluating the TTMLInfoset at the TTML cue event times, that is, the set of time coordinates where some element becomes temporally active or inactive. The TTML Infoset is mapped once for each time coordinate in the TTML cue event times to a list of TTML cue objects as defined below, each TTML cue is then converted into an HTML 5 cue object.

Each region active at the TTML cue event time in the TTML Infoset will map to one TTML cue object in the list. If there is no region specified in the TTML Infoset, then the default region is used, and there will be at most one TTML cue object in the list.

2.2.2.4 Evaluating the TTML cue event times

Map the TTML Infoset to a set of event times by recursively walking the Information Elements starting at the root, and annotating each Information Elements with its absolute begin and end times, based on the begin, end and dur attributes; and recursively for each of the nodes children. The initial time containment context is seq, and the initial reference start and end times are that of the media to which the timed track applies.

Compute time intervals for an Information Element based on the time containment context, a reference start time and a reference end time in the following manner:

 

Set computed start time and computed end time to the zero time

 

Compute the beginning of the current element interval:

Set begin to the value of the "begin" attribute if present or the zero time otherwise

Set computed start time to the reference start time + begin;

 

Compute the simple duration of the interval:

(Note that par children have indefinite default duration, while seq children have

zero default duration. indefinite is truncated to the reference end time)

 

if the "dur" attribute is set and the "end" attribute is not set and the time container context is seq

Set referenceDur to the zero time

else

if computed start time is less than the reference end time

Set referenceDur to the reference end time - computed start time

else

set referenceDur to the zero time

if the "dur" attribute is set

Set dur to the "dur" attribute value.

if dur is greater than referenceDur

Set dur to referenceDur;

else

Set dur to referenceDur;

 

Set computed end time to computed start time + dur;

 

(note end can truncate the simple duration)

Set offsetEnd to the zero time and add reference start time

 

if attribute "end" is set

Set end to reference start time + value of "end" attribute

else

Set end to reference end time;

 

Set computed end time to the min of end and computed end time

 

Compute the child nodes:

if the time container context is par

for each child element of the node:

Compute Time Intervals for the child with par context, start time

as computed start time and end time as computed end time

else

for each child element of the node:

Set s to computedStartTime

Compute Time Intervals for the child with seq context, start time

as s and end time as computed end time

Set s to the computed end time of child;

 

An element is temporally active at time t, if the computed start time of the element is less than or equal to t, and t is less than the computed end time of the element. The TTML cue event times are those times where some element changes state from temporally inactive to temporally active or vice versa; that is, the Set of computed begin and end times in the annotated tree placed in order.

2.2.2.5 Evaluating the TTML document instance at event time

  1. For each temporally active region element replicate the sub-tree of the source document headed by the body element;
  2. Evaluating this sub-tree in a post-order traversal, prune elements if they are: not a content element, if they are temporally inactive, if they are empty, or if they aren't associated with the current active region;
  3. If the pruned sub-tree is non-empty, then reparent it to the current active region element and add the current active region to the output list.

A content element is associated with a region according to the following ordered rules, where the first rule satisfied is used and remaining rules are skipped:

  1. if the element specifies a region attribute, then the element is associated with the region referenced by that attribute;
  2. if some ancestor of that element specifies a region attribute, then the element is associated with the region referenced by the most immediate ancestor that specifies this attribute;
  3. if the element contains a descendant element that specifies a region attribute, then the element is associated with the region referenced by that attribute;
  4. if a default region was implied (due to the absence of any region element), then the element is associated with the default region;
  5. The element is not associated with any region.
The following code sample elaborates the processing steps described above


this.isInRegion = function (elem, region) {

//A content element is associated with a region according to the

following ordered rules,

//where the first rule satisfied is used and remaining rules are skipped:

 

//1. if the element specifies a region attribute, then the element is

// associated with the region referenced by that attribute;

 

 

var r = elem.getAttribute("region");

if (r != null) {

return r == region;

}

 

//2. if some ancestor of that element specifies a region attribute, then the element is

// associated with the region referenced by the most immediate ancestor that specifies

// this attribute;

 

var ancestor = elem.parentNode;

while (ancestor != null && ancestor.nodeType == Node.ELEMENT_NODE) {

r = ancestor.getAttribute("region");

if (r != null) {

return r == region;

}

ancestor = ancestor.parentNode;

}

 

 

//3. if the element contains a descendant element that specifies a region attribute,

// then the element is associated with the region referenced by that attribute;

 

var descendants = selectNodes(elem, ".//*[@region]", m_ttmlSource);

if (descendants.length > 0) {

var dl = descendants.length;

while (dl > 0) {

var node = descendants[--dl];

if (node.getAttribute("region") == region)

return true;

}

}

 

//4. if a default region was implied (due to the absence of any region element),

// then the element is associated with the default region;

 

if (m_usingDefaultRegion)

return region == null;

 

//5. the element is not associated with any region.

return false;

 

}

 

2.2.2.6 TTML cue to HTML cue construction rules

To support the timed track model of HTML 5, each region element in the intermediate document is converted to a timed track cue with the following assignments:

The timed track cue identifier

Is set to the value of xml:id of the region used to construct the cue, or "" if the default region is used.

The timed track cue pause-on-exit flag

Is set to false unless the html:pauseOnExit attribute is set anywhere in the region markup.If value is not mapped above, or the set is multivalued, the value of voice is set to an integer; if the same set of roles is used in subsequent cues, then the same number shall be re-used, otherwise the number shall be unique over all cues in the track.

2.2.2.7 TTML cue text DOM construction rules

The body of the HTML5 cue is constructed from the region by converting the TTML Intermediate Document Object Tree into a DOM tree for the Document owner. User agents must create a DocumentFragment node for each HTML 5 cue, and populate it with a tree of DOM nodes that is isomorphous to the tree of TTML Intermediate Document Object Tree, using the following mapping of TTML Intermediate Document Object to DOM nodes:

TTML Intermediate Document Object

DOM node

ttml:region element

HTMLElement element node with localName "div" and the namespaceURI set to the HTML namespace.

ttml:body element

HTMLElement element node with localName "div" and the namespaceURI set to the HTML namespace.

ttml:div element

HTMLElement element node with localName "div" and the namespaceURI set to the HTML namespace.

ttml:p element

HTMLElement element node with localName "p" and the namespaceURI set to the HTML namespace.

ttml:span element

HTMLElement element node with localName "span" and the namespaceURI set to the HTML namespace.

ttml:set element

The Specified Style Set of properties of the element is merged into the The Specified Style Set of properties of its parent.

ttml:br element

HTMLElement element node with localName "br" and the namespaceURI set to the HTML namespace.

ttml:metadata node

If the TTML source domain is not the same as the referencing HTML domain, then ignore. Otherwise, if the metadata contains only text elements, append a "data-metadata" attribute to the HTMLElement element associated with the containing TTML node, whose character data is the text of the metadata node, otherwise process child nodes of the metadata element and add to the HTMLElement element associated with the containing TTML node in an XML Island.

Anonymous span text

Text node whose character data is the text of the anonymous span

Elements In non TTML Namespace

If the TTML source domain is the same as the referencing HTML domain, then copy the nodes in their existing namespace; otherwise ignore

ownerDocument attribute

The ownerDocument attribute of all nodes in the DOM tree must be set to the given document owner.

 

The following code sample show how to convert elements in TTML to their equivalent in HTML

// translating elements in TTML to their equivalent in HTML

function translate(elem$, tick) {

var translation$ = $();

var name = getTagNameEquivalent(elem$);

var htmlName = "";

var htmlClass = "";

var htmlAttrs = {};

 

if (elem$.size() > 0 && temporallyActive(elem$, tick)) {

switch (name) {

case "tt:region":

htmlClass = "cue "; // to simulate the ::cue selector

htmlName = "div";

break;

case "tt:body":

case "tt:div":

htmlName = "div";

break;

case "tt:p":

htmlName = "p";

break;

case "tt:span":

htmlName = "span";

break;

case "tt:br":

htmlName = "br";

break;

case "":

break;

default:

htmlName = name;

var attrs =

$(elem$[0].attributes).each(function (name, value) {

htmlAttrs[name] = value;

});

break;

}

var role = elem$.attrNS('role', settings.TTMLMetaNamespace);

if (role) htmlClass += ((role) + ' ');

 

var classAttr = elem$.attrNS('class', settings.XHTMLNamespace);

if (classAttr) htmlClass += ((classAttr) + ' ');

 

// hack until display:ruby on other elements works.

if (role == "x-ruby") htmlName = ("ruby");

if (role == "x-rubybase") htmlName = ("rb");

if (role == "x-rubytext") htmlName = ("rt");

 

// convert image based captions here; and move the text into its alt.

// if I could get inline CSS to work div's then this would be set as style.

var image = elem$.getAttr('image');

if (image != null) {

htmlName = "img"

}

 

if (htmlName != "") {

translation$ = $('<' + htmlName + '>').defaultStyle().addClass(htmlClass);

// move ID's over. Use trackIdPrefix to ensure there are no name clases on id's already in target doc.

var id = elem$.attrNS('id', $.xmlNS);

if (id) translation$.attr('id', settings.trackIdPrefix + id);

// copy style from element over to html, translating into CSS as we go

translateStyle(elem$, translation$, tick);

// if we are copying over html elements, then copy any attributes too.

for (attr in htmlAttrs) {

translation$.attr(attr, htmlAttrs[attr]);

}

if (image != null) {

translation$.attr("src", image);

translation$.attr("alt", elem$.text());

}

}

}

return translation$;

}

//convert the element if it is in the region, then recurse into its contents.

// if it ends up with no children, then we dont add it to the region.

function prune(elem$, regionId, tick) {

var clone$ = $();

prunInvokedTimes++;

if (isInRegion(elem$, regionId)) {

clone$ = translate(elem$, tick);

if (clone$.length == 0) return clone$;

 

elem$.contents().each(function () {

if (this.nodeType == $.NodeType.TEXT_NODE) {

clone$.append(document.createTextNode(this.data));

} else {

prune($(this), regionId, tick).appendTo(clone$);

}

});

}

return clone$;

}

2.3 Sample Code

The following code snippet unrolls using TTMLEvents and getCuesAtTime.This then makes it easier to use the <track> API's and also uses the same interface for WebVTT.

// initializing the caption Array that will contains the TTMLEvents

var captionArray = new Array();

var numberOfcalls = 0;

 

// Parsing over the TTMLEVENT to select all the overlapping cues

 

for (var i = 0, max = TTMLEvents.length; i < max; i++) {

if (TTMLEvents[i].elemScope == root$)

continue;

var cues = getCuesAtTime(TTMLEvents[i].tick, TTMLEvents[i].elemScope);

if (i > 0) {

for (var pastCuesIndex = i - 1; pastCuesIndex >= 0; pastCuesIndex--) {

if (TTMLEvents[pastCuesIndex].elemScope == root$ || TTMLEvents[pastCuesIndex].elemScope == TTMLEvents[i].elemScope) {

continue;

}

var overlappingCues = getCuesAtTime(TTMLEvents[i].tick, TTMLEvents[pastCuesIndex].elemScope);

 

if (overlappingCues.length != 0) {

cues.push(overlappingCues[0]);

}

else {

break;

}

}

}

 

//Populating the 'captions' array with all the TTML Events based on their start and their end time

for (var j = 0, cueCount = cues.length; j < cueCount; j++) {

numberOfcalls++;

captionArray.push({

start: TTMLEvents[i].tick,

end: (i + 1 < max) ? TTMLEvents[i + 1].tick : settings.mediaDuration,

id: "caption" + (captionArray.length + 1),

caption: cues[j]

});

}

}

3 WebVTT

3.1 Web Video Text Tracks (WebVTT) applied to HTML5

The WebVTT format (Web Video Text Tracks) is a format intended for marking up external text track resources.

3.2 WebVTT file format

A WebVTT file is simply a text file with a .vtt extension that follows a certain format.

A WebVTT file takes the following format:

WEBVTT FILE

[idstring]

[hh:]mm:ss.msmsms --> [hh:]mm:ss.msmsms [cue settings]

TextLine1

TextLine2

….

As you can see, the file needs to start with a WEBVTT FILE header followed by details of each cue that's specified within the video itself. (The idstring can be one or more characters that does not contain -> or \r, \n or \r\n).

Using the above format, let's take a look at the following sample WebVTT file:

WEBVTT FILE

1

00:00:03.500 --> 00:00:05.000 D: vertical A: start

Everyone wants the most from life

2

00:00:06.000 --> 00:00:09.000 A: start

Like internet experiences that are rich <b>and</b> entertaining

This particular example above defines two cues, each of which is, and must, be separated by at least one single line. The timings are pretty self-explanatory, as are the line texts.

There are a number of settings that can be specified for a subtitle cue which affect how it is displayed on the video:

- D: vertical | vertical-lr - specifies the direction

- L: XX% - specifies the line position relative to the video frame

- A: start | middle | end - indicates the text alignment

- T: XX% - specifies the text position

- S: XX% - specifies the text size

For a more comprehensive view of these settings, see cue settings.

As mentioned above, you can also add styling to the text within the cue itself. The example above uses a simple <b> element but CSS classes can also be added:

3

00:00:11.000 --> 00:00:14.000 A: end

Phone conversations where people truly <c.highlight>connect</c>

If you'd prefer that the text would appear step-by-step (as in karaoke) you can simply add different timings in the cue text itself:

00:00:11.000 --> 00:00:14.000 A: end

Phone<00:00:11.000> conversations<00:00:12.000> where people<00:00:13.

These are the basics, although there are some other cue text formatting options available.

The following sample shows how to process Cue texting.

this.getCueText = function (cueObj) {

// Let cue text be the empty string.

var cueText = '';

 

// Cue text loop: If position is past the end of input, then discard cue and jump to the step labeled cue text processing.

while (true) {

if (this.hasFileEnded())

return false;

 

// Collect a sequence of characters that are not U+000D CARRIAGE RETURN (CR) or U+000A LINE FEED (LF) characters. Let line be those characters, if any.

var line = this.getLine();

 

// If line is the empty string, then jump to the step labeled cue text processing.

if ((line == null) || (line == ''))

break;

 

// If cue text is not empty, append a U+000A LINE FEED (LF) character to cue text.

if ((cueText != null) && (cueText != ''))

cueText += '\n';

 

// Let cue text be the concatenation of cue text and line.

cueText += line;

 

// Return to the step labeled cue text loop.

}

 

cueObj.text = cueText;

return true;

};

 

4 Sample Code

The following code snippet unrolls using cueEvents and getCuesAtTime.This then makes it easier to use the <track> API's and also uses the same interface for WebVTT,SRT ..

// initializing the caption Array that will contains the cueEvents

var captionArray = new Array();

//Populating the 'captions' array with all the cueEvents based on their start and their end time

for(var i = 0, max = cueEvents.length; i < max; i++) {

var cues = getCuesAtTime(cueEvents[i], cueObjs);

 

for (var j = 0, cueCount = cues.length; j < cueCount; j++) {

captionArray.push({

start: cueEvents[i] * 1000,

end: (i + 1 < max) ? (cueEvents[i + 1] * 1000) : settings.mediaDuration,

id: "caption" + (captionArray.length + 1),

caption: cues[j]

});

}

}

 

return {

captions: captionArray,

// The following are only used in TTML parser

descriptions: null,

navigation: null,

xml: ''

};

}

5 Getting Started

The following is a general description of how to complete Video Captioning using two different captioning formats:

Prerequisites

Since the WebVTT\TTML demo is based on HTML5 the following requirements must be installed before it is able to run on a local machine are:

- Windows 7

- Microsoft Internet Explorer 9 or Latest version of other browsers (Eg:Google Chrome, Firefox ,Safari)

- For older browsers the demo uses a Silverlight control so you might be asked to install Silverlight if it is not already installed on your machine.

- Internet Information Services (IIS 7.0)

 

 

5.1.1 Installing WebVTT\TTML Demo

To set up the WebVTT\TTML demo in your local machine, follow these steps:

- Set up IIS 7.0 here

- Copy the entire directory structure under inetpub/wwwroot

- Create a new Web site

- Call the choose-player.html on the browser

A screenshot of the WebVTT\TTML Demo website that lets you select avideo captioning format

 

5.1.2 WebVTT\TTML DEMO WORKING Process

To use WebVTT or TTML video captioning formats for the same video:

- Choose a captioning format buttons on the top as shown in the selected area.

- Select the Closed Captioning and Audio Descriptions from the CC and AD menu buttons from the video player as shown in the selected area.

- Click the links on the right, to view the captioning syntax in use as shown in the selected area.