Accessibility/Video Text Format Comparison

From MozillaWiki
< Accessibility
Revision as of 00:31, 5 July 2010 by Silviapfeiffer (talk | contribs) (ups had to reference style in TTML)
Jump to navigation Jump to search

On this page we will find a comparison of time-aligned text example files for several typical application areas. The example files are written in TTML, WebSRT and WMML and try to determine the simplicity/complexity of authoring these formats and whether they fall short in some requirements.

Subtitles

Simple, unformatted subtitles

TTML: 

<tt xml:lang="en-US" xmlns="http://www.w3.org/ns/ttml">
  <body>
    <div>
      <p begin="00:00:15.00" end="00:00:17.95">At the left we can see...</p>
      <p begin="00:00:18.16" end="00:00:20.08">At the right we can see the...</p>
      <p begin="00:00:20.11" end="00:00:21.96">...the head-snarlers</p>
      <p begin="00:00:21.99" end="00:00:24.36">Everything is safe.<br/>Perfectly safe.</p>
  </body>
</tt>

WebSRT: 

  1
  00:00:15.00" --> 00:00:17.95
  At the left we can see...

 2
  00:00:18.16 --> 00:00:20.08
  At the right we can see the...

  3
   00:00:20.11 --> 00:00:21.96
  ...the head-snarlers

  4
  00:00:21.99 --> 00:00:24.36
  Everything is safe.
  Perfectly safe.

WMML: 

<!DOCTYPE wmml>
<wmml lang="en-US" kind="subtitles">
  <cuelist>
    <cue start="00:00:15.00" end="00:00:17.95">At the left we can see...</cue>
    <cue start="00:00:18.16" end="00:00:20.08">At the right we can see the...</cue>
    <cue start="00:00:20.11" end="00:00:21.96">...the head-snarlers</cue>
    <cue start="00:00:21.99" end="00:00:24.36">Everything is safe.<br/>Perfectly safe.</cue>
  </cuelist>
</wmml>


Formatted subtitles with hyperlink

TTML: 

<tt xml:lang="de_DE" xmlns="http://www.w3.org/ns/ttml">
  <head>
    <styling xmlns:tts="http://www.w3.org/ns/ttml#styling">
      <style xml:id="s1"
        tts:backgroundColor=rgba(0,0,0,0.5)
      />
    </styling>
    <layout xmlns:tts="http://www.w3.org/ns/ttml#styling">
      <region xml:id="c1"
        style="s1"
        tts:textAlign="left"
      />
      <region xml:id="c2"
        style="s1"
        tts:textAlign="right"
      />
    </layout>
  </head>
  <body>
    <div>
      <p region="c1" begin="00:00:15.00" end="00:00:17.95">
        Auf der <span tts:fontStyle="italic">linken</span> Seite sehen wir...
      </p>
      <p region="c2" begin="00:00:18.16" end="00:00:20.08">
        Auf der <span tts:fontWeight="bold">rechten</span> Seite sehen wir die....
      </p>
      <p style="s1" begin="00:00:20.11" end="00:00:21.96">
        <!-- Can't provide a URL hyperlink in TTML :( -->
        ..die Enthaupter.
      </p>
      <p style="s1" begin="00:00:21.99" end="00:00:24.36">
        <!-- Can't just mark a section as emphasised - gotta chose how -->
        Alles ist <span tts:textDecoration="underline">sicher</span>.<br/>Vollkommen sicher.</p>
  </body>
</tt>

WebSRT: 

  1
  00:00:15.00" --> 00:00:17.95
  Auf der <i>linken</i> Seite sehen wir...

  2
  00:00:18.16 --> 00:00:20.08
  Auf der <b>rechten</b> Seite sehen wir die....

  3
  00:00:20.11 --> 00:00:21.96
  ...die <a href="http://orange.blender.org/blog/creative-commons-license-2/">Enthaupter</a>.

  4
  00:00:21.99 --> 00:00:24.36
  Alles ist <mark>sicher</mark>.
  Vollkommen sicher.

WMML: 

