HTML的音頻和視頻

前面的話

　　多媒體元素(好比視頻和音頻)存儲於媒體文件中，肯定媒體類型的最經常使用的方法是查看文件擴展名。如.swf、.wmv、.mp三、.mp4

 

媒體格式

音頻格式

.mid/.midi

　　MIDI (Musical Instrument Digital Interface) 是一種針對電子音樂設備（好比合成器和聲卡）的格式。MIDI 文件不含有聲音，但包含可被電子產品（好比聲卡）播放的數字音樂指令。由於 MIDI 格式僅包含指令，因此 MIDI 文件極其小巧。大多數流行的網絡瀏覽器都支持 MIDI

.rm/.ram

　　RealAudio 格式是由 Real Media 針對因特網開發的。該格式也支持視頻。該格式容許低帶寬條件下的音頻流（在線音樂、網絡音樂）。因爲是低帶寬優先的，質量常會下降

.wav

　　Wave (waveform) 格式是由 IBM 和微軟開發的。全部運行 Windows 的計算機和全部網絡瀏覽器（除了 Google Chrome）都支持它

.wma

　　WMA 格式 (Windows Media Audio)，質量優於 MP3，兼容大多數播放器，除了 iPod。WMA 文件可做爲連續的數據流來傳輸，這使它對於網絡電臺或在線音樂很實用

.mp3/.mpga

　　MP3 文件其實是 MPEG 文件的聲音部分。MPEG 格式最初是由運動圖像專家組開發的。MP3 是其中最受歡迎的針對音樂的聲音格式

 

視頻格式

.avi

　　AVI (Audio Video Interleave) 格式是由微軟開發的。全部運行Windows的計算機都支持AVI格式

.wmv

　　Windows Media 格式是由微軟開發的。Windows Media 在因特網上很常見，可是若是未安裝額外組件，就沒法播放 Windows Media 電影

.mpg/.mpeg

　　MPEG (Moving Pictures Expert Group) 格式是因特網上最流行的格式。它是跨平臺的，獲得了全部最流行的瀏覽器的支持

.mov

　　QuickTime 格式是由蘋果公司開發的。QuickTime 是因特網上常見的格式，可是QuickTime 電影不能在沒有安裝額組件的Windows計算機上播放

.rm/.ram

　　RealVideo 格式是由 Real Media 針對因特網開發的。該格式容許低帶寬條件下（在線視頻、網絡電視）的視頻流。因爲是低帶寬優先的，質量常會下降

.swf/.flv

　　Flash (Shockwave) 格式是由 Macromedia 開發的。Shockwave 格式須要額外的組件來播放

.mp4

　　Mpeg-4 (with H.264 video compression) 是一種針對因特網的新格式。愈來愈多的視頻發佈者將其做爲 Flash 播放器和 HTML5 的因特網共享格式

 

元素

插件元素

<embed>

　　用來定義嵌入內容，好比flash插件

　　[注意]因爲移動端設備對flash等瀏覽器插件支持比較差，IOS設備徹底不支持，所以不建議使用flash。若是須要播放音頻視頻，可使用video和audio來調用瀏覽器原生的播放器

【屬性】

height    設置嵌入內容的高度
width     設置嵌入內容的寬度
src     設置嵌入內容的URL
type     設置嵌入內容的類型    

<embed src="helloworld.swf" width="200" height="200" type="application/x-shockwave-flash"/>

 

<object>

　　定義一個嵌入的對象

　　<後備內容機制>

　　object能夠嵌套object或其餘元素，若是瀏覽器不能渲染優先的選擇就顯示後備的內容
【屬性】

height    設置嵌入對象的高度
width     設置嵌入對象的寬度
type     設置嵌入對象的類型    
name    設置對象的名稱，以便在腳本中使用
data     設置對象的URL
usemap    設置與對象一同使用的客戶端圖像映射的URL
form     規定對象所屬的一個或多個表單(將object做爲表單的一部分是爲了解決讓插件發送數據到服務器的須要)
typemustmatch    檢測資源類型和type屬性是否相符(data和type同時設置的狀況下)

 

<param>

　　用來給內嵌的插件傳遞參數

【屬性】

name    定義參數的名稱
value    規定參數的值
type    規定參數的MIME類型
valuetype    規定值的MIME類型(data/ref/object)

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

 

HTML5元素

　HTML5新增了兩個與媒體相關的標籤，讓開發人員沒必要依賴任何插件就能在網頁中嵌入跨瀏覽器的音頻和視頻內容，這兩個標籤是<audio>和<video>，且不被IE8-瀏覽器支持

　這兩個標籤支持的類型爲：

　　　　視頻 [1]video/ogg [2]video/mp4 [3]video/webm

　　　　音頻 [1]audio/ogg [2]audio/mpeg

　　關於<audio>和<video>標籤的詳細信息移步至此

 

HTML音頻

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

【1】<embed>

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

【2】<object>

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

【3】<audio>

<audio controls="controls">
  <source src="song.mp3" type="audio/mp3" />
</audio>

【4】<a>

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

【5】更好的解決辦法

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

 

HTML視頻

　　在HTML中播放視頻的方法也有好多種

【1】<embed>

<embed  height="240" width="320" src="movie.mp4" />

【2】<object>

<object height="240" width="320" data="movie.mp4"></object>

【3】<video>

<video controls="controls">
  <source src="movie.mp4" type="video/mp4" />
</video>

【4】<a>

<a href="movie.mp4">Play the video</a>

【5】更好的解決辦法

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