一、video支持视频格式：
以下是三种最常用的格式
1、 ogg格式：带有Theora视频编码(免费)+Vorbis音频编码的Ogg文件(免费)
支持的浏览器：firefox、chrome、opera2、 MPEG4格式：带有H.264视频编码(收费)+AAC音频编码的MPEG4文件(收费)
支持的浏览器：safari、chrome3、 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/
.vtt文件格式说明：是一个以 UTF-8为编码，以 .vtt 为文件扩展名的简单文本文件。.vtt字幕文件开头若是不写WEBVTT则字幕文件不会成功加载到视频
例如文件内容:包含提示，可以是单行或多行1WEBVTT2
3 100:00:00.160 --> 00:00:18.930
4
5嘿，这是创建一个业务6
7 200:00:18.930 --> 00:00:22.490
8就是我和你9 和你爱的生活。
WebVTT字幕文本还支持一些HTML标签进行样式控制，常见的有声音 ==v== 标签，颜色 ==c== 标签，加粗==b==标签，倾斜==i==标签，下划线==u==标签，还有==ruby==和==lang==标签等。
五、视频和字幕的制作例子演示：
1
2
3
4
5 video::cue{6 background-color:transparent;7 color:white;8 font-size:20px;9 line-height: 100px;10 }11
12
13
14
15
16
17
18
19
20
21
六、字幕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);
}
