HTML 5 video — now with tracks

Ian Hickson has added to the HTML draft standard a specification for timed tracks.

This provides a simple, standardised way to add timed auxiliary content to video.

This spec has huge potential: timed cues for arbitrary content synchronised with media playback – as well as simpler subtitle/caption/description use cases. Once again the web becomes less static and – maybe – more like a broadcast medium.

A video with tracks might look like this:

<video src="foo.ogv">
<track kind="captions" src="" srclang="en"></track>
<track kind="descriptions" src="" srclang="en"></track>
<track kind="chapters" src="" srclang="en"></track>
<track kind="subtitles" src="" srclang="de"></track>
<track kind="subtitles" src="" srclang="en"></track>
<track kind="subtitles" src="" srclang="ja"></track>
<track kind="subtitles" src="" srclang="oz"></track>
<track kind="metadata" src="" srclang="en" label="Key Stage 3"></track>
<track kind="metadata" src="" srclang="en" label="Key Stage 4"></track>
<track kind="metadata" src="" srclang="en" label="Key Stage 5"></track>

Tracks use the WebSRT data format which — for cue in a kind = “metadata” track — might look like this:

  10:00.000 --> 20:00.000
  {title:"Fish", moreinfo:"", image:"images/fish.jpg"}

The spec also defines CSS extensions, like this:

  ::cue { color: green; font: 1em sans-serif; }
  ::cue-part(1) { font: bold 1em serif; }


The track element:


Timed track formats:

Timed track use cases:

About Sam Dutton

I am a Developer Advocate for Google Chrome. I grew up in rural South Australia, went to university in Sydney, and have lived since 1986 in London, England. Twitter: @SW12
This entry was posted in HTML, Uncategorized, WHATWG and tagged , , , , , , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.