Video 是 HTML5 中新增的標簽，使用 Video 標簽可以播放 ogg、mp4、webm 等格式的視頻，Video 標簽的引入，減少前端頁面對 Flash 動畫的依賴。

0x0 預(yù)備知識

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

瀏覽器對視頻格式的支持

0x1 在 Video 中嵌入視頻

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

當頁面載入時，會引用 movie.mp4 文件，如果瀏覽器無法支持 HTML5，則會提示 Video 中的內(nèi)容。

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

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

0x2 使用 Video 的控制屬性

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

下面的代碼提供自動緩存、靜音、及控制條：

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

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

<video autoplay loop controls> 
<source src="/movie.mp4" type="video/mp4"> 
<source src="/movie.ogg" type="video/ogg"> 
你就用這個瀏覽器有出息嗎？ 
<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"> 
你就用這個瀏覽器有出息嗎？ 
<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)站上，會記錄用戶上次播放視頻的進度，當用戶再次進入網(wǎng)站的時候，就可以在停下來的地方繼續(xù)觀看。我們可以通過HTML DOM來控制視頻播放進度：

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

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