Flowplayer 支持我们为视频添加字幕,可以使用 vtt 格式的字幕,这种字幕格式是 HTML5 标准的一部分 … 现在你看到的就是一个 vtt 字幕文件 …
文件的开始要用一个 WEBVTT … 表示这个字幕是一个 vtt 格式的字幕 .. 然后可以使用下面的形式去定义内容在某个时间段显示在视频上 …
最开始这部分是内容出现在视频上的具体的时间 … 后面这个时间是结束显示字幕文字的时间 …
另起一行,再输入在这个时间段要显示的文字内容 …
你可以使用同样的形式,去定义在视频的其它时间段要显示的文字内容。
添加字幕到视频上
下面我们把这个字幕文字作为一个轨道添加到视频上去显示 … 先打开网页项目的文件 … 找到播放器的代码 …
在播放器的 <video> 标签里,除了可以添加视频源,我们还可以去添加字幕的来源 …
这里我们要用到的是 <track> 标签 … 然后用 src 属性 … 去指定一下字幕的位置 … 我们的字幕是在 video 目录下 … 字幕的文件名是 …
<track src="video/croods-tlr3_h720p_chs.vtt">
保存 …
打开浏览器去预览一下 … 点击播放 …
视频播放到某个时间的时候,就会去显示在字幕文件里设置的,这个时间段上的文字内容 … 过一会儿,会显示下一个时间段里的内容 ….
要注意的是,虽然 Flowplayer 支持我们为视频添加多个字幕文件,比如多种语言的字幕 … 不过目前它还没有为用户提供一个可以让用户切换字幕的界面 …
并且 一旦为视频添加了字幕,也没有办法让用户可以关掉字幕。