Timed tracks

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.

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

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

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"> <img src="http://www.vccafe.com/wp-content/uploads/2007/12/infoply.png">

Ticker Text

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

Lyrics

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

Requirements

Subtitle/Caption/Karaoke File Format

Some Background Reading

• Rules given to professional captioners
• CBC captioning manual
• most varied experiments with time-aligned "text" by company Mojiti (now out of biz)

Structure

• multiple voices
• per-segment time in/out cues
• inline time cues for karaoke
• bidi, newlines, ruby
• 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

• 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?

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