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

Use cases for timed tracks rendered over video by the UA: Difference between revisions

From WHATWG Wiki
Jump to navigation Jump to search
 
(22 intermediate revisions by 5 users not shown)
Line 13: Line 13:
<img src="http://junkyard.damowmow.com/423" title="placed under speaker">
<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://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 ===
=== Ruby ===
Line 29: Line 37:
<img src="http://i2.ytimg.com/vi/dTMAiX0ShuM/0.jpg" title="also shows newlines">
<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://pcwin.com/media/images/screen/68930-singalong_player.jpg">
<img src="http://dashiva.net/misc/bouncing_karaoke.jpg">


=== Multiple voices ===
=== Multiple voices ===


<img src="http://philip.html5.org/misc/portal-caption.jpg">
<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 ===
=== Important line feeds ===
Line 65: Line 82:
[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 ♪♪)">]
[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">
<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 ===
=== Formal documentation for real-world captioning ===
Line 73: Line 114:
** frame-level timing
** frame-level timing


== Dynamic Examples ==


=== Automatic text placement ===
== Video Examples ==
 
See http://www.dcmp.org/captioningkey/types_methods_styles.html and the pages following this one (click on the next topic at the bottom)


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 is now at http://www.dcmp.org/captioningkey/text.html

Latest revision as of 11:14, 1 October 2012

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

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


Video Examples

See http://www.dcmp.org/captioningkey/types_methods_styles.html and the pages following this one (click on the next topic at the bottom)

This is now at http://www.dcmp.org/captioningkey/text.html