天天看点

html5 video 外挂字幕[webVTT]研究html5 video 外挂字幕[webVTT]研究

webvtt是什么

webvtt内容

设置字幕样式

为字幕设置位置

章节chapters解释

webvtt 详解

webvtt实现

浏览器行为

浏览器支持情况

html5 video 外挂字幕英文简称webvtt【video text track 网络视频文本轨道】,是一个以.vtt结尾的纯文本文件,里面会包含以下几种视频信息:

字幕subtitles

关于对话的转译或者翻译

标题captions

类似于标题,但是还包括音响效果和其他音频信息。

说明description

预期为一个单独的文本文件,通过屏幕阅读器描述视频

章节chapters

旨在帮助用户浏览整个视频

元数据metadata

默认不打算展示给观众的、和视频有关的信息和内容。但是你可以使用javascript来访问。

这里有一个标准的示例:

webvtt文件中的每一项为一个cue,每一个cue以箭头分割的开始时间和结束时间,cue对应的文本在下一行,每一个cue可以有一个id, cue的时间格式为 hours:minutes:seconds:milliseconds,必须严格遵守,时分秒必须为两位数字,不足的以0填补,毫秒必须是三位数字,这个里有个.vtt文件的格式校验器live webvtt validator

通过内联样式为字幕设置样式

位置设置可以写在时间设置的同一行

具体示例

语法跟字幕类似,如下

使用的时候是需要设置kind = 'chapter',目前主流浏览器关于chapter的支持不太完善,最好的办法采用我们自己定义的界面,一般自定义的界面需要提供一些特性:

展示章节列表

允许用户选择章节

播放时高亮当前选择的章节

采用如下的代码可以达到的我们的目的

在html5通过video的子元素track来实现

所有text track都存在与媒体元素[media element]的texttracklist属性中

播放过程中遇到一个cue就会触发cuechange和enter事件

当一个字幕会触发一个exit事件。

html5 video 外挂字幕[webVTT]研究html5 video 外挂字幕[webVTT]研究

the track element

web video text tracks can i use?

mdn track

subtitles and chaptering using timed text tracks

w3c webvtt standard: http://dev.w3.org/html5/webvtt/#webvtt-cue-timings

timed track use cases: http://wiki.whatwg.org/wiki/timed_tracks

timed track formats: http://wiki.whatwg.org/wiki/timed_track_formats

继续阅读