HTML的音訊和視訊

小火柴的藍色理想發表於2015-12-31
HTML音訊

前面的話

　　多媒體元素(比如視訊和音訊)儲存於媒體檔案中，確定媒體型別的最常用的方法是檢視副檔名。如.swf、.wmv、.mp3、.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>

相關文章