添加一个带有爆米花TTML字幕的视频元素

Adding a video element with Popcorn TTML subtitles

本文关键字：TTML 爆米花 字幕 的视频 元素 一个 添加      更新时间：2023-09-26

我有一个页面，我想使用PopcornJS插入一个带有TTML字幕的视频元素，你可以在这个小提琴中看到。除了字幕，一切正常。他们没有出现。当我做像<video src="myvideo.mp4" data-timeline-sources="data.ttml" />这样的事情时，字幕正常工作。

所以我在这里做错了什么，或者它只是不可能与PopcornJS插入video元素，设置data-timeline-sources属性和播放视频与字幕文件?

我的数据。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解析器是一个脚本，因此将其放在脚本标记中，如下所示:

    爆米花1.0 TTML解析器插件演示
  • Popcorn TTML解析器文档

IE10是唯一原生支持TTML的浏览器。Chrome支持WebVTT。Firefox都不支持。以下是关于这两种方法的一些教程:

  • 创建WebVTT或TTML文件与标题Maker
  • WebVTT底漆
  • WebVTT和track简介
相关文章：