HTML 视频字幕入门

让我们开始吧

你知道吗？只需一小段 HTML 代码和一个 VTT 文件，就能为<video>元素添加标题。我今天才知道！其实很简单（只要你的 VTT 文件格式正确……感谢Conlin Durbin帮我找到了那个错误😄）。你至少需要三个文件：

1. 可能是视频.mp4
2. WebVTT，其中的字幕
3. HTML

让我们开始吧

HTML

这是最简单的步骤。您只需要 3 个元素。<video>请确保在元素上包含该controls属性。这将允许用户切换字幕或切换到其他语言（如果适用）。

元素<source>应该是您的视频。指定其src属性type。<track>元素用于.vtt您将在下一步创建的文件。这里有多个属性需要添加。

• kind默认为“字幕”，但如果您指定它，则还必须包含该srclang属性。
• label是曲目的标题，将显示在可以切换字幕的视频控制菜单中。
• default包括将轨道设置为启用。

WebVTT

该文件的格式非常具体。您必须在文件顶部包含“WEBVTT”，然后是一些中间有空格的部分，这些部分称为“提示”。在我上面附加的示例文件中，每个提示的第一行称为标识符。下一行指定了提示的时间。最后，我们有提示有效负载。这是您包含每个字幕内容的地方。您可以在这里进行一些样式设置。

最终产品

封面图片是我为一只小狗在沙滩上玩耍的视频添加字幕的快速预览。这是整个视频的 GIF。你也可以在这里实时观看我的小项目。

更多资源

我无法找到大量的例子，但有很多资源涉及字幕和标题之间的差异、样式能力以及使用不同的成绩单格式或第三方库完成与上述相同操作的其他方法。

• “操作方法：使用 HTML 视频元素添加字幕”（A11Y 项目）
• “网络视频文本轨道格式（WebVTT）”（MDN）
• “HTML<track>标签”（w3schools）

如果您有想要分享的字幕经验，或者知道更多有用的资源，请在评论中分享！😊

你知道我有一份新闻通讯吗？📬

如果您想在我发布新博客文章或发布重大项目公告时收到通知，请访问https://ashleemboyer.com/newsletter。