Skip to content

ebuttd_in_isobmff_samples

Jump to bottom Edit New page
Andreas Tai edited this page Jun 22, 2017 · 3 revisions

Packaging of EBU-TT-D in ISOBMFF

The following shows some examples how subtitles could be packetized in ISOBMFF using the TTML Subset of EBU-TT-D. The sample size shall always have the duration of 6s. To also make it applicable for DASH we assume the segment size will not vary and also have a duration of 6s.

We do not assume any special system architecture where the different functions are assigned to conceptual units like a pre-processor, packetizer or "dashing system". Although the categorization may be very helpful it practice may depend very much on the technical product. We assume a media time timeline that starts at 0s (as the defined for the ISOBMFF Subtitle track

We assume a media time timeline that starts at 0s (as the defined for the ISOBMFF Subtitle track).

Example 1: Only one subtitle block is active at the same time

In the first example we have two subtitle blocks. The first one appears from 10s to 20s and the second one from 22s to 30s.

This information could be provided through any kind of file format or media stream. Taken the TTML format the source is assumed as follows:

<tt 
 xmlns="http://www.w3.org/ns/ttml" xmlns:ttp="http://www.w3.org/ns/ttml#parameter"
 xmlns:tts="http://www.w3.org/ns/ttml#styling" ttp:timeBase="media" xml:lang="en"
 ttp:cellResolution="50 30">
	<head>
		<styling>		
			<style xml:id="spanStyle" tts:color="#ffffff" tts:backgroundColor="#000000" tts:fontSize="160%" tts:fontFamily="monospace"/>
			<style xml:id="paragraphStyle" tts:textAlign="center" />
		</styling>
		<layout>
			<region xml:id="bottom" tts:origin="10% 10%" tts:extent="80% 80%" tts:displayAlign="after" />
		</layout>
	</head>
	<body>
		<div>
			<p xml:id="subtitle1" region="bottom" begin="00:00:10.000" end="00:00:20.000" style="paragraphStyle">
				<span style="spanStyle">One line Subtitle.</span>
			</p>
			<p xml:id="subtitle2" region="bottom" begin="00:00:22.000" end="00:00:30.000" style="paragraphStyle">
				<span style="spanStyle">A second one line Subtitle.</span>
			</p>			
		</div>
	</body>
</tt>

The following shows two strategies. For the duration where no subtitle content is active an empty TTML document may be sent.

Strategy 1 (NOT adjusting TTML timings to sample boundaries)

Sample 1 (0-6s)

<tt xmlns="http://www.w3.org/ns/ttml" />

Sample 2 (6-12s)

<tt 
 xmlns="http://www.w3.org/ns/ttml" xmlns:ttp="http://www.w3.org/ns/ttml#parameter"
 xmlns:tts="http://www.w3.org/ns/ttml#styling" ttp:timeBase="media" xml:lang="en"
 ttp:cellResolution="50 30">
	<head>
		<styling>		
			<style xml:id="spanStyle" tts:color="#ffffff" tts:backgroundColor="#000000" tts:fontSize="160%" tts:fontFamily="monospace"/>
			<style xml:id="paragraphStyle" tts:textAlign="center" />
		</styling>
		<layout>
			<region xml:id="bottom" tts:origin="10% 10%" tts:extent="80% 80%" tts:displayAlign="after" />
		</layout>
	</head>
	<body>
		<div>
			<p xml:id="subtitle1" region="bottom" begin="00:00:10.000" end="00:00:20.000" style="paragraphStyle">
				<span style="spanStyle">One line Subtitle.</span>
			</p>
		</div>
	</body>
</tt>

Sample 3 (12-18s)

<tt 
 xmlns="http://www.w3.org/ns/ttml" xmlns:ttp="http://www.w3.org/ns/ttml#parameter"
 xmlns:tts="http://www.w3.org/ns/ttml#styling" ttp:timeBase="media" xml:lang="en"
 ttp:cellResolution="50 30">
	<head>
		<styling>		
			<style xml:id="spanStyle" tts:color="#ffffff" tts:backgroundColor="#000000" tts:fontSize="160%" tts:fontFamily="monospace"/>
			<style xml:id="paragraphStyle" tts:textAlign="center" />
		</styling>
		<layout>
			<region xml:id="bottom" tts:origin="10% 10%" tts:extent="80% 80%" tts:displayAlign="after" />
		</layout>
	</head>
	<body>
		<div>
			<p xml:id="subtitle1" region="bottom" begin="00:00:10.000" end="00:00:20.000" style="paragraphStyle">
				<span style="spanStyle">One line Subtitle.</span>
			</p>
		</div>
	</body>
</tt>

Sample 4 (18s-24s)

<tt 
 xmlns="http://www.w3.org/ns/ttml" xmlns:ttp="http://www.w3.org/ns/ttml#parameter"
 xmlns:tts="http://www.w3.org/ns/ttml#styling" ttp:timeBase="media" xml:lang="en"
 ttp:cellResolution="50 30">
	<head>
		<styling>		
			<style xml:id="spanStyle" tts:color="#ffffff" tts:backgroundColor="#000000" tts:fontSize="160%" tts:fontFamily="monospace"/>
			<style xml:id="paragraphStyle" tts:textAlign="center" />
		</styling>
		<layout>
			<region xml:id="bottom" tts:origin="10% 10%" tts:extent="80% 80%" tts:displayAlign="after" />
		</layout>
	</head>
	<body>
		<div>
			<p xml:id="subtitle1" region="bottom" begin="00:00:10.000" end="00:00:20.000" style="paragraphStyle">
				<span style="spanStyle">One line Subtitle.</span>
			</p>
			<p xml:id="subtitle2" region="bottom" begin="00:00:22.000" end="00:00:30.000" style="paragraphStyle">
				<span style="spanStyle">A second one line Subtitle.</span>
			</p>			
		</div>
	</body>
</tt>

Sample 5 (24s-30s)

<tt 
 xmlns="http://www.w3.org/ns/ttml" xmlns:ttp="http://www.w3.org/ns/ttml#parameter"
 xmlns:tts="http://www.w3.org/ns/ttml#styling" ttp:timeBase="media" xml:lang="en"
 ttp:cellResolution="50 30">
	<head>
		<styling>		
			<style xml:id="spanStyle" tts:color="#ffffff" tts:backgroundColor="#000000" tts:fontSize="160%" tts:fontFamily="monospace"/>
			<style xml:id="paragraphStyle" tts:textAlign="center" />
		</styling>
		<layout>
			<region xml:id="bottom" tts:origin="10% 10%" tts:extent="80% 80%" tts:displayAlign="after" />
		</layout>
	</head>
	<body>
		<div>
			<p xml:id="subtitle2" region="bottom" begin="00:00:22.000" end="00:00:30.000" style="paragraphStyle">
				<span style="spanStyle">A second one line Subtitle.</span>
			</p>			
		</div>
	</body>
</tt>

Strategy 2 (Adjust timings in TTML to sample boundaries)

Sample 1 (0-6s)

<tt xmlns="http://www.w3.org/ns/ttml" />

Sample 2 (6-12s)

<tt 
 xmlns="http://www.w3.org/ns/ttml" xmlns:ttp="http://www.w3.org/ns/ttml#parameter"
 xmlns:tts="http://www.w3.org/ns/ttml#styling" ttp:timeBase="media" xml:lang="en"
 ttp:cellResolution="50 30">
	<head>
		<styling>		
			<style xml:id="spanStyle" tts:color="#ffffff" tts:backgroundColor="#000000" tts:fontSize="160%" tts:fontFamily="monospace"/>
			<style xml:id="paragraphStyle" tts:textAlign="center" />
		</styling>
		<layout>
			<region xml:id="bottom" tts:origin="10% 10%" tts:extent="80% 80%" tts:displayAlign="after" />
		</layout>
	</head>
	<body>
		<div>
			<p xml:id="subtitle1" region="bottom" begin="00:00:10.000" end="00:00:12.000" style="paragraphStyle">
				<span style="spanStyle">One line Subtitle.</span>
			</p>
		</div>
	</body>
</tt>

Sample 3 (12-18s)

<tt 
 xmlns="http://www.w3.org/ns/ttml" xmlns:ttp="http://www.w3.org/ns/ttml#parameter"
 xmlns:tts="http://www.w3.org/ns/ttml#styling" ttp:timeBase="media" xml:lang="en"
 ttp:cellResolution="50 30">
	<head>
		<styling>		
			<style xml:id="spanStyle" tts:color="#ffffff" tts:backgroundColor="#000000" tts:fontSize="160%" tts:fontFamily="monospace"/>
			<style xml:id="paragraphStyle" tts:textAlign="center" />
		</styling>
		<layout>
			<region xml:id="bottom" tts:origin="10% 10%" tts:extent="80% 80%" tts:displayAlign="after" />
		</layout>
	</head>
	<body>
		<div>
			<p xml:id="subtitle1" region="bottom" begin="00:00:12.000" end="00:00:18.000" style="paragraphStyle">
				<span style="spanStyle">One line Subtitle.</span>
			</p>
		</div>
	</body>
</tt>

Sample 4 (18s-24s)

<tt 
 xmlns="http://www.w3.org/ns/ttml" xmlns:ttp="http://www.w3.org/ns/ttml#parameter"
 xmlns:tts="http://www.w3.org/ns/ttml#styling" ttp:timeBase="media" xml:lang="en"
 ttp:cellResolution="50 30">
	<head>
		<styling>		
			<style xml:id="spanStyle" tts:color="#ffffff" tts:backgroundColor="#000000" tts:fontSize="160%" tts:fontFamily="monospace"/>
			<style xml:id="paragraphStyle" tts:textAlign="center" />
		</styling>
		<layout>
			<region xml:id="bottom" tts:origin="10% 10%" tts:extent="80% 80%" tts:displayAlign="after" />
		</layout>
	</head>
	<body>
		<div>
			<p xml:id="subtitle1" region="bottom" begin="00:00:18.000" end="00:00:20.000" style="paragraphStyle">
				<span style="spanStyle">One line Subtitle.</span>
			</p>
			<p xml:id="subtitle2" region="bottom" begin="00:00:22.000" end="00:00:24.000" style="paragraphStyle">
				<span style="spanStyle">A second one line Subtitle.</span>
			</p>			
		</div>
	</body>
</tt>

Sample 5 (24s-30s)

<tt 
 xmlns="http://www.w3.org/ns/ttml" xmlns:ttp="http://www.w3.org/ns/ttml#parameter"
 xmlns:tts="http://www.w3.org/ns/ttml#styling" ttp:timeBase="media" xml:lang="en"
 ttp:cellResolution="50 30">
	<head>
		<styling>		
			<style xml:id="spanStyle" tts:color="#ffffff" tts:backgroundColor="#000000" tts:fontSize="160%" tts:fontFamily="monospace"/>
			<style xml:id="paragraphStyle" tts:textAlign="center" />
		</styling>
		<layout>
			<region xml:id="bottom" tts:origin="10% 10%" tts:extent="80% 80%" tts:displayAlign="after" />
		</layout>
	</head>
	<body>
		<div>
			<p xml:id="subtitle2" region="bottom" begin="00:00:24.000" end="00:00:30.000" style="paragraphStyle">
				<span style="spanStyle">A second one line Subtitle.</span>
			</p>			
		</div>
	</body>
</tt>

Example 2: More than one subtitle block is active at the same time

In the second example we have a subtitle that appears word by word. The timeline we take into account runs from 0-10s.

This information could be provided through any kind of file format or media stream. Taken the TTML format the source is assumed as follows:

<tt:tt xmlns:ttp="http://www.w3.org/ns/ttml#parameter" xmlns:tts="http://www.w3.org/ns/ttml#styling"
	xmlns:tt="http://www.w3.org/ns/ttml" ttp:timeBase="media" xml:lang="de"
	ttp:cellResolution="50 30">
	<tt:head>
		<tt:styling>
			<tt:style xml:id="textWhite" tts:color="#ffffff" tts:backgroundColor="#000000"
				tts:fontSize="160%" tts:fontFamily="monospace"/>
			<tt:style xml:id="paragraphAlign" tts:textAlign="left"/>
		</tt:styling>
		<tt:layout>
			<tt:region xml:id="bottom" tts:origin="10% 10%" tts:extent="80% 80%"
				tts:displayAlign="after"/>
		</tt:layout>
	</tt:head>
	<tt:body>
		<tt:div>
			<tt:p xml:id="subtitle1" region="bottom" style="paragraphAlign">
				<tt:span style="textWhite" begin="00:00:02.000" end="00:00:08.000">These</tt:span>
				<tt:span style="textWhite" begin="00:00:03.000" end="00:00:08.000"> words</tt:span>
				<tt:span style="textWhite" begin="00:00:04.000" end="00:00:08.000"> appear</tt:span>
				<tt:span style="textWhite" begin="00:00:05.000" end="00:00:08.000"> step-by-step.</tt:span>
			</tt:p>
		</tt:div>
	</tt:body>
</tt:tt>

The following shows three strategies. The timeline taken into account runs from 0-10s.

In the first two strategies the sample duration is always 5s and in the third strategy the sample size is variable.

Strategy 1: Simultaneous active subtitle content in one document, TTML timings are NOT adjusted

Sample 1 (0-5s)

<tt:tt xmlns:ttp="http://www.w3.org/ns/ttml#parameter" xmlns:tts="http://www.w3.org/ns/ttml#styling"
	xmlns:tt="http://www.w3.org/ns/ttml" ttp:timeBase="media" xml:lang="de"
	ttp:cellResolution="50 30">
	<tt:head>
		<tt:styling>
			<tt:style xml:id="textWhite" tts:color="#ffffff" tts:backgroundColor="#000000"
				tts:fontSize="160%" tts:fontFamily="monospace"/>
			<tt:style xml:id="paragraphAlign" tts:textAlign="left"/>
		</tt:styling>
		<tt:layout>
			<tt:region xml:id="bottom" tts:origin="10% 10%" tts:extent="80% 80%"
				tts:displayAlign="after"/>
		</tt:layout>
	</tt:head>
	<tt:body>
		<tt:div>
			<tt:p xml:id="subtitle1" region="bottom" style="paragraphAlign">
				<tt:span style="textWhite" begin="00:00:02.000" end="00:00:08.000">These</tt:span>
				<tt:span style="textWhite" begin="00:00:03.000" end="00:00:08.000"> words</tt:span>
				<tt:span style="textWhite" begin="00:00:04.000" end="00:00:08.000"> appear</tt:span>
			</tt:p>
		</tt:div>
	</tt:body>
</tt:tt>

Sample 2 (5-10s)

<tt:tt xmlns:ttp="http://www.w3.org/ns/ttml#parameter" xmlns:tts="http://www.w3.org/ns/ttml#styling"
	xmlns:tt="http://www.w3.org/ns/ttml" ttp:timeBase="media" xml:lang="de"
	ttp:cellResolution="50 30">
	<tt:head>
		<tt:styling>
			<tt:style xml:id="textWhite" tts:color="#ffffff" tts:backgroundColor="#000000"
				tts:fontSize="160%" tts:fontFamily="monospace"/>
			<tt:style xml:id="paragraphAlign" tts:textAlign="left"/>
		</tt:styling>
		<tt:layout>
			<tt:region xml:id="bottom" tts:origin="10% 10%" tts:extent="80% 80%"
				tts:displayAlign="after"/>
		</tt:layout>
	</tt:head>
	<tt:body>
		<tt:div>
			<tt:p xml:id="subtitle1" region="bottom" style="paragraphAlign">
				<tt:span style="textWhite" begin="00:00:02.000" end="00:00:08.000">These</tt:span>
				<tt:span style="textWhite" begin="00:00:03.000" end="00:00:08.000"> words</tt:span>
				<tt:span style="textWhite" begin="00:00:04.000" end="00:00:08.000"> appear</tt:span>
				<tt:span style="textWhite" begin="00:00:05.000" end="00:00:08.000"> step-by-step.</tt:span>
			</tt:p>
		</tt:div>
	</tt:body>
</tt:tt>

Strategy 2: Simultaneous active content in one document, TTML timings are adjusted

Sample 1 (0-5s)

<tt:tt xmlns:ttp="http://www.w3.org/ns/ttml#parameter" xmlns:tts="http://www.w3.org/ns/ttml#styling"
	xmlns:tt="http://www.w3.org/ns/ttml" ttp:timeBase="media" xml:lang="de"
	ttp:cellResolution="50 30">
	<tt:head>
		<tt:styling>
			<tt:style xml:id="textWhite" tts:color="#ffffff" tts:backgroundColor="#000000"
				tts:fontSize="160%" tts:fontFamily="monospace"/>
			<tt:style xml:id="paragraphAlign" tts:textAlign="left"/>
		</tt:styling>
		<tt:layout>
			<tt:region xml:id="bottom" tts:origin="10% 10%" tts:extent="80% 80%"
				tts:displayAlign="after"/>
		</tt:layout>
	</tt:head>
	<tt:body>
		<tt:div>
			<tt:p xml:id="subtitle1" region="bottom" style="paragraphAlign">
				<tt:span style="textWhite" begin="00:00:02.000" end="00:00:05.000">These</tt:span>
				<tt:span style="textWhite" begin="00:00:03.000" end="00:00:05.000"> words</tt:span>
				<tt:span style="textWhite" begin="00:00:04.000" end="00:00:05.000"> appear</tt:span>
			</tt:p>
		</tt:div>
	</tt:body>
</tt:tt>

Sample 2 (5-10s)

<tt:tt xmlns:ttp="http://www.w3.org/ns/ttml#parameter" xmlns:tts="http://www.w3.org/ns/ttml#styling"
	xmlns:tt="http://www.w3.org/ns/ttml" ttp:timeBase="media" xml:lang="de"
	ttp:cellResolution="50 30">
	<tt:head>
		<tt:styling>
			<tt:style xml:id="textWhite" tts:color="#ffffff" tts:backgroundColor="#000000"
				tts:fontSize="160%" tts:fontFamily="monospace"/>
			<tt:style xml:id="paragraphAlign" tts:textAlign="left"/>
		</tt:styling>
		<tt:layout>
			<tt:region xml:id="bottom" tts:origin="10% 10%" tts:extent="80% 80%"
				tts:displayAlign="after"/>
		</tt:layout>
	</tt:head>
	<tt:body>
		<tt:div>
			<tt:p xml:id="subtitle1" region="bottom" style="paragraphAlign">
				<tt:span style="textWhite" begin="00:00:05.000" end="00:00:08.000">These</tt:span>
				<tt:span style="textWhite" begin="00:00:05.000" end="00:00:08.000"> words</tt:span>
				<tt:span style="textWhite" begin="00:00:05.000" end="00:00:08.000"> appear</tt:span>
				<tt:span style="textWhite" begin="00:00:05.000" end="00:00:08.000"> step-by-step.</tt:span>
			</tt:p>
		</tt:div>
	</tt:body>
</tt:tt>

Strategy 3: NO Simultaneous active content in one document, TTML Timing are adjusted

Sample 1 (0-3s)

<tt:tt xmlns:ttp="http://www.w3.org/ns/ttml#parameter" xmlns:tts="http://www.w3.org/ns/ttml#styling"
	xmlns:tt="http://www.w3.org/ns/ttml" ttp:timeBase="media" xml:lang="de"
	ttp:cellResolution="50 30">
	<tt:head>
		<tt:styling>
			<tt:style xml:id="textWhite" tts:color="#ffffff" tts:backgroundColor="#000000"
				tts:fontSize="160%" tts:fontFamily="monospace"/>
			<tt:style xml:id="paragraphAlign" tts:textAlign="left"/>
		</tt:styling>
		<tt:layout>
			<tt:region xml:id="bottom" tts:origin="10% 10%" tts:extent="80% 80%"
				tts:displayAlign="after"/>
		</tt:layout>
	</tt:head>
	<tt:body>
		<tt:div>
			<tt:p xml:id="subtitle1" region="bottom" style="paragraphAlign">
				<tt:span style="textWhite" begin="00:00:02.000" end="00:00:03.000">These</tt:span>
			</tt:p>
		</tt:div>
	</tt:body>
</tt:tt>

Sample 2 (3-4s)

<tt:tt xmlns:ttp="http://www.w3.org/ns/ttml#parameter" xmlns:tts="http://www.w3.org/ns/ttml#styling"
	xmlns:tt="http://www.w3.org/ns/ttml" ttp:timeBase="media" xml:lang="de"
	ttp:cellResolution="50 30">
	<tt:head>
		<tt:styling>
			<tt:style xml:id="textWhite" tts:color="#ffffff" tts:backgroundColor="#000000"
				tts:fontSize="160%" tts:fontFamily="monospace"/>
			<tt:style xml:id="paragraphAlign" tts:textAlign="left"/>
		</tt:styling>
		<tt:layout>
			<tt:region xml:id="bottom" tts:origin="10% 10%" tts:extent="80% 80%"
				tts:displayAlign="after"/>
		</tt:layout>
	</tt:head>
	<tt:body>
		<tt:div>
			<tt:p xml:id="subtitle1" region="bottom" style="paragraphAlign">
				<tt:span style="textWhite" begin="00:00:03.000" end="00:00:04.000">These words</tt:span>
			</tt:p>
		</tt:div>
	</tt:body>
</tt:tt>

Sample 3 (4-5s)

<tt:tt xmlns:ttp="http://www.w3.org/ns/ttml#parameter" xmlns:tts="http://www.w3.org/ns/ttml#styling"
	xmlns:tt="http://www.w3.org/ns/ttml" ttp:timeBase="media" xml:lang="de"
	ttp:cellResolution="50 30">
	<tt:head>
		<tt:styling>
			<tt:style xml:id="textWhite" tts:color="#ffffff" tts:backgroundColor="#000000"
				tts:fontSize="160%" tts:fontFamily="monospace"/>
			<tt:style xml:id="paragraphAlign" tts:textAlign="left"/>
		</tt:styling>
		<tt:layout>
			<tt:region xml:id="bottom" tts:origin="10% 10%" tts:extent="80% 80%"
				tts:displayAlign="after"/>
		</tt:layout>
	</tt:head>
	<tt:body>
		<tt:div>
			<tt:p xml:id="subtitle1" region="bottom" style="paragraphAlign">
				<tt:span style="textWhite" begin="00:00:04.000" end="00:00:05.000">These words appear</tt:span>
			</tt:p>
		</tt:div>
	</tt:body>
</tt:tt>

Sample 4 (5-8s)

<tt:tt xmlns:ttp="http://www.w3.org/ns/ttml#parameter" xmlns:tts="http://www.w3.org/ns/ttml#styling"
	xmlns:tt="http://www.w3.org/ns/ttml" ttp:timeBase="media" xml:lang="de"
	ttp:cellResolution="50 30">
	<tt:head>
		<tt:styling>
			<tt:style xml:id="textWhite" tts:color="#ffffff" tts:backgroundColor="#000000"
				tts:fontSize="160%" tts:fontFamily="monospace"/>
			<tt:style xml:id="paragraphAlign" tts:textAlign="left"/>
		</tt:styling>
		<tt:layout>
			<tt:region xml:id="bottom" tts:origin="10% 10%" tts:extent="80% 80%"
				tts:displayAlign="after"/>
		</tt:layout>
	</tt:head>
	<tt:body>
		<tt:div>
			<tt:p xml:id="subtitle1" region="bottom" style="paragraphAlign">
				<tt:span style="textWhite" begin="00:00:05.000" end="00:00:08.000">These words appear step-by-step.</tt:span>
			</tt:p>
		</tt:div>
	</tt:body>
</tt:tt>

Sample 5 (8-10s)

<tt xmlns="http://www.w3.org/ns/ttml" />
Add a custom footer
Add a custom sidebar
Clone this wiki locally