HTML 多媒體、Object 元素、音頻、視頻

Web 上的多媒體指的是音效、音樂、視頻和動畫。

現代網絡瀏覽器已支持不少多媒體格式。

什麼是多媒體？

多媒體來自多種不一樣的格式。它能夠是您聽到或看到的任何內容，文字、圖片、音樂、音效、錄音、電影、動畫等等。

在因特網上，您會常常發現嵌入網頁中的多媒體元素，現代瀏覽器已支持多種多媒體格式。

在本教程中，您將瞭解到不一樣的多媒體格式，以及如何在您的網頁中使用它們。

瀏覽器支持

第一款因特網瀏覽器只支持文本，並且即便是對文本的支持也僅限於單一字體和單一顏色。隨後誕生了支持顏色、字體和文本樣式的瀏覽器，圖片支持也被加入。

不一樣的瀏覽器以不一樣的方式處理對音效、動畫和視頻的支持。某些元素可以之內聯的方式處理，而某些則須要額外的插件。

您將在下面的章節學習更多有關插件的知識。

多媒體格式

多媒體元素（好比視頻和音頻）存儲於媒體文件中。

肯定媒體類型的最經常使用的方法是查看文件擴展名。當瀏覽器獲得文件擴展名 .htm 或 .html 時，它會假定該文件是 HTML 頁面。.xml 擴展名指示 XML 文件，而 .css 擴展名指示樣式表。圖片格式則經過 .gif 或 .jpg 來識別。

多媒體元素元素也擁有帶有不一樣擴展名的文件格式，好比 .swf、.wmv、.mp3 以及 .mp4。

視頻格式

MP4 格式是一種新的即將普及的因特網視頻格式。HTML5 、Flash 播放器以及優酷等視頻網站均支持它。

格式	文件	描述
AVI	.avi	AVI (Audio Video Interleave) 格式是由微軟開發的。全部運行 Windows 的計算機都支持 AVI 格式。它是因特網上很常見的格式，但非 Windows 計算機並不老是可以播放。
WMV	.wmv	Windows Media 格式是由微軟開發的。Windows Media 在因特網上很常見，可是若是未安裝額外的（免費）組件，就沒法播放 Windows Media 電影。一些後期的 Windows Media 電影在全部非 Windows 計算機上都沒法播放，由於沒有合適的播放器。
MPEG	.mpg .mpeg	MPEG (Moving Pictures Expert Group) 格式是因特網上最流行的格式。它是跨平臺的，獲得了全部最流行的瀏覽器的支持。
QuickTime	.mov	QuickTime 格式是由蘋果公司開發的。QuickTime 是因特網上常見的格式，可是 QuickTime 電影不能在沒有安裝額外的（免費）組件的 Windows 計算機上播放。
RealVideo	.rm .ram	RealVideo 格式是由 Real Media 針對因特網開發的。該格式容許低帶寬條件下（在線視頻、網絡電視）的視頻流。因爲是低帶寬優先的，質量常會下降。
Flash	.swf .flv	Flash (Shockwave) 格式是由 Macromedia 開發的。Shockwave 格式須要額外的組件來播放。可是該組件會預裝到 Firefox 或 IE 之類的瀏覽器上。
Mpeg-4	.mp4	Mpeg-4 (with H.264 video compression) 是一種針對因特網的新格式。事實上，YouTube 推薦使用 MP4。YouTube 接收多種格式，而後所有轉換爲 .flv 或 .mp4 以供分發。愈來愈多的視頻發佈者轉到 MP4，將其做爲 Flash 播放器和 HTML5 的因特網共享格式。

聲音格式

格式	文件	描述
MIDI	.mid .midi	MIDI (Musical Instrument Digital Interface) 是一種針對電子音樂設備（好比合成器和聲卡）的格式。MIDI 文件不含有聲音，但包含可被電子產品（好比聲卡）播放的數字音樂指令。 點擊這裏播放 The Beatles。 由於 MIDI 格式僅包含指令，因此 MIDI 文件極其小巧。上面的例子只有 23k 的大小，但卻能播放將近 5 分鐘。MIDI 獲得了普遍的平臺上的大量軟件的支持。大多數流行的網絡瀏覽器都支持 MIDI。
RealAudio	.rm .ram	RealAudio 格式是由 Real Media 針對因特網開發的。該格式也支持視頻。該格式容許低帶寬條件下的音頻流（在線音樂、網絡音樂）。因爲是低帶寬優先的，質量常會下降。
Wave	.wav	Wave (waveform) 格式是由 IBM 和微軟開發的。全部運行 Windows 的計算機和全部網絡瀏覽器（除了 Google Chrome）都支持它。
WMA	.wma	WMA 格式 (Windows Media Audio)，質量優於 MP3，兼容大多數播放器，除了 iPod。WMA 文件可做爲連續的數據流來傳輸，這使它對於網絡電臺或在線音樂很實用。
MP3	.mp3 .mpga	MP3 文件其實是 MPEG 文件的聲音部分。MPEG 格式最初是由運動圖像專家組開發的。MP3 是其中最受歡迎的針對音樂的聲音格式。期待將來的軟件系統都支持它。

使用哪一種格式？

WAVE 是因特網上最受歡迎的無壓縮聲音格式，全部流行的瀏覽器都支持它。若是您須要未經壓縮的聲音（音樂或演講），那麼您應該使用 WAVE 格式。

MP3 是最新的壓縮錄製音樂格式。MP3 這個術語已經成爲數字音樂的代名詞。若是您的網址從事錄製音樂，那麼 MP3 是一個選項。

<object> 的做用是支持 HTML 助手（插件）。

HTML 助手（插件）

輔助應用程序（helper application）是可由瀏覽器啓動的程序。輔助應用程序也稱爲插件。

輔助程序可用於播放音頻和視頻（以及其餘）。輔助程序是使用 <object> 標籤來加載的。

使用輔助程序播放視頻和音頻的一個優點是，您可以容許用戶來控制部分或所有播放設置。

大多數輔助應用程序容許對音量設置和播放功能（好比後退、暫停、中止和播放）的手工（或程序的）控制。

在 HTML 中播放視頻的最好方式？

如需瞭解在 HTML 中包含音視頻的最好方法，請參閱下一章節。

使用 QuickTime 來播放 Wave 音頻

實例

<object width="420" height="360"
classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<param name="src" value="bird.wav" />
<param name="controller" value="true" />
</object>

使用 QuickTime 來播放 MP4 視頻

實例

<object width="420" height="360"
classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<param name="src" value="movie.mp4" />
<param name="controller" value="true" />
</object>

使用 Flash 來播放 SWF 視頻

實例

<object width="400" height="40"
classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/
pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0">
<param name="SRC" value="bookmark.swf">
<embed src="bookmark.swf" width="400" height="40"></embed>
</object>

使用 Windows Media Player 來播放 WMV 影片

下面的例子展現用於播放 Windows 媒體文件的推薦代碼：

實例

<object width="100%" height="100%"
type="video/x-ms-asf" url="3d.wmv" data="3d.wmv"
classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
<param name="url" value="3d.wmv">
<param name="filename" value="3d.wmv">
<param name="autostart" value="1">
<param name="uiMode" value="full" />
<param name="autosize" value="1">
<param name="playcount" value="1">
<embed type="application/x-mplayer2" src="3d.wmv" width="100%"
 height="100%" autostart="true" showcontrols="true" 
pluginspage="http://www.microsoft.com/Windows/MediaPlayer/"></embed>
</object>

HTML 音頻

在 HTML 中播放聲音的方法有不少種。

問題，問題，以及解決方法

在 HTML 中播放音頻並不容易！

您須要諳熟大量技巧，以確保您的音頻文件在全部瀏覽器中（Internet Explorer, Chrome, Firefox, Safari, Opera）和全部硬件上（PC, Mac , iPad, iPhone）都可以播放。

在本章，W3School 爲您總結了問題和解決方法。

使用插件

瀏覽器插件是一種擴展瀏覽器標準功能的小型計算機程序。

插件有不少用途：播放音樂、顯示地圖、驗證銀行帳號，控制輸入等等。

可以使用 <object> 或 <embed> 標籤來將插件添加到 HTML 頁面。

這些標籤訂義資源（一般非 HTML 資源）的容器，根據類型，它們即會由瀏覽器顯示，也會由外部插件顯示。

使用 <embed> 元素

<embed> 標籤訂義外部（非 HTML）內容的容器。（這是一個 HTML5 標籤，在 HTML4 中是非法的，可是全部瀏覽器中都有效）。

下面的代碼片斷可以顯示嵌入網頁中的 MP3 文件：

實例

<embed height="100" width="100" src="song.mp3" />

問題：

• <embed> 標籤在 HTML 4 中是無效的。頁面沒法經過 HTML 4 驗證。
• 不一樣的瀏覽器對音頻格式的支持也不一樣。
• 若是瀏覽器不支持該文件格式，沒有插件的話就沒法播放該音頻。
• 若是用戶的計算機未安裝插件，沒法播放音頻。
• 若是把該文件轉換爲其餘格式，仍然沒法在全部瀏覽器中播放。

註釋：使用 <!DOCTYPE html> (HTML5) 解決驗證問題。

使用 <object> 元素

<object tag> 標籤也能夠定義外部（非 HTML）內容的容器。

下面的代碼片斷可以顯示嵌入網頁中的 MP3 文件：

實例

