javascripthtmlvideopopcornjsttml

Adding a video element with Popcorn TTML subtitles

I have a page where I want to insert a video element with a TTML subtitle using PopcornJS as you can see in this Fiddle. All is working fine except the subtitles. They don't show. When I do something like <video src="myvideo.mp4" data-timeline-sources="data.ttml" /> the subtitles work correctly.

So am I doing something wrong here or is it just not possible with PopcornJS to insert a video element, set the data-timeline-sources attribute and play the video with that subtitle file?

My data.ttml subtitle file looks like this:

<tt xmlns:tts="http://www.w3.org/2006/04/ttaf1#styling" xmlns="http://www.w3.org/2006/04/ttaf1">
<body region="subtitleArea">
  <div>
    <p xml:id="subtitle1" begin="0.50s" end="2.5s">
      Test subtitle 1
    </p>
    <p xml:id="subtitle2" begin="3.0s" end="5.0s">
      Test subtitle 2
    </p>
    <p xml:id="subtitle3" begin="5.5s" end="8.5s" >
      Test subtitle 3a<br/>
      Test subtitle 3b
    </p>
    <p xml:id="subtitle4" begin="9.5s" end="12.0s">
      Test subtitle 4
    </p>
    <p xml:id="subtitle5" begin="13.0s" end="15.0s">
      Test subtitle 5
    </p>
  </div>    
</body>
</tt>
Solution

  • The Popcorn TTML parser is a script, so put it in a script tag as in the following demos:

    IE10 is the only browser that supports TTML natively. Chrome supports WebVTT. Firefox supports neither. Here are some tutorials about each: