A user account is required in order to edit this wiki, but we've had to disable public user registrations due to spam.

To request an account, ask an autoconfirmed user on Chat (such as one of these permanent autoconfirmed members).

Difference between revisions of "Timed tracks"

From WHATWG Wiki
Jump to navigation Jump to search
(→‎Formatting: both color and font seems necessary)
Line 153: Line 153:
==== Formatting ====
==== Formatting ====

* no font or colour formatting seems to be needed
* 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).
* no inline emphasis seems to be needed
* no inline emphasis seems to be needed
* support for bidi is critical
* support for bidi is critical

Revision as of 04:08, 20 April 2010

I'm starting to look at the feedback sent over the past few years for augmenting audio and video with additional timed tracks such as subtitles, captions, audio descriptions, karaoke, slides, lyrics, ads, etc. One thing that would be really helpful is if we could get together a representative sample of typical uses of these features, as well as examples of some of the more extreme uses.

If anyone has any examples, please add them below. Links to either videos or stills showing subtitles (e.g. on TVs, DVDs, etc) are both good. I'd like to get a representative sample so that we can deteremine what features are critical, and what features can be punted for now. —Hixie 21:07, 16 April 2010 (UTC)

Static Examples

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


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


<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">


<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">

Musical Notes

<img src="http://junkyard.damowmow.com/415">

Important line feeds

<img src="http://www.craphound.com/images/itcrowdleetsubs.jpg"> <img src="http://joshkinberg.com/blog/files/debatewars.jpg"> <img src=""> <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=""> <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">

Chapter Markers

<img src="http://images.apple.com/quicktime/tutorials/images/screenshot-chaptertrack1.jpg"> <img src="http://www.arguingwithmyself.com/wordpress/wp-content/uploads/ted-video-player.png"> <img src="http://junkyard.damowmow.com/414"> <img src="http://www.davemeyerson.com/img/port/big/flash/VideoPlayer_01.jpg"> <img src="http://www.kenstone6.net/fcp_homepage/images_hdv_to_prores_with_chapter_markers_stone/11_hdv_prores_chapter_markers_stone.jpg"> <img src="http://www.kenstone6.net/fcp_homepage/images_hdv_to_prores_with_chapter_markers_stone/13_hdv_prores_chapter_markers_stone.jpg"> <img src="http://www.componentone.com/newimages/Products/ScreenShots/StudioWPF/C1MediaPlayer/MediaPlayer_ChapterList.png"> <img src="http://maccreate.com/uploads/2009/06/200906162256.jpg"> <img src="http://simplemoviex.com/SimpleMovieX/documentation/handrake,%20itunes,%20metadata.picChapter.jpeg"> <img src="http://www.js8media.com/moviechapterizer/files/page3_3.png"> <img src="http://www.macupdate.com/images/screens/uploaded/29332_sm.png"> <img src="http://www.veotag.com/img/whatis/screen.jpg">

Timed Annotations

<img src="http://www.techsmith.com/img/learn/camtasia/6/custom-callouts/callout_customex.jpg"> <img src="http://farm4.static.flickr.com/3107/2375923033_ee4309922a.jpg"> <img src="http://junkyard.damowmow.com/417"> <img src="http://cache.gawkerassets.com/assets/images/17/2009/07/340x_bubbleply.jpg">

Ticker Text

<img src="http://media.rgemonitor.com/images/blogs/yahoo_finance_tech_ticker_6_18_09_1.jpg"> <img src="http://img.youtube.com/vi/pWe7wTVbLUU/0.jpg">


animated Lyrics in HTML5

<img src="http://svg-wow.org/audio/animated-lyrics_poster.png"> <img src="http://www.mobile-mir.com/images/LyricShow.png"> <img src="http://lh4.ggpht.com/itswaps/R2Qmlc9KnMI/AAAAAAAAAb8/GrPzd1MChQc/4_minilyrics1%5B6%5D"> <img src="http://images.intomobile.com/wp-content/uploads/2008/01/iphone-lyrics-display-karaoke-mode.jpg" title="seems to be an iphone app with video with lyrics">

Linguistic Markup

<img src="http://www.ling.canterbury.ac.nz/jen/onzeminer/PraatTextGrid.jpg"> <img src="http://junkyard.damowmow.com/416">

Features for which we have no examples

(Are these myths?)

  • Individual words being emphasised
  • More complicated inline formatting

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


Subtitle/Caption/Karaoke File Format

Some Background Reading


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


  • 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.)


  • 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).
  • no inline emphasis seems to be needed
  • support for bidi is critical
  • some cases use ruby
  • 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?


  • 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