HTML5 ＜track＞ 给视音频添加字幕

灵感来源：https://www.zhangxinxu.com/wordpress/2018/03/html5-video-webvtt-subtitle/

HTML5 可以用 <track> 标签 给 <video> 或 <audio> 添加字幕，字幕格式有 WebVTT(.vtt)，TTML(.xml)，WebVTT语法简单，推荐使用

<video 
	controls
    src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/friday.mp4"
>
    <track
    	 default
         kind="captions"
         srclang="en"
         src="https://interactive-examples.mdn.mozilla.net/media/examples/friday.vtt"
     />
    对不起，您的浏览器不支持嵌入式视频。
</video>

在线预览

.vtt文件本质是个文本，下面是个简单的例子，WebVTT的书写规则可以参考MDN

WEBVTT

00:01.000 --> 00:04.000
- 切勿饮用液氮。

00:05.000 --> 00:09.000
- 它将穿透你的胃。
- 你可能会死。

track标签

• default: 是否默认使用该字幕，每个媒体可以有多条字幕（track），但只能有一个配置default
• kind: 定义字幕的适用场景
  • subtitles，默认
    • 提供翻译，英文电影里的非英文对话或文字
    • 附加背景信息，星战开头的文字或某个场景的时间、地点
  • captions
    • 隐藏式字幕，提供音频的转录或翻译
    • 重要的非言语信息，BGM或恐怖的音效
    • 适用听力障碍或静音场景，用文字描述声音
  • descriptions
    • 视频简介
    • 适用视力障碍或视频不可见场景，视频后台播放，口述剧情？
  • chapters
    • 章节标题用于用户浏览媒体资源时
  • metadata
    • 脚本使用的track。用户不可见
• label: 字幕文件的描述，e.g. 中文字幕、英文字幕、日语字幕，选择字幕时显示
• srclang: 字幕的语言，e.g. zh、en，subtitles时必须
  

修改字幕的样式

可以用::cue伪元素、<b> <u> <i>等标签设置字幕的样式，位置等，IE下不支持。
解决 Unsafe attempt to load URL 后再用谷歌试试

工具

• 在线字幕格式转换

调试过程中的错误

• Unsafe attempt to load URL
  好像要在服务器上运行才可以，IE可以本地调试