HTML5 - 给<video>视频添加字幕（WebVTT）

2015-10-21 发布：hangge 阅读：6001

虽然HTML5正式标准没有指定使用哪种格式的字幕。但目前比较通用是WebVTT（后缀.vtt），这个各个浏览器厂商都支持的比较好。

1，WebVTT文件样例

WEBVTT

00:00:01.000 --> 00:00:10.000
这是文本的第一行，从第1秒显示到第10秒。

00:00:15.000 --> 00:00:20.000
这是文本的第二行，欢迎来到hangge.com

2，使用样例

（1）如果有多个语言字幕可以添加多条<track>，供用户切换选择

（2）标注为default的<track>表示默认使用的字幕。如果默认不使用任何字幕，则都不设置default。

<video controls width="400" height="300">
	<source src="../hangge.mp4" type="video/mp4">
	<track src="hangge.vtt" srclang="zh" kind="subtitles" label="中文" default>
	<track src="hangge_en.vtt" srclang="en" kind="subtitles" label="English">
</video>