知識說明：
比不上很牛的前端開發人員，但自始至終明白“萬丈高樓平地起”，基礎最重要，初學HTML5，穩固基礎第一步，把最基本的整理下來，留下自己學習的痕跡。HTML5新增的video標簽，將其屬性以及API使用整理下來，無論以后用不用得到，都是自己的一筆寶貴的財富。
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
優勢：全免費、壓縮比較好（小）、視頻質量好
劣勢：視頻少、轉碼器幾乎沒有，不好轉碼
二、標簽原型：
1、//指定一種視頻格式，不能播就提示
代碼片段：
<video src = “***.mp4” controls=”controls”>
您的瀏覽器不支持video標簽，建議更新瀏覽器版本
</video>
2、//給定多種視頻格式，瀏覽器根據自身支持程度選擇播放哪一種
注意：多個source標簽，瀏覽器會從第一個開始識別，如果第一個不被識別，則會繼續識別第二個；如果第一個識別成功，則會直接播放第一種格式視頻
代碼片段：
<video controls = “controls”>
<source src=”1.mp4” type=”video/mp4” /> //src屬性寫到source標簽中，要指定視頻的type類型，例如MP4的即為type=“video/mp4”
<source src = “2.ogg” type=”video/ogg” /> //ogg格式
<source src=”3.webm” type=”video/webm” /> //webm格式
</video>
三、標簽屬性：
雖然有的屬性是boolean類型，但仍舊建議按照XHTML書寫（屬性名=”屬性值”）格式，避免出現錯誤 （下面紅色加粗的屬性為常用屬性）
| 屬性 |
值 |
功能描述 |
| controls |
controls |
是否顯示播放控件 |
| autoplay |
autoplay |
設置是否打開瀏覽器后自動播放 |
| width |
Pilex（像素） |
設置播放器的寬度 |
| height |
Pilex（像素） |
設置播放器的高度 |
| loop |
loop |
設置視頻是否循環播放（即播放完后繼續重新播放） |
| preload |
preload |
設置是否等加載完再播放 |
| src |
url |
設置要播放視頻的url地址 |
| poster |
imgurl |
設置播放器初始默認顯示圖片 |
| autobuffer |
autobuffer |
設置為瀏覽器緩沖方式，不設置autoply才有效 |
四、video標簽API：
Video標簽也提供了比較人性化的API接口，供寫JS時直接調用，方便簡單
| API |
事件說明 |
| play |
video.play(); 播放視頻 |
| pause |
video.pause(); 暫停播放視頻 |
| load |
video.load(); 將全部屬性回復默認值，視頻恢復重新開始狀態 |
| canPlayType |
var support = videoid.canPlayType('video/mp4'); 判斷瀏覽器是否支持當前類型的視頻格式 返回值： 空字符串：不支持 Maybe：可能支持 Probably：完全支持 |
關於video標簽的API在JS中用法如下：
<button onclick=”isPlay(this)”>播放</button>
<button onclick=”replay()”>重新播放</button>
<script>
var video = document.getElementById(‘video’); //括號內為video標簽的id
//播放視頻（點擊播放按鈕，后變成暫停）
function isPlay(obj)
{
If(video.paused)
{
Obj.innerHTML=”暫停”;
Video.play();
}else{
Obj.innerHTML=”播放”;
Video.pause();
}
}
//暫停播放
function replay()
{
Video.load();
}
//判斷要播放的視頻格式當前瀏覽器是否支持
function isPlayType()
{
Var support = video.canPlayType(“video/mp4”);
Console.log(support); //返回結果：空字符串、maybe（可能支持）、probably（支持）
}
</script>
五、video標簽API屬性：
Video不僅提供了API接口，還提供了許多的API屬性，方便在JS中做判斷，如下：
| API屬性 |
事件說明 |
| duration |
返回媒體的播放總時長，單位秒 |
| loop |
是否循環播放 |
| muted |
是否靜音 |
| paused |
是否暫停 |
| currentTime |
當前播放時間（單位：秒） |
| volume |
音量值 |
| networkState |
返回當前網絡狀態 |
| playbackRate |
播放的倍速(加速、減速播放) |
| src |
當前視頻源的URL |
| ended |
返回當前播放是否結束標志 |
| error |
返回當前播放的錯誤狀態 |
| initialTime |
返回初始播放的位置 |
| mediaGroup |
當前音視頻所屬媒體組 (用來鏈接多個音視頻標簽) |
| played |
當前播放部件已經播放的時間范圍(TimeRanges對象) |
| preload |
頁面加載時是否同時加載音視頻 |
| readyState |
返回當前的准備狀態 |
| seekable |
返回當前可跳轉部件的時間范圍(TimeRanges對象) |
| audioTracks |
返回可用的音軌列表（MultipleTrackList對象） |
| autoplay |
媒體加載后自動播放 |
| buffered |
返回緩沖部件的時間范圍(TimeRanges對象) |
| controller |
返回當前的媒體控制器（MediaController對象） |
| controls |
顯示播控控件 |
| crossOrigin |
CORS設置 |
| currentSrc |
返回當前媒體的URL |
| defaultMuted |
缺省是否靜音 |
| defaultPlaybackRate |
播控的缺省倍速 |
| seeking |
返回用戶是否做了跳轉操作 |
| startOffsetTime |
返回當前的時間偏移(Date對象) |
| textTracks |
返回可用的文本軌跡(TextTrackList對象) |
| videoTracks |
返回可用的視頻軌跡(VideoTrackList對象) |