效果展示

介绍

H5为<video>标签引入了子元素<track>指定显示时文本轨道(字幕或标题),其引用的字幕格式为WebVTT。

WebVTT格式基本结构

WebVTT 的 MIME 格式是 text/vtt,采用UTF-8编码。 其格式主要用途是将文本叠加到 <video>中。

结构:

一个可选的字节顺序标记（BOM）。

字符串“WEBVTT”。

WEBVTT 右侧的可选文本标题。4

WEBVTT 之后必须有一个空格。

你可以通过此方式向文本添加描述。

你可以在文本标题中使用除换行符和“-->”字符外的任何内容。

空白行，相当于两个连续的换行符。

任意数量的 cue 或注释。

任意数量的空行。

只包含基本格式和标题的WebVTT

WEBVTT   标题        
            
00:01.000 --> 00:04.000 line:90% position:40%
这是第一句

00:05.000 --> 00:09.000 line:80% position:50%
这是第二句
第二句之后

将字幕添加进`<video>`视频

基本使用

<video controls src="res\video1.mp4">
    <track 
        default kind="captions"
        srclang="zh"
        src="res\video1_desc.vtt">
</video>

多语言字幕使用

<video controls src="res\video1.mp4"> 
<track default kind="captions" srclang="en" src="res\video1_desc.vtt">
<track  kind="captions" srclang="zh" src="res\video1_desc.vtt">
<track  kind="captions" srclang="jp" src="res\video1_desc.vtt">
</video>

default属性表示该字幕被默认启用，用户可通过语言选项切换字幕。

`<track>`标签的属性

default: 当<video>标签存在多个<track>字幕轨道时，设置默认启动的字幕;

kind: 定义了 text track 应该如何使用。如果省略了该属性，默认的 kind 值就是 subtitles。下面是允许的关键字：

subtitles:

字幕给观影者看不懂的内容提供了翻译。比如英文电影里非英文的对话框或者文字。

字幕可能包含额外的内容，通常有附加的背景信息。比如在电影星球大战开头的文字，或者某个场景的日期，时间，还有地点。

captions:

隐藏式字幕提供了音频的转录甚至是翻译。

可能包含重要的非言语的信息，比如音乐提示或者音效。可以指定提示音的源文件 (e.g. music, text, character).

适用于耳聋的用户或者当调成静音的时候。

descriptions:

视频内容的文本描述。

适用于失明用户或者当视频不可见的场景。

chapters：

章节标题用于用户浏览媒体资源的时候。

metadata

脚本使用的 track。对用户不可见。

label: 当列出可用的 text tracks 时，给浏览器使用的 text track 的标题，这种标题是用户可读的。

src: track 的地址。必须是合法的 URL。该属性必须定义。

srclang: track 文本数据的语言。它必须是合法的语言标签。如果 kind 属性被设为 subtitles, 那么 srclang 必须定义

设置字幕样式

方式一: 在HTML中使用伪元素`::cue`定义CSS样式

<style>
        video::cue{
            /* 去掉字幕底部默认的黑色背景 */
            background-color: transparent;
            /* 设置字体颜色 */
            color: red; 
            }
</style>

方式二: 在WebVTT文件中设置字幕样式

WEBVTT  

STYLE
::cue{
       background-color: transparent; 
       color: green;
}


00:01.000 --> 00:04.000 line:90% position:40%
这是第一句


00:05.000 --> 00:09.000 
这是第二句
第二句之后

WebVTT可用的CSS属性

color
opacity
visibility
text-decoration
text-shadow
background
outline
font
line-height
white-space

设置字幕显示位置

WebVTT 支持为每句字幕设定位置信息
遗憾的是，暂未发现CSS设置字幕位置的方法
位置信息写在 cue 时间线的右侧。
示例: 00:01.000 --> 00:04.000 line:90% position:40% vertical:rl

属性表:

vertical:文字方向，垂直或水平;
- rl:书写方向从右向左。
- lr:书写方向从左向右。
line: 默认情况下，代表属性top
position:默认情况下,代表属性left。

注意：如果 vertical属性设置了垂直，则line和position属性作用相反。

align:指定文本的对齐方式。如果设置了字幕，则在 cue 设置的 size 给出的空间中对齐。
- start
- center
- end

WebVTT文件的注释

单行注释

NOTE This is a comment

多行注释

NOTE
One comment that is spanning
more than one line.

NOTE You can also make a comment
across more than one line this way.

H5 <video> 视频字幕与样式