video.js 上的 HTML/CSS 格式的字幕

Posted 2023-02-25

【中文标题】video.js 上的 HTML/CSS 格式的字幕

【英文标题】：HTML/CSS formatted caption on video.js

【发布时间】：2018-06-24 20:25:47

【问题描述】：

我正在研究自适应流媒体平台，我想问一下是否有可能使用字幕（字幕）通道来显示有关当前视频剪辑的 video.js 格式（CSS）信息。 例如：在我的情况下，我用来传输音乐视频剪辑播放列表，我想向当前艺术家展示一个带有信息的 css 框。 我目前使用 GPAC 的东西来发送自适应 mpeg-dash 视频，我想知道是否有一种方法可以通过字幕通道发送我需要为 css-box 内的每个视频显示的信息，而不是字幕的标准格式。 提供链接 www.allibrante.com 非常感谢！

【参考方案1】：

MPEG DASH 支持字幕信息，可以作为单独的文件或在 mp4 容器中。

为字幕定义了不同的格式，但根据您的需求描述，听起来 W3C TTML 会是一个很好的匹配。

这支持 CSS 来设置文本样式 - 规范包括这样的示例：

<region xml:id="r1">
  <style tts:extent="306px 114px"/>
  <style tts:backgroundColor="red"/>
  <style tts:color="white"/>
  <style tts:displayAlign="after"/>
  <style tts:padding="3px 30px"/>
</region>
...
<p region="r1" tts:backgroundColor="purple" tts:textAlign="center">
  Twinkle, twinkle, little bat!<br/>
  How <span tts:backgroundColor="green">I wonder</span> where you're at!
</p>

完整的规范可在此处获得（在撰写本文时）：https://www.w3.org/TR/2018/CR-ttml2-20180313/，您可以在此处查看一些讨论和示例：https://github.com/rbouqueau/TTML_in_MP4_DASH_statement

【参考方案2】：

这是我的这种方法的原型： https://weasel.firmfriends.us/DualSubs/

（它确实有不能在 Firefox 和 Edge 中工作的 VTT 限制，但是 它在 Chrome 和 Opera 中运行良好。就我个人而言，我可以接受，所以我打算将它集成到我的多视频观看制作页面中。）

在此处查看类似的线程讨论： Videojs displaying a custom message without using any plugin

编辑：今天（2018 年 7 月 11 日），我在此处向 Mozilla 提交了错误报告：https://bugzilla.mozilla.org/show_bug.cgi?id=1474975

（我没有费心提交针对 Edge 的错误...恕我直言，它们与 Opera 和 Chrome 无法在同一个联盟中完成，而且可能永远不会。）

【讨论】：

不错！我也用 Video.js，我需要研究如何在 MP4Box 命令中添加字幕 tu dashify 字幕中的实时自适应流，我很快就会在这里公开我的结果！