Use cases for timed tracks rendered over video by the UA

2010-07-01T14:02:54Z

ArkBlitz:

This page contains examples of features where timed tracks are rendered over video by user agents natively.

Return to [[timed tracks]] home page.

== 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">
<img src="http://img3.imageshack.us/img3/6743/vlcsnap090208083027134xq5.png">
<img src="http://junkyard.damowmow.com/423" title="placed under speaker">
<img src="http://junkyard.damowmow.com/424" title="placed under speaker">
<img src="http://joeclark.org/access/crtc/CRTC-2008/reply/images/CCfoto-CBC-CC-ST-ManWithoutaFace.jpg" title="things gone wrong">
<img src="http://dashiva.net/misc/vertical_karaoke.jpg">

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

This example shows that we need line-based positioning: http://www.youtube.com/watch?v=bw5JBWdaUHI#t=0m12s

This example shows a case where animated positioning and angular change are highly recommended to achieve a desired style: http://www.youtube.com/watch?v=Qz2F-H7IHFM

=== 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">
<img src="http://junkyard.damowmow.com/421" alt="italics and blod used together">

=== 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">
<img src="http://dashiva.net/misc/bouncing_karaoke.jpg">

=== Multiple voices ===

<img src="http://philip.html5.org/misc/portal-caption.jpg">
<img src="http://joeclark.org/access/crtc/CRTC-2008/reply/images/BCCS_unbelievably_wordy_speaker_ID_1.jpg" title="provides speaker names">
<img src="http://dashiva.net/misc/multiple_speakers.jpg">

Karaoke with color coded voice, where parts sung together have a unique color ([http://www.youtube.com/watch?v=5tOxfjHLK-A source]):

<img src="http://bayimg.com/image/iamdlaaci.jpg" title="Jacky sings">
<img src="http://bayimg.com/image/iamdpaaci.jpg" title="Landy sings">
<img src="http://bayimg.com/image/jamdbaaci.jpg" title="Jacky+Landy sing">

=== 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">
[http://www.screencast.com/users/dro/folders/Jing/media/628d4d8f-f96c-4444-b853-a27645cf6ebf <img src="http://junkyard.damowmow.com/415" title="(uses unicode U+266B ♫ or U+266A ♪♪)">]
<img src="http://junkyard.damowmow.com/422">

=== Background emphasis ===

This is from a mobile phone and needs particular contrast and visibility.

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

=== Multiple colors ===

Colors are often used in closing comments to signify the author of the captions.

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

=== Legal notices ===
<img src="http://fifty-strength.com/images/freestuff/backgrounds/COPYRIGHT_WARNING_blk.gif">

=== Watermarks ===
<img src="http://img62.imageshack.us/img62/1985/natgeowild01.jpg">

=== Informative ===
<img src="http://www.dmst.aueb.gr/dds/pubs/jrnl/2004-CG-ITV/html/CS04_files/image002.jpg">
<img src="http://www.julyseventh.co.uk/images/sky-news-aldgate-east-fatalities.jpg">
<img src="http://informitv.com/images/articles/redbee/Piero-02.jpg">

=== Formal documentation for real-world captioning ===

* [http://joeclark.org/access/captioning/CBC/images/CBC-captioning-manual-EN.pdf CBC captioning manual] requires:
** minor control over position
** word-level italics control
** frame-level timing

WHATWG Wiki - User contributions [en]

Use cases for timed tracks rendered over video by the UA