I tried the following to play an audio file and display TTML subtitles with it, but subtitles are not displayed:
<video width="400" controls>
<source
src="file:///Users/me/Downloads/an_danserion_noz.mp3"
type="audio/mp3"
/>
<track
src="file:///Users/me/Downloads/subtitle_example.xml"
label="English subtitle"
kind="subtitles"
srclang="en-us"
default
/>
</video>
Can I fix this code to display subtitles, and if yes, how ?
TTML example file:
<?xml version="1.0" encoding="UTF-8"?>
<tt xmlns="http://www.w3.org/ns/ttml" xml:lang="en" >
<body>
<div>
<p begin="00:00:01.000" end="00:00:03.000">Disons que vous voulez multiplier 12 x 13</p>
<p begin="00:00:04.000" end="00:00:07.000">Pour celui-ci nous allons tirer une ligne</p>
<p begin="00:00:08.000" end="00:00:15.000">Pour les deux , nous allons laisser un peu d'espace et nous allons tracer deux lignes</p>
<p begin="00:00:16.000" end="00:00:23.000">Pour les autres chiffres que nous allons tracer les lignes à l'autre direction</p>
<p begin="00:00:24.000" end="00:00:29.000">Maintenant, nous allons regrouper les différentes lignes et comptera les points</p>
<p begin="00:00:30.000" end="00:00:33.000">Ici, nous avons six points différents</p>
<p begin="00:00:34.000" end="00:00:37.000">Au milieu , nous avons cinq points différents</p>
<p begin="00:00:38.000" end="00:00:41.000">Et de l'autre côté nous avons un point</p>
<p begin="00:00:42.000" end="00:00:44.000">Et ce est la anser - 156</p>
</div>
</body>
</tt>
You can translate your TTML subtitles to WebVTT or you can use the JavaScript library imscJS to render the TTML captions.
See below for details on the two options.
WebVTT is the only subtitle format currently supported natively by web browsers.
You can use for conversion e.g. the library ttconv. There is an (experimental) online demo for ttconv but you can also install ttconv locally and then use the following command:
tt convert -i subtitles.ttml -o subtitles.vtt
In Chrome, there is an issue that you need to be aware of. If you translate TTML to WebVTT without explicit vertical positioning, the subtitles are positioned at the bottom. But in Chrome, the video controls would obscure the subtitles at the bottom. Therefore, you need to add the line position, e.g.
1
00:00:01.000 --> 00:00:03.000 line:1
Disons que vous voulez multiplier 12 x 13
or
1
00:00:01.000 --> 00:00:03.000 line:0%
Disons que vous voulez multiplier 12 x 13
This places the subtitle at the top of the rendering area.
The markup would be very similar to what you posted. For better readability, you could set the background of the video element to black and specify the height of the video element (by default, the font size of the WebVTT subtitle is calculated based on the height of the video element).
<video width="800" height="600" style="background-color: black;" controls>
<source
src="silence.mp3"
type="audio/mp3"
/>
<track
src="subtitles.vtt"
label="English subtitle"
kind="subtitles"
srclang="en-us"
default
/>
</video>
The MDN article Building an IMSC player describes how to use imscJS to create a TTML subtitle renderer with a few lines of code.
You can use the demo code hosted on GitHub and modify it slightly.
The HTML code would look like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="description" content="imsc-player-demo">
<meta charset="utf-8">
<title>imscJS demo</title>
<script src="https://unpkg.com/imsc@1.1.3/dist/imsc.all.min.js"></script>
<link href="css/style.css" rel="stylesheet" />
</head>
<body>
<div>
<div id="videoContainer">
<video src="audio/silence.mp3"
id="imscVideo"
muted loop controls width="800" height="600" style="background-color: black;">
<track src="ttml/subtitles.ttml"
kind="subtitles"
srclang="en"/>
</video>
</div>
<div id="render-div"></div>
</div>
<script src="js/index.js"></script>
</body>
</html>
The css for the rendering div would be adjusted as follows:
#render-div {
display: flex;
border: 1px solid #558abb;
height: 600px;
width: 800px;
margin-bottom: 10px;
position: absolute;
pointer-events: none;
}
A complete example based on your question can be found here:
https://github.com/andreastai/audiottml
This is what it would look like: