字幕

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

Flowplayer 支持我们为视频添加字幕,可以使用 vtt 格式的字幕,这种字幕格式是 HTML5 标准的一部分 … 现在你看到的就是一个 vtt 字幕文件 …

文件的开始要用一个 WEBVTT … 表示这个字幕是一个 vtt 格式的字幕 .. 然后可以使用下面的形式去定义内容在某个时间段显示在视频上 …

最开始这部分是内容出现在视频上的具体的时间 … 后面这个时间是结束显示字幕文字的时间 …

另起一行,再输入在这个时间段要显示的文字内容 …

你可以使用同样的形式,去定义在视频的其它时间段要显示的文字内容。

添加字幕到视频上

下面我们把这个字幕文字作为一个轨道添加到视频上去显示 … 先打开网页项目的文件 … 找到播放器的代码 …

在播放器的 <video> 标签里,除了可以添加视频源,我们还可以去添加字幕的来源 …

这里我们要用到的是 <track> 标签 … 然后用 src 属性 … 去指定一下字幕的位置 … 我们的字幕是在 video 目录下 … 字幕的文件名是 …

<track src="video/croods-tlr3_h720p_chs.vtt">

保存 …

打开浏览器去预览一下 … 点击播放 …

视频播放到某个时间的时候,就会去显示在字幕文件里设置的,这个时间段上的文字内容 … 过一会儿,会显示下一个时间段里的内容 ….

要注意的是,虽然 Flowplayer 支持我们为视频添加多个字幕文件,比如多种语言的字幕 … 不过目前它还没有为用户提供一个可以让用户切换字幕的界面 …

并且 一旦为视频添加了字幕,也没有办法让用户可以关掉字幕。

字幕《 Flowplayer 播放器 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点