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

• XMedia Recode (英文) ：可轉換各種格式的聲音及視訊檔，有可攜式免安裝版 (portable) 。