html元素<video>標(biāo)簽是html5中新增的標(biāo)簽，用于定義網(wǎng)頁文檔中的視頻資源文件，有關(guān)<video>標(biāo)簽的使用方法及作用詳解如下：
<video>標(biāo)簽的定義
<video>標(biāo)簽可以把指定的視頻資源文件插入頁面中播放；
<video> 標(biāo)簽是 HTML 5 中新增的標(biāo)簽。
<video>標(biāo)簽語法：
<video width="高度" height="寬度" src="視頻資源URL地址"> 提示文本 </video>
<video>標(biāo)簽可以設(shè)置播放視頻的高度和寬度，默認(rèn)單位是px，而src屬性用來指定視頻資源的URL地址；
在<video>和</video>之間的“提示文本”，是用于當(dāng)前瀏覽器不支持<video>標(biāo)簽時顯示的文本內(nèi)容；
<video>標(biāo)簽支持的視頻格式
目前，<video>標(biāo)簽支持以下三種視頻格式：
1、Ogg格式：帶有 Theora 視頻編碼和 Vorbis 音頻編碼的 Ogg 文件。
2、MP4格式：帶有 H.264 視頻編碼和 AAC 音頻編碼的 MPEG-4 文件。
3、WebM格式：帶有 VP8 視頻編碼和 Vorbis 音頻編碼的 WebM 文件。
<video>標(biāo)簽屬性
| 屬性 | 值 | 描述 |
|---|---|---|
| src | url | 要播放的視頻 URL地址。 |
| autoplay | autoplay | 如果出現(xiàn)該屬性，則視頻在就緒后馬上播放。 |
| controls | controls | 如果出現(xiàn)該屬性，則向用戶顯示控件，比如播放按鈕。 |
| width | pixels | 設(shè)置視頻播放器的寬度。 |
| height | pixels | 設(shè)置視頻播放器的高度。 |
| loop | loop | 如果出現(xiàn)該屬性，則當(dāng)媒介文件完成播放后再次開始播放。 |
| muted | muted | 如果出現(xiàn)該屬性，視頻的音頻輸出為靜音。 |
| autobuffer | autobuffer | 設(shè)置視頻緩沖 |
| poster | URL | 規(guī)定視頻正在下載時顯示的圖像，直到用戶點(diǎn)擊播放按鈕。 |
| preload |
auto metadata none |
如果出現(xiàn)該屬性，則視頻在頁面加載時進(jìn)行加載，并預(yù)備播放。 auto - 當(dāng)頁面加載后載入整個視頻； meta - 當(dāng)頁面加載后只載入元數(shù)據(jù)； none - 當(dāng)頁面加載后不載入視頻； |
<video>標(biāo)簽用法
1. 檢測瀏覽器是否支持<video>標(biāo)簽
<video>標(biāo)簽和<audio>標(biāo)簽一樣，都可以放置提示文本“當(dāng)前瀏覽器不支持video標(biāo)簽”，演示代碼如下：
<video width="600" height="325" src="shipin.mp4">當(dāng)前瀏覽器不支持video標(biāo)簽</video>
如果當(dāng)前瀏覽器不支持<video>標(biāo)簽，就會顯示提示文本“當(dāng)前瀏覽器不支持video標(biāo)簽”，如果沒有顯示提示本文，則是支持的。
2、<video>標(biāo)簽屬性設(shè)置
<video>標(biāo)簽的屬性用法基本上和<audio>標(biāo)簽的屬性用法一樣，但<video>標(biāo)簽可以設(shè)置高度和寬度，以及設(shè)置視頻封面的poster屬性
A、設(shè)置視頻資源寬度和高度
在<video>標(biāo)簽中，我們可以設(shè)置播放視頻的高度和寬度，演示代碼如下：
<video width="600" height="325" src="shipin.mp4" >當(dāng)前瀏覽器不支持video標(biāo)簽 </video>
width="600"是設(shè)置寬度為600px，height="325"是設(shè)置高度為325px，高寬尺寸的單位默認(rèn)是px，單位還可以設(shè)置成cm、em、pt、%（百分比）等；
B、設(shè)置視頻封面；
視頻封面，就是視頻還沒有播放時顯示的圖片
<video src="視頻地址" poster="視頻封面圖片地址">當(dāng)前瀏覽器不支持video標(biāo)簽</video>
C、設(shè)置自動播放視頻
Markup
<video src="視頻地址" autoplay="autoplay" >當(dāng)前瀏覽器不支持video標(biāo)簽</video>
D、設(shè)置有播放、暫停、音量控件的視頻
Markup
<video src="視頻地址" controls="controls">當(dāng)前瀏覽器不支持video標(biāo)簽</video>
E、設(shè)置視頻循環(huán)播放
Markup
<video src="視頻地址" loop="loop">當(dāng)前瀏覽器不支持video標(biāo)簽</video>
F、設(shè)置視頻自動緩沖
Markup
<video src="視頻地址" autobuffer="autobuffer">當(dāng)前瀏覽器不支持video標(biāo)簽</video>
注意：如果使用了autoplay屬性的話，那么，autobuffer屬性將會失效。
G、多個<video> 標(biāo)簽屬性配合使用
我們可以在<video> 標(biāo)簽內(nèi)，同時使用多個屬性，比如，設(shè)置視頻可以自動循環(huán)播放的同時，還帶有控制視頻暫停/播放的控件，演示代碼如下：
Markup
< video src="視頻地址" autoplay="autoplay" controls="controls" loop="loop" >當(dāng)前瀏覽器不支持video標(biāo)簽</video>
3、使用<source>標(biāo)簽設(shè)置多個視頻資源
我們可以在<video>標(biāo)簽內(nèi)放入多個<source> 標(biāo)簽， 就可以鏈接多個不同的視頻資源文件，瀏覽器將根據(jù)<source>標(biāo)簽的先后順序進(jìn)行判斷，優(yōu)先選擇最先支持的視頻格式。
<video controls>
<source src="shipin.webm" type="video/webm">
<source src="shipin.ogg" type="video/ogg">
<source src="shipin.mp4" type="video/mp4">
當(dāng)前瀏覽器不支持 video 標(biāo)簽
</video>
在<video>標(biāo)簽內(nèi)使用<source> 標(biāo)簽插入相同視頻的多個不同格式，這樣就可以讓不同的瀏覽器自動判斷選擇自己支持的視頻格式，判斷順序是按照從上到下的順序，直到瀏覽器選擇自己支持的播放格式為止！
4、使用<track> 標(biāo)簽設(shè)置帶有字幕的視頻
下面，設(shè)置一個帶有兩個字幕軌道的視頻，演示代碼如下：
<video width="320" height="240" controls="controls">
<source src="shipin.mp4" type="video/mp4" />
<source src="shipin.ogg" type="video/ogg" />
<track kind="subtitles" src="subs_chi.srt" srclang="zh" label="Chinese">
<track kind="subtitles" src="subs_eng.srt" srclang="en" label="English">
</video>
<track> 標(biāo)簽可以為<video>標(biāo)簽之類的媒體資源規(guī)定字幕文件，或其他的外部文本文件，當(dāng)媒體資源播放時，這些文本是可見的。
一個video標(biāo)簽可以包含多個<track>標(biāo)簽 。
相關(guān)連接：<track> 標(biāo)簽的用法及作用
5、video標(biāo)簽的瀏覽器兼容性問題
不同的瀏覽器可能支持的視頻格式有所不同，但為了兼容更加的廣泛，我們可以參看下面的代碼實(shí)現(xiàn)更加優(yōu)良的兼容性：
<video>
<!--如果瀏覽器支持video，也支持H.264，用movie.mp4-->
<source src="movie.mp4">
<!--如果瀏覽器支持video，僅支持Ogg，用movie.ogv-->
<source src="movie.ogg">
<!--如果瀏覽器不支持video，嘗試Flash-->
<object data="videoplayer.swf" type="application/x-shockwave-flash">
<param name="movie" value="movie.swf"/>
</object>
<!--如果瀏覽器不支持video，也不支持Flash，給出下載鏈接-->
<a href="下載鏈接">當(dāng)前瀏覽器不支持video標(biāo)簽，你可以下載該視頻</a>
</video>
以上代碼僅供參考學(xué)習(xí)，隨著html5應(yīng)用越來越成熟，瀏覽器對video標(biāo)簽的兼容性也會越來越好，但為了照顧更早版本的瀏覽器，也有必要考慮盡量能兼容以前的版本！
