使用 TTML 添加 HTML5 视频字幕
Posted
技术标签:
【中文标题】使用 TTML 添加 HTML5 视频字幕【英文标题】:Adding HTML5 video subtitles using TTML 【发布时间】:2015-02-26 16:57:37 【问题描述】:我目前正在尝试播放带字幕的电影。 TTML 格式是必需的。我在此页面上使用示例:https://msdn.microsoft.com/en-us/library/ie/jj152136%28v=vs.85%29.aspx
TTML:
<?xml version='1.0' encoding='UTF-8'?>
<tt xmlns='http://www.w3.org/ns/ttml' xml:lang='en'>
<body>
<div>
<p begin="00:00:01.878" end="00:00:05.334">Good day everyone, my name is John Smith</p>
<p begin="00:00:08.608" end="00:00:15.296">This video will teach you how to<br/>build a sand castle on any beach</p>
</div>
</body>
</tt>
Vtt:
WEBVTT
00:00:01.878 --> 00:00:05.334
Good day everyone, my name is John Smith
00:00:08.608 --> 00:00:15.296
This video teaches you how to
build a sand castle on any beach.
我的播放器代码如下:
<video id="video" controls="" autobuffer="" autoplay="" loop="">
<track enabled kind="captions" src="url" srclang="en" label="English Subtitles" default />
</video>
使用 VTT 格式(.vtt 文件,文本/vtt mimetype),Chrome 能够使用字幕并按预期显示它们。但是,使用 TTML 格式(.xml 文件,text/vtt mimetype),Chrome 和 Opera 在我单击启用字幕后删除了 CC 按钮,并且没有显示字幕。
我尝试调整 mimetype,但经常收到错误“资源解释为 TextTrack,但使用 MIME 类型 text/xml 传输”(尝试了 application/xml+ttml 等)。
我的目标是让 TTML 文件像 VTT 文件一样播放字幕。
【问题讨论】:
【参考方案1】:Chrome 不支持 TTML,也不打算这样做: https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/vXuOTK5M0hM
【讨论】:
以上是关于使用 TTML 添加 HTML5 视频字幕的主要内容,如果未能解决你的问题,请参考以下文章