<!DOCTYPE wmml>
<wmml lang="de_DE" kind="subtitles">
  <head>
    <style type="text/css">
    wmml {
      background: rgba(0,0,0,0.5);
    }
    cue.c1 {
      text-align: left;
    }
    cue.c2 span {
      text-align: right;
    }
    </style>
  </head>
  <cuelist>
    <cue id="c1" start="00:00:15.00" end="00:00:17.95">
      Auf der <i>linken</i> Seite sehen wir...
    </cue>
    <cue id="c2" start="00:00:18.16" end="00:00:20.08">
      Auf der <b>rechten</b> Seite sehen wir die....
    </cue>
    <cue id="c3" start="00:00:20.11" end="00:00:21.96" style="color: red;">
      ...die <a href="http://orange.blender.org/blog/creative-commons-license-2/">Enthaupter</a>.
    </cue>
    <cue id="c4" start="00:00:21.99" end="00:00:24.36">
      Alles ist <mark>sicher</mark>.<br/>Vollkommen sicher.
    </cue>
  </cuelist>
</wmml>

Top-to-bottom rendered subtitles: 

<!DOCTYPE wmml>
<wmml lang="zh" kind="subtitles">
  <head>
    cue {
      writing-mode: tb-rl;
      margin: 2% 2% 2% 64%;
      text-align: right;
    }
  </head>
  <cuelist>
    <cue start="00:00:15.00" end="00:00:17.95">在左边我们可以看到...</cue>
    <cue start="00:00:18.16" end="00:00:20.08">在右边我们可以看到...</cue>
    <cue start="00:00:20.11" end="00:00:21.96">...捕蝇草械.</cue>
    <cue start="00:00:21.99" end="00:00:24.36">一切都安全.<br/>非常地安全.</cue>
  </cuelist>
</wmml>

2. Captions 

<!DOCTYPE wmml>
<wmml lang="en-US" kind="captions">
  <cuelist>
    <cue start="00:00:15.00" end="00:00:17.95" voice="Proog">At the left we can see...</cue>
    <cue start="00:00:18.16" end="00:00:20.08" voice="Proog">At the right we can see the...</cue>
    <cue start="00:00:20.11" end="00:00:21.96" voice="Proog">...the head-snarlers<br/>[Whizzing noises]</cue>
    <cue start="00:00:21.99" end="00:00:24.36" voice="Proog">Everything is safe.<br/>Perfectly safe.</cue>
  </cuelist>
</wmml>

3. Lyrics 

<!DOCTYPE wmml>
<wmml lang="en-US" kind="lyrics">
  <head>
    <title>Can't buy me Love</title>
    <meta name="m:title" content="Can't buy me love"/>
    <meta name="m:artist" content="Beatles, The"/>
    <meta name="m:author" cotent="Lennon & McCartney"/>
    <meta name="m:album" content="Beatles 1 - 27 #1 Singles"/>
    <meta name="m:by" content="Wooden Ghost"/>
  </head>
  <cuelist>
    <cue start="00:00:00.45" end="00:00:05.60">
      Can't <t at="00:00.75">buy</t> <t at="00:00.95">me</t> <t="00:01.40">love,</t> <t at="00:02.60">love,</t> <t at="00:03.95">love, </t> <t at="00:05.30">love</t>
    </cue>
    <cue start="00:00:05.90" end="00:00:08.90">
       Can't <t at="00:06.20">buy</t> <t at="00:06.40">me</t> <t at="00:06.70">love,</t> <t at="00:08.00">love</t>
    </cue>
    <cue start="00:00:09.35" end="00:00:11.55">
      I'll <t at="00:09.50">buy</t> <t at="00:09.75">you</t> <t at="00:10.15">a</t> <t at="00:10.25">dia</t><t at="00:10.50">mond</t> <t at="00:10.75">ring</t> <t at="00:11.10">my</t> <t at="00:11.40">friend</t>
    </cue>
  </cuelist>
</wmml>

4. Karaoke 