<object height="100" width="100" data="song.mp3"></object>

問題：

• 不一樣的瀏覽器對音頻格式的支持也不一樣。
• 若是瀏覽器不支持該文件格式，沒有插件的話就沒法播放該音頻。
• 若是用戶的計算機未安裝插件，沒法播放音頻。
• 若是把該文件轉換爲其餘格式，仍然沒法在全部瀏覽器中播放。

使用 HTML5 <audio> 元素

<audio> 元素是一個 HTML5 元素，在 HTML 4 中是非法的，但在全部瀏覽器中都有效。

實例

<audio controls="controls">
  <source src="song.mp3" type="audio/mp3" />
  <source src="song.ogg" type="audio/ogg" />
Your browser does not support this audio format.
</audio>

上面的例子使用了一個 mp3 文件，這樣它在 Internet Explorer、Chrome 以及 Safari 中是有效的。

爲了使這段音頻在 Firefox 和 Opera 中一樣有效，添加了一個 ogg 類型的文件。若是失敗，會顯示錯誤消息。

問題：

• <audio> 標籤在 HTML 4 中是無效的。您的頁面沒法經過 HTML 4 驗證。
• 您必須把音頻文件轉換爲不一樣的格式。
• <audio> 元素在老式瀏覽器中不起做用。

註釋：使用 <!DOCTYPE html> (HTML5) 解決驗證問題。

最好的 HTML 解決方法

實例

<audio controls="controls" height="100" width="100">
  <source src="song.mp3" type="audio/mp3" />
  <source src="song.ogg" type="audio/ogg" />
<embed height="100" width="100" src="song.mp3" />
</audio>

上面的例子使用了兩個不一樣的音頻格式。HTML5 <audio> 元素會嘗試以 mp3 或 ogg 來播放音頻。若是失敗，代碼將回退嘗試 <embed> 元素。

問題：

• 您必須把音頻轉換爲不一樣的格式。
• <audio> 元素沒法經過 HTML 4 和 XHTML 驗證。
• <embed> 元素沒法經過 HTML 4 和 XHTML 驗證。
• <embed> 元素沒法回退來顯示錯誤消息。

註釋：使用 <!DOCTYPE html> (HTML5) 解決驗證問題。

向網站添加音頻的最簡單方法

向網頁添加音頻的最簡單的方法是什麼？

雅虎的媒體播放器絕對算其中之一。

使用雅虎媒體播放器是一個不一樣的途徑。您只需簡單地讓雅虎來完成歌曲播放的工做就行了。

它能播放 mp3 以及一系列其餘格式。經過一行簡單的代碼，您就能夠把它添加到網頁中，輕鬆地將 HTML 頁面轉變爲專業的播放列表。

雅虎媒體播放器

實例

<a href="song.mp3">Play Sound</a>

<script type="text/javascript" src="http://mediaplayer.yahoo.com/js">
</script>

使用雅虎播放器是免費的。如需使用它，您須要把這段 JavaScript 插入網頁底部：

<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>

而後只需簡單地把 MP3 文件連接到您的 HTML 中，JavaScript 會自動地爲每首歌建立播放按鈕：

<a href="song1.mp3">Play Song 1</a>
<a href="song2.mp3">Play Song 2</a>
...
...
...

雅虎媒體播放器爲您的用戶提供的是一個小型的播放按鈕，而不是完整的播放器。不過，當您點擊該按鈕，會彈出完整的播放器。

請注意，這個播放器始終停靠在窗框底部。只需點擊它，就可將其滑出。

使用超連接

若是網頁包含指向媒體文件的超連接，大多數瀏覽器會使用「輔助應用程序」來播放文件。

如下代碼片斷顯示指向 mp3 文件的連接。若是用戶點擊該連接，瀏覽器會啓動「輔助應用程序」來播放該文件：

實例

<a href="song.mp3">Play the sound</a>

內聯的聲音

當您在網頁中包含聲音，或者做爲網頁的組成部分時，它被稱爲內聯聲音。

若是您打算在 web 應用程序中使用內聯聲音，您須要意識到不少人都以爲內聯聲音使人惱火。同時請注意，用戶可能已經關閉了瀏覽器中的內聯聲音選項。

咱們最好的建議是隻在用戶但願聽到內聯聲音的地方包含它們。一個正面的例子是，在用戶須要聽到錄音並點擊某個連接時，會打開頁面而後播放錄音。

HTML 4.01 多媒體標籤

標籤	描述
<applet>	不同意。定義內嵌 applet。
<embed>	HTML4 中不同意，HTML5 中容許。定義內嵌對象。
<object>	定義內嵌對象。
<param>	定義對象的參數。

HTML 5 多媒體標籤

