Video 是 HTML5 中新增的标簽，使用 Video 标簽可以播放 ogg、mp4、webm 等格式的視訊，Video 标簽的引入，減少前端頁面對 Flash 動畫的依賴。
0x0 預備知識
不同的浏覽器支援的視訊格式可能不同，以下是摘自 W3School 各個浏覽器對三種視訊格式的支援情況：
浏覽器對視訊格式的支援
0x1 在 Video 中嵌入視訊
你就用這個浏覽器有出息嗎？
當頁面載入時，會引用 movie.mp4 檔案，如果浏覽器無法支援 HTML5，則會提示 Video 中的内容。
顯然，為适應不同的浏覽器，我們也需要準備多種不同的格式的視訊，并使用 video 引用它們：
你就用這個浏覽器有出息嗎？
0x2 使用 Video 的控制屬性
Video 提供多個屬性，通過各個屬性可以控制相關的功能。例如 controls 為視訊提供進度、音量、全屏的控制。盡管屬性與值對應，但是我們仍然可以使用 controls 來代替 controls = “controls”。
下面的代碼提供自動緩存、靜音、及控制條：
你就用這個浏覽器有出息嗎？
自動播放并循環：
你就用這個浏覽器有出息嗎？
0x3 使用 HTML DOM 控制 Video 播放
基本的播放、暫停、靜音功能控制：
播放/暫停
靜音
你就用這個浏覽器有出息嗎？
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;
}
通常在一些視訊網站上，會記錄使用者上次播放視訊的進度，當使用者再次進入網站的時候，就可以在停下來的地方繼續觀看。我們可以通過HTML DOM來控制視訊播放進度：
你就用這個浏覽器有出息嗎？
document.getElementById("player").addEventListener(
"loadedmetadata",
function() {
this.currentTime =5;
});
通過 JavaScript 調整 Video 的 currentTime 屬性來實作進度控制，注意機關為秒而非毫秒。由于 JavaScript 需要擷取視訊的總時間以便進行調整，是以在控制進度之前，需要等待視訊資訊加載完成。是以，我們為 Video 對象綁定 loadedmetadata 事件，該事件在視訊資訊加載完畢時觸發。
【編輯推薦】
【責任編輯：chenqingxiang TEL：(010)68476606】
點贊 0