Video 是 HTML5 中新增的標(biāo)簽，使用 Video 標(biāo)簽可以播放 ogg、mp4、webm 等格式的視頻，Video 標(biāo)簽的引入，減少前端頁(yè)面對(duì) Flash 動(dòng)畫的依賴。

0x0 預(yù)備知識(shí)

不同的瀏覽器支持的視頻格式可能不同，以下是摘自 W3School 各個(gè)瀏覽器對(duì)三種視頻格式的支持情況：

瀏覽器對(duì)視頻格式的支持

0x1 在 Video 中嵌入視頻

<video src="/movie.mp4" controls="controls"> 
你就用這個(gè)瀏覽器有出息嗎？ 
</video> 

當(dāng)頁(yè)面載入時(shí)，會(huì)引用 movie.mp4 文件，如果瀏覽器無(wú)法支持 HTML5，則會(huì)提示 Video 中的內(nèi)容。

顯然，為適應(yīng)不同的瀏覽器，我們也需要準(zhǔn)備多種不同的格式的視頻，并使用 video 引用它們：

<video controls="controls"> 
<source src="/movie.mp4" type="video/mp4"> 
<source src="/movie.ogg" type="video/ogg"> 
你就用這個(gè)瀏覽器有出息嗎？ 
<video> 

0x2 使用 Video 的控制屬性

Video 提供多個(gè)屬性，通過(guò)各個(gè)屬性可以控制相關(guān)的功能。例如 controls 為視頻提供進(jìn)度、音量、全屏的控制。盡管屬性與值對(duì)應(yīng)，但是我們?nèi)匀豢梢允褂?controls 來(lái)代替 controls = “controls”。

下面的代碼提供自動(dòng)緩存、靜音、及控制條：

<video autobuffer muted controls> 
<source src="/movie.mp4" type="video/mp4"> 
<source src="/movie.ogg" type="video/ogg"> 
你就用這個(gè)瀏覽器有出息嗎？ 
<video>  

自動(dòng)播放并循環(huán)：

<video autoplay loop controls> 
<source src="/movie.mp4" type="video/mp4"> 
<source src="/movie.ogg" type="video/ogg"> 
你就用這個(gè)瀏覽器有出息嗎？ 
<video>  

0x3 使用 HTML DOM 控制 Video 播放

基本的播放、暫停、靜音功能控制：

 <button onclick="play()">播放/暫停</button> 
<button onclick="mute()">靜音</button> 
 
<video id="player" controls> 
<source src="/movie.mp4" type="video/mp4"> 
<source src="/movie.ogg" type="video/ogg"> 
你就用這個(gè)瀏覽器有出息嗎？ 
<video> 
 
<script> 
function play() { 
var player = document.getElementById("player"); 
if(player.play) { 
player.pause(); 
}else { 
player.play(); 
} 
} 
 
function mute() { 
var player = document.getElementById("player"); 
player.muted = player.muted ? false : true; 
} 
</script> 

通常在一些視頻網(wǎng)站上，會(huì)記錄用戶上次播放視頻的進(jìn)度，當(dāng)用戶再次進(jìn)入網(wǎng)站的時(shí)候，就可以在停下來(lái)的地方繼續(xù)觀看。我們可以通過(guò)HTML DOM來(lái)控制視頻播放進(jìn)度：

 <video id="player" controls> 
<source src="/movie.mp4" type="video/mp4"> 
<source src="/movie.ogg" type="video/ogg"> 
你就用這個(gè)瀏覽器有出息嗎？ 
<video> 
 
<script> 
document.getElementById("player").addEventListener( 
"loadedmetadata", 
function() { 
this.currentTime = 5; 
}); 
</script> 

通過(guò) JavaScript 調(diào)整 Video 的 currentTime 屬性來(lái)實(shí)現(xiàn)進(jìn)度控制，注意單位為秒而非毫秒。由于 JavaScript 需要獲取視頻的總時(shí)間以便進(jìn)行調(diào)整，所以在控制進(jìn)度之前，需要等待視頻信息加載完成。所以，我們?yōu)?Video 對(duì)象綁定 loadedmetadata 事件，該事件在視頻信息加載完畢時(shí)觸發(fā)。