添加带有Popcorn TTML字幕的视频元素

时间:2013-05-14 10:07:20

标签: javascript html5 video popcornjs ttml

我有一个页面,我想在this Fiddle中看到使用PopcornJS插入带有TTML字幕的视频元素。除字幕外,一切正常。他们没有表现出来。当我执行<video src="myvideo.mp4" data-timeline-sources="data.ttml" />之类的操作时,字幕正常工作。

所以我在这里做错了,或者PopcornJS是否无法插入video元素,设置data-timeline-sources属性并播放带有该字幕文件的视频?

我的data.ttml字幕文件如下所示:

<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>

1 个答案:

答案 0 :(得分:0)

Popcorn TTML parser是一个脚本,所以将它放在脚本标记中,如下面的演示:

IE10是唯一本机支持TTML的浏览器。 Chrome支持WebVTT。 Firefox也不支持。以下是一些关于每个的教程: