html5 video 外挂字幕[webVTT]研究
目录
-
WebVTT是什么
- WebVTT内容
- 设置字幕样式
- 为字幕设置位置
- 章节chapters解释
- webVTT 详解
- webVTT实现
- 浏览器行为
- 浏览器支持情况
WebVTT是什么
html5 video 外挂字幕英文简称webVTT【video text track 网络视频文本轨道】，是一个以.vtt结尾的纯文本文件，里面会包含以下几种视频信息：
- 字幕subtitles
关于对话的转译或者翻译
- 标题captions
类似于标题，但是还包括音响效果和其他音频信息。
- 说明description
预期为一个单独的文本文件，通过屏幕阅读器描述视频
- 章节chapters
旨在帮助用户浏览整个视频
- 元数据metadata
默认不打算展示给观众的、和视频有关的信息和内容。但是你可以使用Javascript来访问。
webVTT 详解
-
WebVTT内容
这里有一个标准的示例：
WEBVTT 1 00:00:13.000 --> 00:00:16.100 I heard about this arduino project, and I saw it online - 2 00:00:16.100 --> 00:00:20.100 - and I said 'Wow! a lot of people are starting to talk about this. I should check it out!'webvtt文件中的每一项为一个cue，每一个cue以箭头分割的开始时间和结束时间，cue对应的文本在下一行，每一个cue可以有一个id, cue的时间格式为 hours:minutes:seconds:milliseconds，必须严格遵守，时分秒必须为两位数字，不足的以0填补，毫秒必须是三位数字，这个里有个.vtt文件的格式校验器Live WebVTT Validator
-
设置字幕样式
通过内联样式为字幕设置样式
WEBVTT 1 00:00:13.000 --> 00:00:016.100 Ich hörte von dieser <c.red.caps>arduino</c> Projekt, und ich sah es online - 2 00:00:16.100 --> 00:00:20.100 - und ich sagte "<b>Wow!</b> eine Menge Leute fangen an, darüber zu reden. Ich <i>check it out</i>!" -
为字幕设置位置
位置设置可以写在时间设置的同一行
- D:vertical / D:vertical-lr > 垂直的显示文本而不是水平的。 它也指定文本是增长到左边（ vertical）还是右侧（ vertical-lr ） - L:X / L:X% > 一个数字或百分比。 如果是一个百分点，那么它指从框架顶部开始的位置。如果是一个数字，它表示会是在多少行。 - T:X% > 视频上的水平文字位置。T:100% 表示文本会放在视频的右侧。 - A:start / A:middle / A:end > 文本在盒子内的对齐方式。start是左对齐， middle是居中对齐， end是右对齐。 - S:X% > 文本盒子的宽度，表示为视频宽度的百分比。具体示例
WEBVTT 00:00:05.000 --> 00:00:08.040 A:middle L:10% I dabble? Listen to me. What a jerk. 00:00:05.000 --> 00:00:08.040 A:middle L:60% Yeah, I sort of dabble around, you know. -
章节chapters解释
语法跟字幕类似，如下
chapter-1 00:00:00.000 --> 00:00:18.000 Introductory Titles chapter-2 00:00:18.001 --> 00:01:10.000 The Jack Plugs chapter-3 00:01:10.001 --> 00:02:30.000 Robotic Birds使用的时候是需要设置kind = 'chapter',目前主流浏览器关于chapter的支持不太完善，最好的办法采用我们自己定义的界面，一般自定义的界面需要提供一些特性：
- 展示章节列表
- 允许用户选择章节
- 播放时高亮当前选择的章节
采用如下的代码可以达到的我们的目的
<video src="sintel.mp4"> <track kind="chapter" label="Chapters" src="sintel_chapters.vtt" srclang="en" onload = "displayChapters(this)"></track> </video> function displayChapters(trackElt){ if((trackElt) && (textTrack = trackElt.track)){ if(textTrack.kind === "chapters"){ // Do not show the track textTrack.mode = 'hidden'; var chapterBlock = document.getElementById("chapters"); // List cues for (var i = 0; i < textTrack.cues.length; ++i) { var cue = textTrack.cues[i]; var chapterName = cue.text; var start = cue.startTime; // Design an interface here allowing to choose a chapter .... } } } }
webVTT实现
在html5通过video的子元素track来实现
<video controls>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<track label="English Captions" kind="captions" srclang="en"
src="video_cc_en.vtt">
<track label="German Subtitles" kind="subtitles" srclang="de"
src="video_sub_de.vtt">
<track label="French Subtitles" kind="subtitles" srclang="fr"
src="video_sub_fr.vtt">
<track label="English Descriptions" kind="descriptions" srclang="en"
src="video_audesc_en.vtt">
<track label="Chapters" kind="chapters" srclang="en"
src="video_chapters_en.vtt">
</video>
浏览器行为
- 所有text track都存在与媒体元素[media element]的textTrackList属性中
- 播放过程中遇到一个cue就会触发cuechange和enter事件
- 当一个字幕会触发一个exit事件。
浏览器支持情况
参考
- 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
