如何在VTT格式视频字幕/隐藏字幕中添加上标符号？

WebVTT字幕标准本身支持有限的行内HTML格式化标签，<sup>上标标签属于原生支持的范围，你给出的示例代码逻辑是正确的，按以下操作即可实现预期效果：

具体操作步骤 #

• 编辑VTT字幕文件时，直接在需要显示为上标的引用编号外包裹<sup>标签即可，和普通HTML的上标用法完全一致，示例如下：

WEBVTT FILE

1
00:00:00.100 --> 00:00:05.000
Subtitle line<sup>1,2,3</sup>

• 如果选择将VTT内容内嵌到<track>标签的src属性中，需要先将完整的VTT内容转为UTF-8编码的base64字符串，拼接为data:text/vtt;charset=utf-8;base64,{base64编码结果}的格式填入src属性。
• 给<video>元素添加<track>标签关联字幕资源，确保kind属性设置为subtitles，语言属性和默认显示配置符合你的需求即可。

异常兼容方案 #

如果在部分浏览器中遇到标签不生效的问题，可以采用自定义字幕渲染的方式兼容：

• 关闭原生视频控件的字幕显示选项，自己在视频上方叠加一个绝对定位的字幕展示层
• 监听video元素的timeupdate事件，读取VTT文件内容匹配当前播放时间对应的字幕条目，将字幕内容作为HTML插入到自定义字幕层中，即可完整支持包括<sup>在内的所有HTML格式化效果。

内容的提问来源于stack exchange，提问作者F.Igor