影音媒體元素 <audio>, <video>

<audio>

在文件中附加聲音。屬性參閱共用的屬性。常見支援格式為 mp3, ogg (vorbis 編碼), webm (vorbis 編碼) 。由於目前瀏覽器支援的格式不盡相同，建議使用媒體元素的專用子元素 source 元素來指出多個不同格式媒體檔位址，瀏覽器會依序找到支援的格式為止。

html 片段
<audio controls loop>
  <source src="audio/music1.mp3" />
  <source src="audio/music1.webm" />
 </audio>

常見的聲音格式

  1. mp3

    支援的瀏覽器： ie, google chrome, safari, firefox.

  2. AAC

    支援的瀏覽器： ie, google chrome, firefox.

  3. ogg (Vorbis)

    支援的瀏覽器： google chrome, firefox, opera.

  4. webm (Vorbis)

    支援的瀏覽器： google chrome, firefox, opera.

詳細瀏覽器支援格式可參閲， Mozilla 官網。

<video>

在文件中附加視訊。屬性參閱共用的屬性。常見支援格式為 mp4, ogg (Theora 編碼), webm (vp8 編碼) 。由於目前瀏覽器支援的格式不盡相同，建議使用媒體元素的專用子元素 source 元素來指出多個不同格式媒體檔位址，瀏覽器會依序找到支援的格式為止。

html 片段
<video controls>
  <source src="video/movie1.mp4" />
  <source src="video/movie1.webm" />
 </video>

常見的視訊格式

  1. mp4 (MPEG-4 or H.264 video and AAC or mp3 audio)

    支援的瀏覽器： ie, google chrome, safari, firefox.

  2. ogv, ogg (Theora video and Vorbis audio)

    支援的瀏覽器： google chrome, firefox, opera.

  3. webm (VP8 video and Vorbis audio)

    支援的瀏覽器： google chrome, firefox, opera.

詳細瀏覽器支援格式可參閲， Mozilla 官網。

<source>

搭配媒體元素的子元素，同一個媒體元素可附加多個 source 子元素，以指定不同格式來源檔，瀏覽器會依序找到第一個支援的格式為止，並播放該檔。 type 屬性可明確指定媒體檔的格式。

html 片段
<video controls>
  <source src="video/movie1.mp4" type="video/mp4" />
  <source src="video/movie1.webm" type="video/webm" />
 </video>

source 元素的專有屬性

  1. src
    值
    • "URL"

      由編寫人定義，如， src="media/movie1.webm" 。

    說明

    指出影音媒體的檔案位址。與媒體元素的 src 屬性相同功用。

  2. type
    值
    • "MIME type"

      指定符合媒體檔的格式，必須是有效的 MIME type (英文) ，如， type="video/webm" 或 type="video/ogg; codecs='theora, vorbis'"。

    說明

    明確指定媒體檔格式，讓瀏覽器立即決定媒體格式可否播放，而不需先偵測媒體檔。可增加 codecs 屬性參數，更明確指定媒體檔編碼方式。

影音媒體元素共用的專有屬性 (common attributes)

  1. src
    值
    • "URL"

      由編寫人定義，如， src="media/movie1.webm" 。

    說明

    指出影音媒體的檔案位址。需注意目前標準格式瀏覽器的支援程度不盡相同。

  2. controls
    值
    • "controls"

      顯示播放控制面板，如 controls="controls" (html 可省略值)。

    說明

    定義是否由瀏覽器顯示播放控制面板。

  3. autoplay
    值
    • "autoplay"

      文件載入即自動開始播放，如 autoplay="autoplay" (html 可省略值)。

    說明

    定義文件載入後是否自動開始播放。

  4. loop
    值
    • "loop"

      重複播放，如 loop="loop" (html 可省略值)。

    說明

    定義是否要不停地重複播放。

  5. muted
    值
    • "muted"

      靜音，如 muted="muted" (html 可省略值)。

    說明

    定義是否在靜音狀況。通常在控制板上會有一個靜音鈕。

免費影音視訊轉換格式工具 (free video / audio converter)