HTML <video> 播放影片 / 多媒體影音串流

<video> 標籤 (tag) 是用來播放影片或影音串流。

語法：

<video src="clip.mp4" controls></video>

<video> 標籤的屬性 (attributes)：

• src: 影片的位址 (URL)
• poster: 指定一個圖片位址，做為影片未開始播放之前的預覽圖
• preload: 給瀏覽器是否該預載影片的提示。有這些值可以使用：
  • none: 不要預載，因為使用者很可能不會播放該音訊，或你想多節省 server 頻寬
  • metadata: 先下載影片的元數據資料 (像是片長)
  • auto: 使用者很可能會播放該影片，可以先進行下載
• autoplay: 布林 (boolean) 屬性，控制是否自動播放影片，預設是 false
• loop: 布林 (boolean) 屬性，控制是否重複播放影片，預設是 false
• muted: 布林 (boolean) 屬性，控制是否靜音，預設是 false
• controls: 布林 (boolean) 屬性，指定是否顯示影音控制面板，由瀏覽器提供上面會有播放進度、暫停鈕、播放鈕、靜音鈕等，預設是 false
• width: 一個數字，設定影片顯示區域的寬度，單位是像素 (pixel)
• height: 一個數字，設定影片顯示區域的高度，單位是像素 (pixel)

<video> 的音源位址除了用 src 屬性指定，也可以在 <video> 標籤裡面用 <source> 標籤來設定，可以用多個 <source> 指定不同格式類型的影片來源，而瀏覽器自己會挑第一個有支援的格式來載入。

<source> 標籤的屬性：

• src: 音訊位址 (URL)
• type: 音訊的 MIME type，可能還會搭配有 codecs 指定編碼格式

使用範例：

<video controls>
    <source src="dogs.mp4" type="video/mp4; codecs='avc1, mp4a'">
    <source src="dogs.webm" type="video/webm; codecs='vp8.0, vorbis'">
</video>

<source> 是一個空元素不需要 closing tag。

<video> 裡面還可以用 <track> 標籤指定一個文字軌 - 基於時間的文字資訊檔 (timed text track)，實際用途像是影片的字幕，可以有多個 <track> 指定不同的文字軌。

<track> 標籤的屬性：

• src: 文字軌的檔案位址，通常是一個 WebVTT 檔
• srclang: 該文字軌的語言，像是 en, fr 等
• kind: 定義該文字軌該如何被使用。可以有這些值：
  • subtitles: 字幕檔，例如英文電影的中文字幕。預設值
  • captions: 對內容的標注，適用於靜音或雜音過多等的情況
  • descriptions: 對影片的介紹，給 screen reader 用
  • chapters: 章節標題，在內容切換時使用
  • metadata: 使用者看不到，給 JavaScript 用的
• label: 當列出可以用的 track 時，給瀏覽器用的 track 標題
• default: 設定為預設的文字軌

使用範例：

<video controls poster="/images/sample.gif">
   <source src="sample.mp4" type="video/mp4">
   <source src="sample.ogv" type="video/ogv">
  
   <track kind="captions" src="sampleCaptions.vtt" srclang="en">
   <track kind="descriptions" src="sampleDescriptions.vtt" srclang="en">
   <track kind="chapters" src="sampleChapters.vtt" srclang="en">
   <track kind="subtitles" src="sampleSubtitles_de.vtt" srclang="de">
   <track kind="subtitles" src="sampleSubtitles_en.vtt" srclang="en">
   <track kind="subtitles" src="sampleSubtitles_ja.vtt" srclang="ja">
   <track kind="subtitles" src="sampleSubtitles_oz.vtt" srclang="oz">
   <track kind="metadata" src="keyStage1.vtt" srclang="en" label="Key Stage 1">
   <track kind="metadata" src="keyStage2.vtt" srclang="en" label="Key Stage 2">
   <track kind="metadata" src="keyStage3.vtt" srclang="en" label="Key Stage 3">
</video>

<track> 是一個空元素不需要 closing tag。

在 <video> 裡面 <source> 和 <track> 以外的內容會被當做成是 fallback 內容，給瀏覽器在資源載入失敗或不支援 <video> 標籤時顯示。

<video controls>
    <source src="dogs.mp4" type="video/mp4; codecs='avc1, mp4a'">
    <source src="dogs.webm" type="video/webm; codecs='vp8.0, vorbis'">
  
    <p>你的瀏覽器不支援 HTML 5 video</p>
</video>