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>