HTML5中的video標(biāo)簽用于播放視頻文件的，在video標(biāo)簽中我們可以設(shè)置窗口的寬高，視頻的自動(dòng)播放，循環(huán)播放以及視頻的封面圖片等等
HTML5是下一代HTML，新增了許多新的標(biāo)簽，這些標(biāo)簽實(shí)現(xiàn)了許多新的功能。并且還減少了對(duì)外部插件的要求同時(shí)也可以更好的處理錯(cuò)誤。比如HTML5中的video標(biāo)簽就可以很好的實(shí)現(xiàn)了在頁(yè)面上播放視頻的效果。接下來(lái)在文章中將為大家具體介紹如何使用video標(biāo)簽，具有一定的參考作用，希望對(duì)大家有所幫助
HTML5 video標(biāo)簽的詳細(xì)用法
用于播放視頻文件，比如電影或其它視頻流。可以在開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽之間放置文本內(nèi)容，這樣做的好處是一些低版本的瀏覽器就可以顯示出不支持該標(biāo)簽的信息
例：
<video src="movie01.mp4" controls></video>
定義寬高
我們可以給這個(gè)視頻自定義寬高來(lái)改變它的窗口大小
<video src="movie01.mp4" controls style="width:400px;height:300px;"></video>
效果圖：
自動(dòng)播放
我們可以通過(guò)設(shè)置屬性來(lái)讓視頻是否開(kāi)啟自動(dòng)播放
（1）使用autoplay屬性可以讓瀏覽器加載完后視頻文件后立即播放
<video width="400" height="300" controls autoplay> <source src="movie01.mp4" type="video/mp4"> 您的瀏覽器不支持 video 標(biāo)簽。 </video>
我們還可以在自動(dòng)播放時(shí)設(shè)置muted狀態(tài)，這樣做的目的是當(dāng)視頻自動(dòng)播放時(shí)會(huì)靜音，而且我們還可以通過(guò)點(diǎn)擊播放器的揚(yáng)聲器來(lái)開(kāi)啟聲音
<video width="400" height="300" controls autoplay muted> <source src="movie01.mp4" type="video/mp4"> 您的瀏覽器不支持 video 標(biāo)簽。 </video>
效果圖：
循環(huán)播放
我們可以使用loop屬性讓視頻播放結(jié)束時(shí)，再?gòu)念^開(kāi)始循環(huán)播放。代碼如下所示
<video width="400" height="300" controls loop> <source src="movie01.mp4" type="video/mp4"> 您的瀏覽器不支持 video 標(biāo)簽。 </video>
預(yù)加載媒體文件
設(shè)置preload屬性中的不同屬性值，來(lái)告訴瀏覽器應(yīng)該怎樣加載一個(gè)媒體文件：
auto：表示讓瀏覽器自動(dòng)下載整個(gè)文件
none：表示讓瀏覽器不必預(yù)先下載文件
metadata：表示讓瀏覽器先獲取視頻文件開(kāi)頭的數(shù)據(jù)塊，從而足以確定一些基本信息（比如視頻的總時(shí)長(zhǎng)，第一幀圖像等）
<video width="400" height="300" controls preload="auto"> <source src="movie01.mp4" type="video/mp4"> 您的瀏覽器不支持 video 標(biāo)簽。 </video>
設(shè)置視頻的封面圖片
通過(guò)poster屬性可以設(shè)置視頻的封面圖片，瀏覽器在下面三種情況下會(huì)使用這個(gè)圖片：
（1）視頻第一幀未加載完畢
（2）把preload屬性設(shè)置為none
（3）沒(méi)有找到指定的視頻文件
<video width="400" height="300" controls preload="none" poster="images/5.jpg"> <source src="movie01.mp4" type="video/mp4"> 您的瀏覽器不支持 video 標(biāo)簽。 </video>
效果圖：
總結(jié)：以上就是本篇文章的全部?jī)?nèi)容了，希望通過(guò)這篇文章可以幫助大家學(xué)會(huì)去使用video標(biāo)簽。
