使用 TTML 添加 HTML5 视频字幕

     2023-03-07     31

关键词:

【中文标题】使用 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

【讨论】:

如何使用 ffmpeg 将 .srt 文件转换为基于 ttml 的 xml 字幕文件?

】如何使用ffmpeg将.srt文件转换为基于ttml的xml字幕文件?【英文标题】:Howtoconvert.srtfileintottmlbasedxmlsubtitlefileusingffmpeg?【发布时间】:2021-10-0504:21:25【问题描述】:我有一个.srt字幕文件。我想使用ffmpeg命令将其转换为.ttml格式(... 查看详情

html5video视频字幕的使用和制作

...ML5video对字幕的支持显示情况:<track>元素HTML5允许我们使用<track>元素为视频指定字幕。这个元素的各种属性允许我们指定这样的东西,比如我们添加的内容的类型,它所在的语言,当然还有对包含实际字幕信息的文本文... 查看详情

Chromecast 支持哪些字幕格式?

...题描述】:Chromecast支持哪些字幕格式(流式传输HLS时和使用默认接收器时)?/BE【问题讨论】:【参考方案1】:TTML-定时文本标记语言WebVTT-网络视频文本轨道CEA-608【讨论】: 查看详情

如何通过 TTML 浏览并将所有时间\标题放入 JSON 文件

...发布时间】:2019-09-0219:42:31【问题描述】:我有一个包含视频字幕的ttml文件,我想通过所有对time\\caption获取并将它们放入一个JSON文件中,我尝试过https 查看详情

使用全局按钮关闭多个视频的隐藏式字幕

】使用全局按钮关闭多个视频的隐藏式字幕【英文标题】:Turnclosedcaptionsoffformultiplevideoswithglobalbutton【发布时间】:2018-06-0320:28:04【问题描述】:我的页面包含多个带有不同标题的HTML5视频(webvtt)。视频控件被隐藏。我有一个ID为... 查看详情

如何为vod点播配置字幕

WowzaStreamEngine4通过VODTimedTextProviders支持VOD点播中的隐藏字幕。每一个provider都知道如何将来自不同类型的字幕数据源做为timedtext嵌入到Wowza的generictimedtext数据模型。WowzaStreamEngine4包括了针对嵌入到3GPP/MPEG-4中的字幕以及外部文件... 查看详情

如何使用 Youtube API 为 Youtube 视频添加字幕?

】如何使用YoutubeAPI为Youtube视频添加字幕?【英文标题】:HowtoaddSubtitlestoYoutubevideousingYoutubeAPI?【发布时间】:2013-07-2004:45:59【问题描述】:是否可以使用GoogleYoutubeAPIv3为Youtube视频添加字幕(重要条件-视频不是所有者)?任务:... 查看详情

HTML5 视频字幕样式

...可能,我可以用jquery读取字幕轨道元素的内容吗?我尝试使用.html()和.val()阅读内容-均无效。【问题讨论】:检查过这个吗 查看详情

使用 ffmpeg 为视频添加 SRT 字幕

】使用ffmpeg为视频添加SRT字幕【英文标题】:AddSRTsubtitletovideowithffmpeg【发布时间】:2011-08-3007:58:52【问题描述】:我使用ffmpeg编码,并通过以下命令为视频添加字幕$ffmpeg-ihifi.avi-ihifi.srt-acodeclibfaac-ar48000-ab128k-ac2-vcodeclibx264-vpreipod... 查看详情

Chromecast - 如何使用 android 为视频添加字幕

】Chromecast-如何使用android为视频添加字幕【英文标题】:Chromecast-howtoaddcaptionstoavideousingandroid【发布时间】:2014-04-2923:35:53【问题描述】:我在应用程序中使用Chromecast配套库来流式传输视频,它运行良好,但现在我想为视频添加... 查看详情

使用 WebVTT 未显示字幕

】使用WebVTT未显示字幕【英文标题】:SubtitlesnotshowingusingWebVTT【发布时间】:2013-04-1203:18:34【问题描述】:所以我正在尝试为html5视频添加字幕并找到了WebVTT。我对此进行了一些研究,甚至复制了一些示例代码以查看是否可行,... 查看详情

如何在 C 程序中使用 Gstreamer 在视频中动态添加和删除字幕

】如何在C程序中使用Gstreamer在视频中动态添加和删除字幕【英文标题】:HowtoaddandremovedynamicallysubtitleinvideowithGstreamerinaCprogram【发布时间】:2014-10-2910:07:31【问题描述】:对于一个学校项目,我必须用gstreamer和gtk做一个视频阅读... 查看详情

ffmpeg 添加视频标题/名称作为字幕轨道

...2020-02-0514:16:14【问题描述】:有没有一种简单的方法可以使用ffmpeg将视频(mp4、mkv等)的标题添加为自定义字幕轨道(在整个视频期间持续)?例如:视频时长为100秒的“TheAdventuresoffoo.mp4”会在字幕轨道的第0-100秒嵌入字幕“The... 查看详情

如何在 html5 视频播放器中加载动态字幕

...布时间】:2012-12-2414:42:09【问题描述】:我需要一些关于使用动态字幕播放html5视频的帮助这里是html视频html<videoid="videoplayer"controlssrc="zzz_f817951280x720.m4v"type="video/mp4"&g 查看详情

使用FFMPEG,我们如何在黑条区域或视频下方添加字幕?

】使用FFMPEG,我们如何在黑条区域或视频下方添加字幕?【英文标题】:UsingFFMPEG,howdoweaddsubtitlesintheblackbarareaorunderthevideo?【发布时间】:2020-09-2604:05:50【问题描述】:我按照以下步骤操作:添加了黑条-vf"scale=1920:1080:force_original_... 查看详情

为啥我的 vtt 字幕没有出现在我的 html5 视频中?

...1319:42:39【问题描述】:我正在尝试在我的HTML5视频标签中使用字幕,但我无法让它工作。我认为问题在于视频源不是本地文件。有谁知道我该如何解决这个问题?<html><head 查看详情

html5video视频字幕的使用和制作(代码片段)

一、video支持视频格式:以下是三种最常用的格式1、ogg格式:带有Theora视频编码(免费)+Vorbis音频编码的Ogg文件(免费)支持的浏览器:firefox、chrome、opera2、MPEG4格式:带有H.264视频编码(收费)+AAC音频编码的MPEG4文件(收费)... 查看详情

ffmpeg - 添加和删除字幕而不更改视频

...字幕,这意味着我希望输出视频与原始视频相同。我正在使用以下命令嵌入字幕ffmpeg-ioriginal.mp4-ioriginal.srt\\-c 查看详情