Timed tracks

This page contains examples of use cases that user agents are likely to be required to support natively in the first version of timed track features in HTML.

See also use cases for timed tracks rendered over video by the UA use cases for API-level access to timed tracks.

Static Examples

These are categorised by what features they demonstrate that is most interesting.

Positioning

<img src="http://philip.html5.org/misc/eva-captions.jpg">

Ruby

<img src="http://graphics8.nytimes.com/images/blogs/screens/06subs.jpg"> <img src="http://4.bp.blogspot.com/_JDuyiEFkBc0/R5wEOwaqiBI/AAAAAAAAAhQ/08eKZHlPR2k/s400/yako13.jpg" title="also shows karaoke">

Italics or other inline emphasis

<img src="http://dashiva.net/misc/1271498287684.jpg"> <img src="http://daed.site24.se/Screenshot20100420222809422.jpg">

Karaoke

<img src="http://i.ytimg.com/vi/5ZbQMq6q9yw/0.jpg"> <img src="http://img.youtube.com/vi/xMPJfStmcJY/0.jpg" title="also shows multiple voices"> <img src="http://i2.ytimg.com/vi/dTMAiX0ShuM/0.jpg" title="also shows newlines"> <img src="http://pcwin.com/media/images/screen/68930-singalong_player.jpg">

Multiple voices

<img src="http://philip.html5.org/misc/portal-caption.jpg">

Important line feeds

<img src="http://www.craphound.com/images/itcrowdleetsubs.jpg"> <img src="http://joshkinberg.com/blog/files/debatewars.jpg"> <img src="http://208.71.113.236/final/2/8/2831661/358818.jpg"> <img src="http://cdn.fd.uproxx.com/wp-content/uploads/2009/03/letheright1_or.jpg"> <img src="http://damowmow.com/temp/mpc-storm-codec.JPG">

Plain text

<img src="http://www.insidesocal.com/tomhoffarth/Miss-Teen-South-Carolina-Subtitles.jpg"> <img src="http://dolphy-tech.net/files/subtitles_mkv.png"> <img src="http://filegets.com/screenshots/full/subtitle-player_15496.jpg"> <img src="http://www.bbc.co.uk/blogs/bbcinternet/img/iplayer_subtitles_russia.jpg"> <img src="http://startupmeme.com/wp-content/uploads/2008/08/youtubecaptions-thumb1.png"> <img src="http://1.bp.blogspot.com/_EuCTzLdp3vE/SYtn40aQjDI/AAAAAAAACXY/95EgLfOttiA/s400/video_captions.jpg"> <img src="http://208.71.113.236/final/2/8/2852791/405302.jpg"> <img src="http://jeanviet.info/astimg/sous-titre-divx.jpg"> <img src="http://www.mobiletopsoft.com/images/news/tcpmp_gora_playback_subtitles_2.jpg"> <img src="http://www.tiresias.org/research/guidelines/television/images/subtitles2.jpg"> <img src="http://img117.exs.cx/img117/5200/AnimalPlanetTV.jpg"> <img src="http://duhn.net/wp-content/uploads/dtt-tv2-subtitles.jpg"> <img src="http://www.hack7mc.com/wp-content/uploads/2009/04/earthstoodstill.png"> <img src="http://img.youtube.com/vi/nqGOOTjxTZ0/0.jpg"> <img src="http://aboutonlinetips.com/wp-content/uploads/2008/12/subtitles-in-movie.jpg"> <img src="http://thepinksylphide.com/images/compare/cardcaptor-sakura-dvds/AnimeCartoon-Subtitle-1.png"> <img src="http://bbsimg.ngfiles.com/1/17187000/ngbbs48a5483851c0d.jpg"> <img src="http://i.msdn.microsoft.com/ms971317.atg_ccandaudiodesc_01(en-us,MSDN.10).gif"> <img src="http://hsivonen.iki.fi/screen/subtitles.jpg"> <img src="http://junkyard.damowmow.com/415" title="(uses unicode U+266B ♫ or U+266A ♪♪)">

Formal documentation for real-world captioning

• CBC captioning manual requires:
  • minor control over position
  • word-level italics control
  • frame-level timing

Dynamic Examples

Automatic text placement

This example shows how multiple segments with overlapping times should be automatically placed so as to not overlap: http://www.youtube.com/watch?v=xG9KluukpJI#t=2m40

Requirements

Subtitle/Caption/Karaoke File Format

Structure

• multiple voices
• per-segment time in/out cues
• inline time cues for karaoke
• bidi, newlines, ruby, italics
• position

Positioning

• vertical: top/middle/bottom/% (default bottom)
• horizontal: left/center/right/% (default center)
• display modes: replace previous text, scroll previous text up and add to bottom
• multiple voices placed in adjacent places would need to automatically stack so they don't overlap
• multiple segments with overlapping times would need to be stacked so they don't overlap

(Percentage positions would work like background-position in CSS.)

Formatting

Inline

• text should be bidi-aware
• some cases use ruby
• some cases use italics

Global

• color of background/text/outline is needed for readability on different types of video.
• webfonts is needed to provide high quality subtitles in some non-Latin languages (e.g. Chinese where a suitable font is unlikely to be available even on Chinese computer systems).
• providing a pseudo-element to style each voice would likely be sufficient for authors who want overall formatting control (this would also allow user overrides conveniently)

Audio Descriptions File Format

• Just timing and text?

HTML

• an API and UI for exposing what timed tracks exist and selectively enabling/disabling them

• format for external subtitles/captions
• format for external audio descriptions
• some mechanism for text in the page to be used instead of external files, for subtitles/captions or audio descriptions
• an API to allow a segment to be dynamically inserted into the rendering on the fly

• an API for exposing what the currently relevant segments of each timed track are
• a way to hook into this mechanism to advance slides

• native rendering of subtitles
• native rendering of audio descriptions
• native rendering of multiple audio or video tracks, to allow pre-recorded audio descriptions to be mixed in and sign language video to be overlaid
• a way to hook into this to manually render timed tracks