HTML5 video视频字幕的使用和制作

一、video支持视频格式：

以下是三种最常用的格式

1、 ogg格式：带有Theora视频编码（免费）+Vorbis音频编码的Ogg文件（免费）

支持的浏览器：firefox、chrome、opera

2、 MPEG4格式：带有H.264视频编码（收费）+AAC音频编码的MPEG4文件（收费）

支持的浏览器：safari、chrome

3、 Webm格式：带有VP8视频编码（免费）+Vorbis音频编码的WebM格式（免费）

支持的浏览器：IE、firefox、chrome、opera

优势：全免费、压缩比较好（小）、视频质量好

劣势：视频少、转码器几乎没有，不好转码

二、video标签内属性代码：加粗是常用标签属性

属性	值	功能描述
controls	controls	是否显示播放控件
autoplay	autoplay	设置是否打开浏览器后自动播放
width	Pilex（像素）	设置播放器的宽度
height	Pilex（像素）	设置播放器的高度
loop	loop	设置视频是否循环播放（即播放完后继续重新播放）
preload	preload	设置是否等加载完再播放
src	url	设置要播放视频的url地址
poster	imgurl	设置播放器初始默认显示图片
autobuffer	autobuffer	设置为浏览器缓冲方式，不设置autoply才有效

三、source标签代码：

src：指明视频所在路径

type：指定视频的格式

四、track字幕标签属性代码：

属性	描述
kind	定义字幕内容类型，只能是这五种之一: subtitles, captions, descriptions, chapters, metadata.
src	字幕文件的URL地址
srclang	字幕文件的语言类型，标识信息的作用，播放器不使用这个属性。
label	字幕标签，每个字幕元素必需设置一个唯一不重复的标签，切换字幕时显示的名称。
default	指定是否是默认字幕。如果每个都不指定，将不会自动显示字幕.

后缀为vtt字幕文件的格式在网上不多见，常见的还是srt格式，这里提供将srt字幕文件格式转换为vtt格式：https://atelier.u-sub.net/srt2vtt/

对于视频文件，可以自己在线做成。也可以在网络上去找到相关的资源。：https://www.zhangxinxu.com/sp/webvtt.html

.vtt文件格式说明：是一个以 UTF-8 为编码，以 .vtt 为文件扩展名的简单文本文件。.vtt字幕文件开头若是不写WEBVTT则字幕文件不会成功加载到视频

例如文件内容:包含提示，可以是单行或多行　　

1 WEBVTT

2

3 100:00:00.160 --> 00:00:18.930

4

5 嘿，这是<b>创建</b>一个业务

6

7 200:00:18.930 --> 00:00:22.490

8 就是<i>我和你</i>

9 和你爱的生活。

WebVTT字幕文本还支持一些HTML标签进行样式控制，常见的有声音 ==v== 标签，颜色 ==c== 标签，加粗==b==标签，倾斜==i==标签，下划线==u==标签，还有==ruby==和==lang==标签等。

五、视频和字幕的制作例子演示：

 <!DOCTYPE HTML>

 <html>

 <head>

     <style>

         video::cue{

                 background-color:transparent;

                   color:white;

                  font-size:20px;

                  line-height: 100px;

 }

     </style>

 </head>

 <body>

 <video controls="controls">

     <source src="黑客军团第一季1.mp4" type="video/mp4"/>

     <track src="a.vtt" label="中文" srclang="zh" kind="subtitles" default/>

     <track src="b.vtt" label="english" srclang="en" kind="subtitles" />

 </video>

 </body>

 </html>

六、字幕css样式设置: cue CSS伪元素匹配所选元素中的WebVTT提示。这可以用于在VTT轨道的媒体中使用字幕和其他线索。只有CSS一小部分属性可以使用：

color
opacity
visibility
text-decoration
text-shadow
background 速记性能　　background-color、background-position....
outline 速记性能
font 　　速记属性 /font-size、font-weight....
line-height
white-space

演示：

//设置字幕的样式

video::cue{

    background-color:transparent;

    color:white;

    font-size:20px;

    line-height: 100px;

}

// 设置单行字幕的样式

video::cue(v[voice=aa]){

    color:green;

}

video::cue(v[voice=bb]){

    color:rgb(0, 26, 128);

}