一、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==標簽等。
五、視頻和字幕的制作例子演示：
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <style> 5 video::cue{ 6 background-color:transparent; 7 color:white; 8 font-size:20px; 9 line-height: 100px; 10 } 11 </style> 12 </head> 13 <body> 14 15 <video controls="controls"> 16 <source src="黑客軍團第一季1.mp4" type="video/mp4"/> 17 <track src="a.vtt" label="中文" srclang="zh" kind="subtitles" default/> 18 <track src="b.vtt" label="english" srclang="en" kind="subtitles" /> 19 </video> 20 </body> 21 </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);
}