Let's talk about

closed captions:

WebVTT and TTML

Gary Katsevman

 

Brightcove
Video.js
@gkatsev
 

http://slides.com/gkatsev/captions/

Why trust me?

TTML parser in the Brightcove Smart Player

WebVTT support in Video.js with vtt.js

First

Some definitions

TTML

Timed Text Markup Language

WebVTT

Web Video Text Tracks Format

WHATWG

Web Hypertext Application Technology Working Group

W3C

World Wide Web Consortium

What are closed captions?

Closed Captions

Captions that require user input to be view

Open Captions

Burned in

Baked in

Hard-coded

Closed Captions are a US centric term

Subtitles or

Subtitles for the Hard of Hearing

Some History

Open Captions

in 1971 on

the French Chef

FCC gets involved in 1976

1980: First closed captioned show

2002: DFXP shows up at the w3c

2010

Twentieth Century Communications and Video Accessibility Act

(CVAA)

2010:

WebVTT at the WHATWG as WebSRT

2011:

WebVTT chartered under w3c

2012:

FCC Safe Harbor for SMPTE-TT on the web

October 5th, 2017

Now

Demuxed 2017

TTML

Used to be called DFXP

Distribution Format eXchange Profile

XML based Authoring, Interchange, and Distribution format

Built on top of XML, SMIL, XSL-FO, CSS

It's like HTML and CSS

If you implemented it based on someone's high level description

WebVTT

Text format based on SubRip's .srt

<tt xml:lang="en"
xmlns="http://www.w3.org/ns/ttml"
xmlns:tts="http://www.w3.org/ns/ttml#styling">
 <head>
    <metadata xmlns:ttm="http://www.w3.org/ns/ttml#metadata">
     <ttm:title>TTML Example</ttm:title>
     <ttm:copyright>Thierry Michel 2015</ttm:copyright>
    </metadata>

    <styling xmlns:tts="http://www.w3.org/ns/ttml#styling">
     <style xml:id="s1" tts:color="red" tts:textAlign="center"  />
    </styling>
</head>

 <body>
    <div>
        <p xml:id="c1" begin="00:00:00" end="00:00:10">            
            Hello I am your first line.</p>

        <p xml:id="c2" begin="00:00:02" end="00:00:10">
            I am your second captions<br/>but with two lines.</p>

        <p xml:id="c3" xml:lang="fr" begin="00:00:04" end="00:00:10">
            Je suis le troisième sous-titre.</p>

        <p xml:id="c4" begin="00:00:06" end="00:00:10" >
            I am another caption with 
            <span tts:fontWeight="bold">Bold</span> and 
           <span tts:fontStyle="italic">Italic</span> styles.</p>

        <p xml:id="c5" begin="00:00:08" end="00:00:10" style="s1">
            I am the last caption displayed in red and centered.</p>

    </div>
 </body>
</tt>
WEBVTT
title:  Web-VTT Example
copyright: Thierry Michel 2015
 
NOTE to style this document, CSS color font must be the specified in the HTML hosting page in the <style> element.

c1
00:00.000 --> 00:10.000
Hello I am your first line.

c2
00:02.000 --> 00:10.000
I am your second captions
but with two lines.

c3
00:04.000 --> 00:10.000
<lang fr>Je suis le troisième sous-titre.</lang>

c4
00:06.000 --> 00:10.000
I am another caption with <b>Bold</b> and <i>Italic</i> styles.

c5
00:08.000 --> 00:10.000 align:middle 
<c.red>I am the last caption displayed in red and centered.</c>

--------------------------------------
In the HTML 5, CSS style:
<style>  ::cue(.red) {color:red;} </style>
<tt xml:lang="en"
xmlns="http://www.w3.org/ns/ttml"
xmlns:tts="http://www.w3.org/ns/ttml#styling">
<head>
  <metadata xmlns:ttm="http://www.w3.org/ns/ttml#metadata">
    <ttm:title>TTML Example</ttm:title>
    <ttm:copyright>Thierry Michel 2015</ttm:copyright>
  </metadata>

  <styling xmlns:tts="http://www.w3.org/ns/ttml#styling">
    <style xml:id="s1" tts:color="red" tts:textAlign="center"/>
  </styling>
</head>
<body>
<div>
  <p xml:id="c1" begin="00:00:00" end="00:00:10">            
    Hello I am your first line.</p>
  <p xml:id="c2" begin="00:00:02" end="00:00:10">
    I am your second captions<br/>but with two lines.</p>
</div>
</body>
<body>
<div>
<p xml:id="c3" xml:lang="fr" begin="00:00:04" end="00:00:10">
  Je suis le troisième sous-titre.</p>
<p xml:id="c4" begin="00:00:06" end="00:00:10" >
  I am another caption with
  <span tts:fontWeight="bold">Bold</span> and 
  <span tts:fontStyle="italic">Italic</span> styles.</p>
</div>
</body>
<head>
<styling xmlns:tts="http://www.w3.org/ns/ttml#styling">
  <style xml:id="s1" tts:color="red" tts:textAlign="center"  />
</styling>
</head>

<body>
<div>
  <p xml:id="c5" begin="00:00:08" end="00:00:10" style="s1">
    I am the last caption displayed in red and centered.</p>
</div>
</body>

WebVTT is much simpler

TTML isn't good

for the web

Let's talk about closed captions: WebVTT and TTML

By Gary Katsevman

Made with Slides.com

Let's talk about closed captions: WebVTT and TTML

  • 386

More from Gary Katsevman