標籤	描述
<audio>	標籤訂義聲音，好比音樂或其餘音頻流。
<embed>	標籤訂義嵌入的內容，好比插件。

在 HTML 中播放視頻的方法有不少種。

實例

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240" />
  </object>
</video>

親自試一試

問題，問題，以及解決方法

在 HTML 中播放視頻並不容易！

您須要諳熟大量技巧，以確保您的視頻文件在全部瀏覽器中（Internet Explorer, Chrome, Firefox, Safari, Opera）和全部硬件上（PC, Mac , iPad, iPhone）都可以播放。

在本章，W3School 爲您總結了問題和解決方法。

使用 <embed> 標籤

<embed> 標籤的做用是在 HTML 頁面中嵌入多媒體元素。

下面的 HTML 代碼顯示嵌入網頁的 Flash 視頻：

實例

<embed src="movie.swf" height="200" width="200"/>

親自試一試

問題

• HTML4 沒法識別 <embed> 標籤。您的頁面沒法經過驗證。
• 若是瀏覽器不支持 Flash，那麼視頻將沒法播放
• iPad 和 iPhone 不能顯示 Flash 視頻。
• 若是您將視頻轉換爲其餘格式，那麼它仍然不能在全部瀏覽器中播放。

使用 <object> 標籤

<object> 標籤的做用是在 HTML 頁面中嵌入多媒體元素。

下面的 HTML 片斷顯示嵌入網頁的一段 Flash 視頻：

實例

<object data="movie.swf" height="200" width="200"/>

問題

• 若是瀏覽器不支持 Flash，將沒法播放視頻。
• iPad 和 iPhone 不能顯示 Flash 視頻。
• 若是您將視頻轉換爲其餘格式，那麼它仍然不能在全部瀏覽器中播放。

使用 <video> 標籤

<video> 是 HTML 5 中的新標籤。

<video> 標籤的做用是在 HTML 頁面中嵌入視頻元素。

如下 HTML 片斷會顯示一段嵌入網頁的 ogg、mp4 或 webm 格式的視頻：

實例

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

問題

• 您必須把視頻轉換爲不少不一樣的格式。
• <video> 元素在老式瀏覽器中無效。
• <video> 元素沒法經過 HTML 4 和 XHTML 驗證。

最好的 HTML 解決方法

HTML 5 + <object> + <embed>

<video width="320" height="240" controls="controls">
  <source src="movie.mp4" type="video/mp4" />
  <source src="movie.ogg" type="video/ogg" />
  <source src="movie.webm" type="video/webm" />
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240" />
  </object>
</video>

上例中使用了 4 中不一樣的視頻格式。HTML 5 <video> 元素會嘗試播放以 mp四、ogg 或 webm 格式中的一種來播放視頻。若是均失敗，則回退到 <embed> 元素。

問題

• 您必須把視頻轉換爲不少不一樣的格式
• <video> 元素沒法經過 HTML 4 和 XHTML 驗證。
• <embed> 元素沒法經過 HTML 4 和 XHTML 驗證。

註釋：使用 <!DOCTYPE html> (HTML5) 解決驗證問題。

優酷解決方案

在 HTML 中顯示視頻的最簡單的方法是使用優酷等視頻網站。

若是您但願在網頁中播放視頻，那麼您能夠把視頻上傳到優酷等視頻網站，而後在您的網頁中插入 HTML 代碼便可播放視頻：

<embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf" 
width="480" height="400" 
type="application/x-shockwave-flash">
</embed>

使用超連接

若是網頁包含指向媒體文件的超連接，大多數瀏覽器會使用「輔助應用程序」來播放文件。

如下代碼片斷顯示指向 AVI 文件的連接。若是用戶點擊該連接，瀏覽器會啓動「輔助應用程序」，好比 Windows Media Player 來播放這個 AVI 文件：

實例

<a href="movie.swf">Play a video file</a>

關於內聯視頻的一段註釋

當視頻被包含在網頁中時，它被稱爲內聯視頻。

若是您打算在 web 應用程序中使用內聯視頻，您須要意識到不少人都以爲內聯視頻使人惱火。

同時請注意，用戶可能已經關閉了瀏覽器中的內聯視頻選項。

咱們最好的建議是隻在用戶但願看到內聯視頻的地方包含它們。一個正面的例子是，在用戶須要看到視頻並點擊某個連接時，會打開頁面而後播放視頻。

HTML 4.01 多媒體標籤

標籤	描述
<applet>	不同意。定義內嵌 applet。
<embed>	不同意。定義內嵌對象。（HTML5 中容許）
<object>	定義內嵌對象。
<param>	定義對象的參數。

HTML 5 多媒體標籤

標籤	描述
<video>	標籤訂義聲音，好比音樂或其餘音頻流。
<embed>	標籤訂義嵌入的內容，好比插件。