前面的話
多媒體元素(比如視頻和音頻)存儲於媒體文件中,確定媒體類型的最常用的方法是查看文件擴展名。如.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
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>