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

audiovideo

<audio>

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

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

常見的音訊格式

  1. mp3
  2. AAC, m4a (mp4)
  3. ogg (Vorbis)
  4. webm (Vorbis)

詳細瀏覽器支援格式可參閲, MDN 官網

<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)
  2. ogv, ogg (Theora video and Vorbis audio)
  3. webm (VP8 video and Vorbis audio)

詳細瀏覽器支援格式可參閲, MDN 官網

<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"

      指定符合媒體檔的格式,必須是有效的 media types (英文) ,如, 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)