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="fooCaptions.srt" srclang="en"></track>
<track kind="descriptions" src="fooDesciptions.srt" srclang="en"></track>
<track kind="chapters" src="fooChapters.srt" srclang="en"></track>
<track kind="subtitles" src="fooSubtitles_de.srt" srclang="de"></track>
<track kind="subtitles" src="fooSubtitles_en.srt" srclang="en"></track>
<track kind="subtitles" src="fooSubtitles_ja.srt" srclang="ja"></track>
<track kind="subtitles" src="fooSubtitles_oz.srt" srclang="oz"></track>
<track kind="metadata" src="keyStage3.srt" srclang="en" label="Key Stage 3"></track>
<track kind="metadata" src="keyStage4.srt" srclang="en" label="Key Stage 4"></track>
<track kind="metadata" src="keyStage5.srt" srclang="en" label="Key Stage 5"></track>
</video>

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:"http://en.wikipedia.org/wiki/Fish", 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; }

Documentation

The track element:
http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html#the-track-element

WebSRT:
http://www.whatwg.org/specs/web-apps/current-work/websrt.html

Timed track formats:
http://wiki.whatwg.org/wiki/Timed_track_formats

Timed track use cases:
http://wiki.whatwg.org/wiki/Timed_tracks

About these ads

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:

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s