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

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

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

瀏覽器對視頻格式的支持

0x1 在 Video 中嵌入視頻

<video src="/movie.mp4" controls="controls">
你就用這個(gè)瀏覽器有出息嗎？
</video>
當(dāng)頁面載入時(shí)，會(huì)引用 movie.mp4 文件，如果瀏覽器無法支持 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è)屬性，通過各個(gè)屬性可以控制相關(guān)的功能。例如 controls 為視頻提供進(jìn)度、音量、全屏的控制。盡管屬性與值對應(yīng)，但是我們?nèi)匀豢梢允褂?controls 來代替 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í)候，就可以在停下來的地方繼續(xù)觀看。我們可以通過HTML DOM來控制視頻播放進(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>

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