<!DOCTYPE wmml>
<wmml lang="en-US" kind="karaoke">
  <head>
    <title>Can't buy me Love</title>
    <meta name="m:title" content="Can't buy me love"/>
    <meta name="m:artist" content="Beatles, The"/>
    <meta name="m:author" cotent="Lennon & McCartney"/>
    <meta name="m:album" content="Beatles 1 - 27 #1 Singles"/>
    <meta name="m:by" content="Wooden Ghost"/>
    <style>
      t {
        font-weight: bold;
        color: yellow;
      }
    </style>
  </head>
  <cuelist>
    <cue start="00:00:00.45" end="00:00:05.60">
      Can't <t at="00:00.75">buy</t> <t at="00:00.95">me</t> <t="00:01.40">love,</t> <t at="00:02.60">love,</t> <t at="00:03.95">love, </t> <t at="00:05.30">love</t>
    </cue>
    <cue start="00:00:05.90" end="00:00:08.90">
       Can't <t at="00:06.20">buy</t> <t at="00:06.40">me</t> <t at="00:06.70">love,</t> <t at="00:08.00">love</t>
    </cue>
    <cue start="00:00:09.35" end="00:00:11.55">
      I'll <t at="00:09.50">buy</t> <t at="00:09.75">you</t> <t at="00:10.15">a</t> <t at="00:10.25">dia</t> <t at="00:10.50">mond</t> <t at="00:10.75">ring</t> <t at="00:11.10">my</t> <t at="00:11.40">friend</t>
    </cue>
  </cuelist>
</wmml>

5. Chapter markers

Simple: 

<!DOCTYPE wmml>
<wmml lang="en-US" kind="chapters">
  <cuelist>
    <cue start="00:00:00.00" end="00:00:18.00">Introductory Titles</cue>
    <cue start="00:00:18.01" end="00:01:10.00">The Jack Plugs</cue>
    <cue start="00:01:10.01" end="00:02:30.00">Robotic Birds</cue>
  </cuelist>
</wmml>

With image: 

<!DOCTYPE wmml>
<wmml lang="en-US" kind="chapters">
  <cuelist>
    <cue start="00:00:00.00" end="00:00:18.00"><img src="intro.png"/> Introductory Titles</cue>
    <cue start="00:00:18.01" end="00:01:10.00"><img src="plugs.png"/> The Jack Plugs</cue>
    <cue start="00:01:10.01" end="00:02:30.00"><img src="birds.png"/> Robotic Birds</cue>
  </cuelist>
</wmml>

6. Texted audio descriptions 

<!DOCTYPE wmml>
<wmml lang="en-US" kind="descriptions">
  <cuelist>
    <cue start="00:00:00.00" end="00:00:05.00">The orange open movie project presents</cue>
    <cue start="00:00:05.01" end="00:00:12.00">Introductory titles are showing on the background of a water pool with fishes swimming and mechanical objects lying on a stone floor.</cue>
    <cue start="00:00:11.01" end="00:00:14.80">elephants dream</cue>
  </cuelist>
</wmml>

7. Timed Metadata

Timed slides for a presentations (slide transcripts given, too): 

<!DOCTYPE wmml>
<wmml lang="en-US" kind="metadata">
  <head>
    <title>Really Achieving Your Childhood Dreams</title>
    <meta name="dc:title" content="Really Achieving Your Childhood Dreams"/>
    <meta name="dc:author" cotent="Randy Pausch"/>
    <meta name="dc:location" content="Carnegie Mellon University"/>
    <meta name="dc:date" content="18th Sept 2007"/>
    <meta name="dc:source" content="http://www.labnol.org/home/randy-pausch-last-lecture-video-with-transcript/4211/"/>
  </head>
  <cuelist>
    <cue start="00:00:00.00" end="00:00:44.00"><img src="intro.png"/>"Really Achieving Your Childhood Dreams" by Randy Pausch, Carnegie Mellon University, Sept 18, 2007</cue>
    <cue start="00:00:44.00" end="00:01:18.00"><img src="elephant.png"/>The elephant in the room...</cue>
    <cue start="00:01:18.00" end="00:02:05.00"><img src="denial.png"/>I'm not in denial...</cue>
  </cuelist>
</wmml>
Retrieved from "https://wiki.mozilla.org/index.php?title=Accessibility/Video_Text_Format_Comparison&oldid=236399"