HTML5 Video 字幕添加免去视频剪辑合成步骤

HTML5 Video视频支持外挂字幕，文件后缀名是.vtt，称为WebVTT格式，专门的web字幕格式。

使用很简单，用一个<track>元素即可，例如：

<video id="video">
    <source src="xxx.mp4" type="video/mp4">
    <track src="xxx.vtt" default>
</video>

官方文档：https://w3c.github.io/webvtt/

.vtt 文件的MIME type是 text/vtt。在Chrome和safari浏览器下，.vtt字幕是可以无障碍加载显示的。

通常我们保存在电脑中的外挂字幕都不是 vtt 而是，常见的如 srt 格式，需要需要用在web中，搜索关键词：str转vt在线工具（会搜索出来很多免费工具）

对于<track>元素完整的写法应该是：

<track src="xxx.vtt" kind="subtitles" label="中文字幕" srclang="zh" default>

属性

• kind：默认值是subtitles

• label：点击按钮选择字幕的标题

• srclang：VTT文本信息使用的语言。

• 例如，中文zh，英文en

• default：default指的是默认会显示的字幕

例如两个<track>元素，如果都没有default属性，那都不显示，需要用户手动调出。另外，default只能出现在一个<track>元素上。

样式

CSS中有专门的伪元素::cue可以控制字幕的样式，可以控制的CSS属性包括：

• color

• opacity

• visibility

• text-decoration及相关属性

• text-shadow

• background及相关属性o

• utline及相关属性

• font及相关属性，包括line-height

• white-space

• text-combine-upright

• ruby-position

例如

video::cue {
    color: #fff;
    text-shadow: 0 1px #000, 1px 0 #000, -1px 0 #000, 0 -1px #000;
    font-size: medium;
}

完整案例演示点击查看：新加坡2023国庆演讲：我们不画饼，直接发钱