title: '前端開發系列039-基礎篇之Video基礎'
tags:
  - 網路程式設計系列
categories: []
date: 2017-10-06 00:00:02

本文簡單介紹HTML5中的video標籤，包括video元素的簡單介紹、基本使用以及常用事件和屬性。

一、標籤介紹

HTML5 規定了一種通過 Video 元素來包含視訊的標準方法。

Video標籤用於在瀏覽器中提供視訊控制元件來播放視訊，示例為：<video src="movie.ogg" controls="controls"></video>,其中controls 屬性提供新增播放、暫停和音量等控制，如果當前瀏覽器不支援video元素則顯示video標籤之間的內容。

video標籤的主要屬性

height 約束視訊的高度。

src 規定要播放的視訊的 URL。

autoplay 規定視訊就緒後馬上開始播放（自動播放視訊）。

width 約束視訊的寬度。（注意：無法通過縮小視訊的寬高來壓縮視訊）

loop 規定當視訊結束後將重新開始播放 , 如果設定該屬性，則視訊將迴圈播放。

preload 規定是否在頁面載入後載入視訊，如果設定了 autoplay 屬性，則忽略該屬性。

muted 規定視訊的音訊輸出應該被靜音，在高版本瀏覽器中，靜音可以保證視訊自動播放。

controls 規定瀏覽器應該為視訊提供播放控制元件包括：播放 暫停 定位 音量 全屏切換 字幕等。

preload屬性的取值有三種情況

auto - 當頁面載入後載入整個視訊

meta - 當頁面載入後只載入元資料

none - 當頁面載入後不載入視訊

Video元素支援三種視訊格式

Ogg = 帶有 Theora 視訊編碼和 Vorbis 音訊編碼的 Ogg 檔案

WebM = 帶有 VP8 視訊編碼和 Vorbis 音訊編碼的 WebM 檔案

MPEG4 = 帶有 H.264 視訊編碼和 AAC 音訊編碼的 MPEG 4 檔案

二、基本使用

video標籤的使用方式相對簡單，只需要在頁面中指定位置插入video標籤並設定必要的屬性即可，下面給出一個簡短的程式碼示例：

<video muted src="src/僵小魚.mp4" autoplay="autoplay" width="600"  controls="controls"> 
    您當前的瀏覽器不支援該控制元件，請升級瀏覽器！
</video>

說明 上面的程式碼會在頁面中插入一個寬度為600的視訊控制元件，src屬性控制的是播放視訊的資源路徑，autoplay表示設定自動播放，controls表示為標籤提供對用的播放控制元件，muted屬性表示設定讓視訊靜音（自動播放必須設定該屬性）。

source 元素說明

video 元素允許多個 source 元素，source 元素可以連結不同的視訊檔案，瀏覽器將使用第一個可識別格式的檔案，下面給出簡短的程式碼示例。

<video width="320" height="240" controls="controls">
          <source src="movie.ogg" type="video/ogg">
          <source src="movie.mp4" type="video/mp4">
          您的瀏覽器不支援當前控制元件！
</video>

三、屬性、方法和事件

video元素同樣擁有屬性、方法和事件。

video元素的方法包括播放play()、暫停pause()、載入load()

video元素的屬性包括是否靜音（muted）、是否自動播放（autoPlay）等，可以被讀取或設定。

video元素相關的DOM 事件還能夠幫我們監聽視訊音量改變（volumechange）、播放結束（ended）等。

下面給出一個簡短的程式碼示例，通過按鈕可以來控制視訊的播放、暫停和放大縮小。

<video src="src/僵小魚.mp4" width="600px" id="my_video"></video>
<div class="control-video">
    <button id="play_pause">播放</button>
    <button id="make_big">放大</button>
    <button id="make_small">縮小</button>
</div>

<script>
    var media = document.getElementById("my_video");
    var playPauseBtn = document.getElementById("play_pause");
    var makeBigBtn = document.getElementById("make_big");
    var makeSmallBtn = document.getElementById("make_small");

    playPauseBtn.onclick = function () {
        if (media.paused)
        {
            this.innerHTML = "暫停";
            media.play();
        }else
        {
            this.innerHTML = "播放";
            media.pause();
        }
    };
    makeBigBtn.onclick = function () {
        media.width += 50;
    };

    makeSmallBtn.onclick = function () {
        media.width -= 50;
    }
</script>

video元素的屬性列表

readyState 當前狀態

paused 是否暫停

controls 是否有預設控制條

currentSrc 當前資源的URL路徑

src 設定或返回資源的URL

startTime 開始時間，通常為0

volume 音量,可以設定（0~1）

ended 是否結束，布林型別值

autoPlay 是否自動播放，布林型別值

loop 是否迴圈播放，布林型別值

muted 是否靜音，布林型別值，可以設定

error 錯誤資訊，null表示正常

buffered 返回已緩衝區域，TimeRanges

seeking 是否正在seeking（查詢）

currentTime 當前播放的位置，可以設定修改

duration 當前資源長度，流則返回無限

played 返回已經播放的區域，TimeRanges

seekable 返回可以seek的區域 TimeRanges

defaultPlaybackRate 預設的回放速度，可以設定

playbackRate 當前播放速度(比如可以設定為1.5倍速度)，可以設定

error.code 錯誤資訊，具體的程式碼 1-使用者終止 2-網路錯誤 3-解碼錯誤 4-URL無效

preload 是否預載資源 取值情況有 none：不預載 metadata：預載資源

networkState 當前網路狀態，結果為數值 0-未初始化 1-未使用網路 2-正下載 3-沒找到資源

TimeRanges 區域物件

TimeRanges.length 區域段數

TimeRanges.start(index) 第index段區域的開始位置

TimeRanges.end(index) 第index段區域的結束位置

video元素的方法列表

media.play();                播放視訊
media.pause();               暫停視訊
media.load();                重新載入src指定的資源
media.canPlayType(type);     是否能播放某種格式的資源

說明：media為獲取到的頁面中的video標籤

video元素相關的事件

var eventTester = function(e){
    Media.addEventListener(e,function(){//.....},false);
}

eventTester("loadstart");       客戶端開始請求資料
eventTester("progress");        客戶端正在請求資料
eventTester("suspend");         延遲下載
eventTester("abort");           客戶端主動終止下載（不是因為錯誤引起）
eventTester("loadstart");       客戶端開始請求資料
eventTester("progress");        客戶端正在請求資料
eventTester("suspend");         延遲下載
eventTester("abort");           客戶端主動終止下載（不是因為錯誤引起），
eventTester("error");           請求資料時遇到錯誤
eventTester("stalled");         網速失速
eventTester("play");            play()和autoplay開始播放時觸發
eventTester("pause");           pause()觸發
eventTester("loadedmetadata");  成功獲取資源長度
eventTester("loadeddata");      成功獲取資料資訊
eventTester("waiting");         等待資料，並非錯誤
eventTester("playing");         開始回放
eventTester("canplay");         可以播放，但中途可能因為載入而暫停
eventTester("canplaythrough");  可以播放，歌曲全部載入完畢
eventTester("seeking");         尋找中
eventTester("seeked");          尋找完畢
eventTester("timeupdate");      播放時間改變
eventTester("ended");           播放結束
eventTester("ratechange");      播放速率改變
eventTester("durationchange");  資源長度改變
eventTester("volumechange");    音量改變