https://wiki.whatwg.org/api.php?action=feedcontributions&user=ArkBlitz&feedformat=atom
WHATWG Wiki - User contributions [en]
2024-03-29T11:41:36Z
User contributions
MediaWiki 1.39.3
https://wiki.whatwg.org/index.php?title=Use_cases_for_timed_tracks_rendered_over_video_by_the_UA&diff=5012
Use cases for timed tracks rendered over video by the UA
2010-07-01T14:02:54Z
<p>ArkBlitz: </p>
<hr />
<div>This page contains examples of features where timed tracks are rendered over video by user agents natively.<br />
<br />
Return to [[timed tracks]] home page.<br />
<br />
== Static Examples ==<br />
<br />
These are categorised by what features they demonstrate that is most interesting.<br />
<br />
=== Positioning ===<br />
<br />
<img src="http://philip.html5.org/misc/eva-captions.jpg"><br />
<img src="http://img3.imageshack.us/img3/6743/vlcsnap090208083027134xq5.png"><br />
<img src="http://junkyard.damowmow.com/423" title="placed under speaker"><br />
<img src="http://junkyard.damowmow.com/424" title="placed under speaker"><br />
<img src="http://joeclark.org/access/crtc/CRTC-2008/reply/images/CCfoto-CBC-CC-ST-ManWithoutaFace.jpg" title="things gone wrong"><br />
<img src="http://dashiva.net/misc/vertical_karaoke.jpg"><br />
<br />
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<br />
<br />
This example shows that we need line-based positioning: http://www.youtube.com/watch?v=bw5JBWdaUHI#t=0m12s<br />
<br />
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<br />
<br />
=== Ruby ===<br />
<br />
<img src="http://graphics8.nytimes.com/images/blogs/screens/06subs.jpg"><br />
<img src="http://4.bp.blogspot.com/_JDuyiEFkBc0/R5wEOwaqiBI/AAAAAAAAAhQ/08eKZHlPR2k/s400/yako13.jpg" title="also shows karaoke"><br />
<br />
=== Italics or other inline emphasis ===<br />
<img src="http://dashiva.net/misc/1271498287684.jpg"><br />
<img src="http://daed.site24.se/Screenshot20100420222809422.jpg"><br />
<img src="http://junkyard.damowmow.com/421" alt="italics and blod used together"><br />
<br />
=== Karaoke ===<br />
<img src="http://i.ytimg.com/vi/5ZbQMq6q9yw/0.jpg"><br />
<img src="http://img.youtube.com/vi/xMPJfStmcJY/0.jpg" title="also shows multiple voices"><br />
<img src="http://i2.ytimg.com/vi/dTMAiX0ShuM/0.jpg" title="also shows newlines"><br />
<img src="http://pcwin.com/media/images/screen/68930-singalong_player.jpg"><br />
<img src="http://dashiva.net/misc/bouncing_karaoke.jpg"><br />
<br />
=== Multiple voices ===<br />
<br />
<img src="http://philip.html5.org/misc/portal-caption.jpg"><br />
<img src="http://joeclark.org/access/crtc/CRTC-2008/reply/images/BCCS_unbelievably_wordy_speaker_ID_1.jpg" title="provides speaker names"><br />
<img src="http://dashiva.net/misc/multiple_speakers.jpg"><br />
<br />
Karaoke with color coded voice, where parts sung together have a unique color ([http://www.youtube.com/watch?v=5tOxfjHLK-A source]):<br />
<br />
<img src="http://bayimg.com/image/iamdlaaci.jpg" title="Jacky sings"><br />
<img src="http://bayimg.com/image/iamdpaaci.jpg" title="Landy sings"><br />
<img src="http://bayimg.com/image/jamdbaaci.jpg" title="Jacky+Landy sing"><br />
<br />
=== Important line feeds ===<br />
<br />
<img src="http://www.craphound.com/images/itcrowdleetsubs.jpg"><br />
<img src="http://joshkinberg.com/blog/files/debatewars.jpg"><br />
<img src="http://208.71.113.236/final/2/8/2831661/358818.jpg"><br />
<img src="http://cdn.fd.uproxx.com/wp-content/uploads/2009/03/letheright1_or.jpg"><br />
<img src="http://damowmow.com/temp/mpc-storm-codec.JPG"><br />
<br />
=== Plain text ===<br />
<br />
<img src="http://www.insidesocal.com/tomhoffarth/Miss-Teen-South-Carolina-Subtitles.jpg"><br />
<img src="http://dolphy-tech.net/files/subtitles_mkv.png"><br />
<img src="http://filegets.com/screenshots/full/subtitle-player_15496.jpg"><br />
<img src="http://www.bbc.co.uk/blogs/bbcinternet/img/iplayer_subtitles_russia.jpg"><br />
<img src="http://startupmeme.com/wp-content/uploads/2008/08/youtubecaptions-thumb1.png"><br />
<img src="http://1.bp.blogspot.com/_EuCTzLdp3vE/SYtn40aQjDI/AAAAAAAACXY/95EgLfOttiA/s400/video_captions.jpg"><br />
<img src="http://208.71.113.236/final/2/8/2852791/405302.jpg"><br />
<img src="http://jeanviet.info/astimg/sous-titre-divx.jpg"><br />
<img src="http://www.mobiletopsoft.com/images/news/tcpmp_gora_playback_subtitles_2.jpg"><br />
<img src="http://www.tiresias.org/research/guidelines/television/images/subtitles2.jpg"><br />
<img src="http://img117.exs.cx/img117/5200/AnimalPlanetTV.jpg"><br />
<img src="http://duhn.net/wp-content/uploads/dtt-tv2-subtitles.jpg"><br />
<img src="http://www.hack7mc.com/wp-content/uploads/2009/04/earthstoodstill.png"><br />
<img src="http://img.youtube.com/vi/nqGOOTjxTZ0/0.jpg"><br />
<img src="http://aboutonlinetips.com/wp-content/uploads/2008/12/subtitles-in-movie.jpg"><br />
<img src="http://thepinksylphide.com/images/compare/cardcaptor-sakura-dvds/AnimeCartoon-Subtitle-1.png"><br />
<img src="http://bbsimg.ngfiles.com/1/17187000/ngbbs48a5483851c0d.jpg"><br />
<img src="http://i.msdn.microsoft.com/ms971317.atg_ccandaudiodesc_01(en-us,MSDN.10).gif"><br />
<img src="http://hsivonen.iki.fi/screen/subtitles.jpg"><br />
[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 ♪♪)">]<br />
<img src="http://junkyard.damowmow.com/422"><br />
<br />
=== Background emphasis ===<br />
<br />
This is from a mobile phone and needs particular contrast and visibility.<br />
<br />
<img src="http://junkyard.damowmow.com/425"><br />
<br />
=== Multiple colors ===<br />
<br />
Colors are often used in closing comments to signify the author of the captions.<br />
<br />
<img src="http://junkyard.damowmow.com/426"><br />
<img src="http://junkyard.damowmow.com/428"><br />
<br />
=== Legal notices ===<br />
<img src="http://fifty-strength.com/images/freestuff/backgrounds/COPYRIGHT_WARNING_blk.gif"><br />
<br />
=== Watermarks ===<br />
<img src="http://img62.imageshack.us/img62/1985/natgeowild01.jpg"><br />
<br />
=== Informative ===<br />
<img src="http://www.dmst.aueb.gr/dds/pubs/jrnl/2004-CG-ITV/html/CS04_files/image002.jpg"><br />
<img src="http://www.julyseventh.co.uk/images/sky-news-aldgate-east-fatalities.jpg"><br />
<img src="http://informitv.com/images/articles/redbee/Piero-02.jpg"><br />
<br />
=== Formal documentation for real-world captioning ===<br />
<br />
* [http://joeclark.org/access/captioning/CBC/images/CBC-captioning-manual-EN.pdf CBC captioning manual] requires:<br />
** minor control over position<br />
** word-level italics control<br />
** frame-level timing</div>
ArkBlitz