HTML5視頻支持 音頻支持

許多時髦的網站都提供視頻。HTML5 提供了展現視頻的標準。

檢測您的瀏覽器是否支持 HTML5 視頻：

Yes! Full support!

Web 上的視頻

直到如今，仍然不存在一項旨在網頁上顯示視頻的標準。

今天，大多數視頻是經過插件（好比 Flash）來顯示的。然而，並不是全部瀏覽器都擁有一樣的插件。

HTML5 規定了一種經過 video 元素來包含視頻的標準方法。

視頻格式

當前，video 元素支持三種視頻格式：

格式	IE	Firefox	Opera	Chrome	Safari
Ogg	No	3.5+	10.5+	5.0+	No
MPEG 4	9.0+	No	No	5.0+	3.0+
WebM	No	4.0+	10.6+	6.0+	No

Ogg = 帶有 Theora 視頻編碼和 Vorbis 音頻編碼的 Ogg 文件

MPEG4 = 帶有 H.264 視頻編碼和 AAC 音頻編碼的 MPEG 4 文件

WebM = 帶有 VP8 視頻編碼和 Vorbis 音頻編碼的 WebM 文件

如何工做

如需在 HTML5 中顯示視頻，您全部須要的是：

<video src="movie.ogg" controls="controls">
</video>

TIY

control 屬性供添加播放、暫停和音量控件。

包含寬度和高度屬性也是不錯的主意。

<video> 與 </video> 之間插入的內容是供不支持 video 元素的瀏覽器顯示的：

實例

<video src="movie.ogg" width="320" height="240" controls="controls">
Your browser does not support the video tag.
</video>

TIY

上面的例子使用一個 Ogg 文件，適用於Firefox、Opera 以及 Chrome 瀏覽器。

要確保適用於 Safari 瀏覽器，視頻文件必須是 MPEG4 類型。

video 元素容許多個 source 元素。source 元素能夠連接不一樣的視頻文件。瀏覽器將使用第一個可識別的格式：

實例

<video width="320" height="240" controls="controls">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

TIY

Internet Explorer

Internet Explorer 8 不支持 video 元素。在 IE 9 中，將提供對使用 MPEG4 的 video 元素的支持。

HTML5 <video> - 使用 DOM 進行控制

HTML5 <video> 元素一樣擁有方法、屬性和事件。

其中的方法用於播放、暫停以及加載等。其中的屬性（好比時長、音量等）能夠被讀取或設置。其中的 DOM 事件可以通知您，比方說，<video> 元素開始播放、已暫停，已中止，等等。

下例中簡單的方法，向咱們演示瞭如何使用 <video> 元素，讀取並設置屬性，以及如何調用方法。

實例

爲視頻建立簡單的播放/暫停以及調整尺寸控件：

播放/暫停 大 中 小

上面的例子調用了兩個方法：play() 和 pause()。它同時使用了兩個屬性：paused 和 width。

親自試一試

HTML5 <video> - 方法、屬性以及事件

下面列出了大多數瀏覽器支持的視頻方法、屬性和事件：

方法	屬性	事件
play()	currentSrc	play
pause()	currentTime	pause
load()	videoWidth	progress
canPlayType	videoHeight	error
	duration	timeupdate
	ended	ended
	error	abort
	paused	empty
	muted	emptied
	seeking	waiting
	volume	loadedmetadata
	height
	width

註釋：在全部屬性中，只有 videoWidth 和 videoHeight 屬性是當即可用的。在視頻的元數據已加載後，其餘屬性纔可用。

TML5 提供了播放音頻的標準。

Web 上的音頻

直到如今，仍然不存在一項旨在網頁上播放音頻的標準。

今天，大多數音頻是經過插件（好比 Flash）來播放的。然而，並不是全部瀏覽器都擁有一樣的插件。

HTML5 規定了一種經過 audio 元素來包含音頻的標準方法。

audio 元素可以播放聲音文件或者音頻流。

音頻格式

當前，audio 元素支持三種音頻格式：

	IE 9	Firefox 3.5	Opera 10.5	Chrome 3.0	Safari 3.0
Ogg Vorbis		√	√	√
MP3	√			√	√
Wav		√	√		√

如何工做

如需在 HTML5 中播放音頻，您全部須要的是：

<audio src="song.ogg" controls="controls">
</audio>

control 屬性供添加播放、暫停和音量控件。

<audio> 與 </audio> 之間插入的內容是供不支持 audio 元素的瀏覽器顯示的：

實例

<audio src="song.ogg" controls="controls">
Your browser does not support the audio tag.
</audio>

親自試一試

上面的例子使用一個 Ogg 文件，適用於Firefox、Opera 以及 Chrome 瀏覽器。

要確保適用於 Safari 瀏覽器，音頻文件必須是 MP3 或 Wav 類型。

audio 元素容許多個 source 元素。source 元素能夠連接不一樣的音頻文件。瀏覽器將使用第一個可識別的格式：

實例

<audio controls="controls">
  <source src="song.ogg" type="audio/ogg">
  <source src="song.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>

親自試一試

Internet Explorer

Internet Explorer 8 不支持 audio 元素。在 IE 9 中，將提供對 audio 元素的支持。

<audio> 標籤的屬性

屬性	值	描述
autoplay	autoplay	若是出現該屬性，則音頻在就緒後立刻播放。
controls	controls	若是出現該屬性，則向用戶顯示控件，好比播放按鈕。
loop	loop	若是出現該屬性，則每當音頻結束時從新開始播放。
preload	preload	若是出現該屬性，則音頻在頁面加載時進行加載，並預備播放。 若是使用 "autoplay"，則忽略該屬性。
src	url	要播放的音頻的 URL。