javascript - 添加带有爆米花 TTML 字幕的视频元素

标签 javascript html video popcornjs ttml

我有一个页面,我想使用 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是一个脚本,因此将其放在脚本标签中,如以下演示所示:

IE10 是唯一原生支持 TTML 的浏览器。 Chrome 支持WebVTT 。 Firefox 两者都不支持。以下是有关每个内容的一些教程:

关于javascript - 添加带有爆米花 TTML 字幕的视频元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16540377/

相关文章:

python - 如何使用 OpenCV 绘图函数绘制填充矩形?

javascript - then 不是函数错误 - Node Promise 库

javascript - chrome隐身模式下的LocalStorage

javascript - 从 setInterval 方法转移到带有 sprite 的 requestAnimationFrame

javascript - 当一个 div block 被触摸并且在同一条线上时,我如何将一个 div block 放在另一个垂直排列的下方?

html - 如何正确放置旋转文本?

html - 如何在 Dreamweaver 中的图像顶部的 html 页面上嵌入 YouTube 视频?

html - 如何在 iPhone 上预览 Web 应用程序设计并使其看起来像 native 应用程序?

javascript - Jquery - 检查 : If scroll possible (div with overflow:scroll)

javascript - 当我将鼠标悬停在 slider html5 视频上时的当前时间工具提示