HTML 多媒體

Web 上的多媒體指的是音效、音樂(lè)、視頻和動(dòng)畫

多媒體格式

格式 多媒體元素（比如視頻和音頻）存儲(chǔ)于媒體文件中。
確定媒體類型的最常用的方法是查看文件擴(kuò)展名。當(dāng)瀏覽器得到文件擴(kuò)展名 .htm 或 .html 時(shí)，它會(huì)假定該文件是 HTML 頁(yè)面。.xml 擴(kuò)展名指示 XML 文件，而 .css 擴(kuò)展名指示樣式表。圖片格式則通過(guò) .gif 或 .jpg 來(lái)識(shí)別。
多媒體元素元素也擁有帶有不同擴(kuò)展名的文件格式，比如 .swf、.wmv、.mp3 以及 .mp4。

視頻格式

注意 ：最新的 HTML5 標(biāo)準(zhǔn)只支持 MP4, WebM, 和 Ogg 視頻格式。HTML5 的最新標(biāo)準(zhǔn)支持 MP3, WAV, 和 Ogg 音頻格式

HTML 插件

插件功能是擴(kuò)展 HTML 瀏覽器的功能。

<object>元素

所有主流瀏覽器都支持 <object> 標(biāo)簽。<object> 元素定義了在 HTML 文檔中嵌入的對(duì)象。
該標(biāo)簽用于插入對(duì)象 (例如在網(wǎng)頁(yè)中嵌入 Java 小程序, PDF 閱讀器, Flash 播放器) 。

<object width="400" height="50" data="bookmark.swf"></object>
<object> 元素同樣可用于包含HTML文件：
<object width="100%" height="500px" data="snippet.html"></object>
或者插入一張圖片:
<object data="audi.jpeg"></object>

<embed> 元素

所有主流瀏覽器都支持 <embed> 元素。
<embed> 元素表示一個(gè) HTML Embed 對(duì)象 。
<embed> 元素已經(jīng)出現(xiàn)很長(zhǎng)一段時(shí)間了，但是在 HTML5 前并未被詳細(xì)說(shuō)明，該元素在 HTML 5 頁(yè)面上會(huì)被驗(yàn)證，在 HTML 4 上不會(huì)。

HTML 音頻

聲音在HTML中可以以不聽(tīng)的方式播放。

使用<embed>元素

<embed>標(biāo)簽定義外部（非 HTML）內(nèi)容的容器。（這是一個(gè) HTML5 標(biāo)簽，在 HTML4 中是非法的，但是所有瀏覽器中都有效）。
下面的代碼片段能夠顯示嵌入網(wǎng)頁(yè)中的 MP3 文件：
<embed height="50" width="100" src="horse.mp3">

使用 <object> 元素

<object tag>標(biāo)簽也可以定義外部（非 HTML）內(nèi)容的容器。
下面的代碼片段能夠顯示嵌入網(wǎng)頁(yè)中的 MP3 文件：
object height="50" width="100" data="horse.mp3"></object>

使用 HTML5 <audio> 元素

<audio> 元素是一個(gè) HTML5 元素，在 HTML 4 中是非法的，但在所有瀏覽器中都有效。

最好的 HTML 解決方法

下面的例子使用了兩個(gè)不同的音頻格式。HTML5 <audio> 元素會(huì)嘗試以 mp3 或 ogg 來(lái)播放音頻。如果失敗，代碼將回退嘗試 <embed> 元素。

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

HTML 視頻

HTML視頻（Videos）播放

//使用 <embed> 標(biāo)簽
<embed src="intro.swf" height="200" width="200">
//使用 <object> 標(biāo)簽
<object data="intro.swf" height="200" width="200"></object>
//使用 HTML5 <video> 元素
<video width="320" height="240" 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>
//HTML 5 + <object> + <embed>
<video width="320" height="240" 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>