我有一个页面要使用PopcornJS插入带有TTML字幕的视频元素,如您在this Fiddle中看到的那样。除字幕外,其他一切正常。他们不显示。当我执行<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>
最佳答案
Popcorn TTML parser是一个脚本,因此将其放入脚本标签中,如以下示例所示:
Popcorn 1.0 TTML parser Plug-in Demo
Popcorn TTML parser documentation
IE10是唯一本地支持TTML的浏览器。 Chrome支持WebVTT。 Firefox不支持。以下是有关每个教程的一些教程:
Create WebVTT or TTML files with Caption Maker
WebVTT Primer
Intro to WebVTT and track