Over a million developers have joined DZone.

New Element Added To HTML5

DZone 's Guide to

New Element Added To HTML5

· Web Dev Zone ·
Free Resource
A new HTML5 element was noticed today on the WHATWG twitter feed.  The <track> element brings an important feature to HTML5 media - text and markers.  Along with chapter markers and metadata, the <track> element lets web authors put subtitles and captions in their HTML5 media elements.  

The <track> element may be used as a child of a media element, before any flow content.  The element provides the means for authors to specify explicit external timed tracks for media elements. It does not represent anything by itself.  A media element can have a group (called a list) of associated timed tracks.  The timed tracks corresponding to <track> element children of the media element (in tree order) are one of three ways in which timed tracks are sorted.  

The kind attribute (an enumerated attribute) determines how the track is handled by the user agent, and it is represented by a string.  Here are the five possible strings for a timed track:

  • Subtitles: Translation of the dialogue, suitable for when the sound is available but not understood (e.g. because the user does not understand the language of the media resource’s soundtrack).
  • Captions: Transcription of the dialogue, suitable for when the soundtrack is unavailable (e.g. because it is muted or because the user is deaf).
  • Descriptions: Textual descriptions of the video component of the media resource, intended for audio synthesis when the visual component is unavailable (e.g. because the user is interacting with the application without a screen while driving, or because the user is blind).
  • Chapters: Chapter titles, intended to be used for navigating the media resource.
  • Metadata: Tracks intended for use from script.

Here is the DOM interface for the <track> element:
interface HTMLTrackElement : HTMLElement {
attribute DOMString kind;
attribute DOMString label;
attribute DOMString src;
attribute DOMString srclang;

readonly attribute TimedTrack track;

Here is a list of stages for HTML5 captions that have recently been tweeted by the WHATWG:

Captions -
Stage 1: the <track> element
Stage 2: the IDL additions
Stage 3: defining what a timed track and a timed track cue are
Stage 4: preparing the ground for timed tracks updating during media playback
Stage 5: preparing the ground for timed tracks loading, firing 'waiting' or 'playing' events as appropriate
Stage 5 mark II: let's make timed tracks only delay initial load, not delay subsequent playback if loaded later
Stage 6: ground work for loading tracks dynamically
Stage 7: track.track.
Stage 8: MIME registration for text/websrt and minor edits around that

For an example media player that could benefit from the <track> element, check out this multi-lingual HTML5 media player.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}