首先玖姑,我們要理解兩個概念:容器(container)和編解碼器(codec)。
1.視頻容器
音頻文件或視頻文件液肌,都只是一個容器文件挟炬。視頻文件包含了音頻軌道、視頻軌道和其他一些元數(shù)據(jù)嗦哆。視頻播放時谤祖,音頻軌道和視頻軌道是綁定在一起的。元數(shù)據(jù)包含了視頻的封面老速、標題粥喜、子標題、字幕等相關(guān)信息橘券。主流視頻容器支持的格式為:.avi容客、.flv、.mp4约郁、.mkv缩挑、.ogg、.webm鬓梅。
2.編解碼器
音頻和視頻編碼/解碼是一組算法供置,用來對一段特定音頻或視頻進行解碼和編碼,以便音頻和視頻能夠播放绽快。原始的媒體文件體積非常巨大芥丧,如果不對其進行編碼紧阔,那么數(shù)據(jù)量是非常驚人的,在互聯(lián)網(wǎng)上傳播則要耗費無法忍受的時間续担;如果不對其進行解碼擅耽,就無法將編碼后的數(shù)據(jù)重組為原始的媒體數(shù)據(jù)。主流的音頻編解碼器:AAC物遇、MPEG-3乖仇、Ogg Voribs,
視頻編解碼器:H.264询兴、VP8乃沙、Ogg Theora。
3.瀏覽器支持情況
起初诗舰,HTML5 規(guī)范本來打算指定編解碼器警儒,但實施起來極為困難。部分廠商已有自己的標準眶根,不愿實現(xiàn)標準蜀铲;而有一些編解碼器受專利保護,需要支付昂貴費用属百。最終放棄了統(tǒng)一規(guī)范的要求记劝,導致各個瀏覽器實現(xiàn)自己的標準。
除了上面三款瀏覽器诸老,還有Safari5+支持MPEG-4,Opera11 支持WebM 和OGG,通過這組數(shù)據(jù)钳恕,只要備好MP4 和OGG 格式的即可别伏,但對于新的高清標準WebM,當然是非常必要的忧额。因為WebM 不但清晰度高厘肮,而且免費,不受限制許可的使用源碼和專利權(quán)睦番。
目前Chrome 瀏覽器类茂,為了推廣WebM 格式的視頻。聲稱未來將放棄H.264 編碼的視頻托嚣,所以有可能在以后的版本中無法播放MP4 的視頻巩检。當然,目前演示的版本還是支持的示启。
video 視頻元素
以往的視頻播放兢哭,需要借助Flash 插件才可以實現(xiàn)。但Flash 插件的不穩(wěn)定性經(jīng)常讓瀏覽器導致崩潰夫嗓,因此很多瀏覽器或系統(tǒng)廠商開始拋棄它迟螺。而取代它的正是HTML5 的video元素冲秽。
<video>元素的屬性
src 視頻資源的URL
width 視頻寬度
height 視頻高度
autoplay 設(shè)置后,表示立刻開始播放視頻
preload 設(shè)置后矩父,表示預(yù)先載入視頻
controls 設(shè)置后锉桑,表示顯示播放控件
loop 設(shè)置后,表示反復播放視頻
muted 設(shè)置后窍株,表示視頻處于靜音狀態(tài)
poster 指定視頻數(shù)據(jù)載入時顯示的圖片
1.嵌入一個WebM 視頻
<video src="test.webm" width="800" height="600"></video>
解釋:<video>插入一個視頻民轴,主流的視頻為.webm,.mp4夹姥,.ogg 等杉武。src 表示資源URL;width 表示寬度辙售;height 表示高度轻抱。
2.附加一些屬性
<video src="test.webm" width="800" height="600" autoplay controls loop muted></video>
解釋:autoplay 表示自動開始播放;controls 表示顯示播放控件旦部;loop 表示循環(huán)播放祈搜;muted 表示靜音。
3.預(yù)加載設(shè)置
<video src="http://li.cc/test.webm" width="800" height="600" controls preload="none"></video>
解釋:preload 屬性有三個值:none 表示播放器什么都不加載士八;metadata 表示播放之前只能加載元數(shù)據(jù)(寬高容燕、第一幀畫面等信息);auto 表示請求瀏覽器盡快下載整個視頻婚度。
4.使用預(yù)覽圖
<video src="http://li.cc/test.webm" width="800" height="600" controls poster="img.png"></video>
解釋:poster 屬性表示在視頻的第一幀蘸秘,做一張預(yù)覽圖。
5.兼容多個瀏覽器
<video width="800" height="600" controls poster="img.png">
<source src="test.webm">
<source src="test.mp4">
<source src="test.ogg">
<object>這里引入flash 播放器實現(xiàn)IE9 以下蝗茁,但沒必要了
</object>
</video>
解釋:通過<source>元素引入多種格式的視頻醋虏,讓更多的瀏覽器保持兼容。
audio 音頻元素
和video 元素一樣哮翘,audio 元素用于嵌入音頻內(nèi)容颈嚼,而音頻元素的屬性和視頻元素類似。音頻的支持度和視頻類似饭寺,使用<source>元素引入多種格式兼容即可阻课。主流的音頻格式有:.mp3,.m4a艰匙,.ogg限煞,.wav。
src 視頻資源的URL
autoplay 設(shè)置后员凝,表示立刻開始播放視頻
preload 設(shè)置后晰骑,表示預(yù)先載入視頻
controls 設(shè)置后,表示顯示播放控件
1.嵌入一個音頻
<audio src="test.mp3" controls autoplay></audio>
解釋:和嵌入視頻一個道理。
2.兼容多個瀏覽器
<audio controls>
<source src="test.mp3">
<source src="test.m4a">
<source src="test.wav">
</audio>