音頻和視頻

首先玖姑,我們要理解兩個概念:容器(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>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末硕舆,一起剝皮案震驚了整個濱河市秽荞,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌抚官,老刑警劉巖扬跋,帶你破解...
    沈念sama閱讀 206,311評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異凌节,居然都是意外死亡钦听,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,339評論 2 382
  • 文/潘曉璐 我一進店門倍奢,熙熙樓的掌柜王于貴愁眉苦臉地迎上來朴上,“玉大人,你說我怎么就攤上這事卒煞』驹祝” “怎么了?”我有些...
    開封第一講書人閱讀 152,671評論 0 342
  • 文/不壞的土叔 我叫張陵畔裕,是天一觀的道長衣撬。 經(jīng)常有香客問我,道長扮饶,這世上最難降的妖魔是什么具练? 我笑而不...
    開封第一講書人閱讀 55,252評論 1 279
  • 正文 為了忘掉前任,我火速辦了婚禮甜无,結(jié)果婚禮上扛点,老公的妹妹穿的比我還像新娘。我一直安慰自己岂丘,他們只是感情好陵究,可當我...
    茶點故事閱讀 64,253評論 5 371
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著元潘,像睡著了一般畔乙。 火紅的嫁衣襯著肌膚如雪君仆。 梳的紋絲不亂的頭發(fā)上翩概,一...
    開封第一講書人閱讀 49,031評論 1 285
  • 那天,我揣著相機與錄音返咱,去河邊找鬼钥庇。 笑死,一個胖子當著我的面吹牛咖摹,可吹牛的內(nèi)容都是我干的评姨。 我是一名探鬼主播,決...
    沈念sama閱讀 38,340評論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼吐句!你這毒婦竟也來了胁后?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 36,973評論 0 259
  • 序言:老撾萬榮一對情侶失蹤嗦枢,失蹤者是張志新(化名)和其女友劉穎攀芯,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體文虏,經(jīng)...
    沈念sama閱讀 43,466評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡侣诺,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,937評論 2 323
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了氧秘。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片年鸳。...
    茶點故事閱讀 38,039評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖丸相,靈堂內(nèi)的尸體忽然破棺而出搔确,到底是詐尸還是另有隱情,我是刑警寧澤已添,帶...
    沈念sama閱讀 33,701評論 4 323
  • 正文 年R本政府宣布妥箕,位于F島的核電站梁厉,受9級特大地震影響隔心,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜潮孽,卻給世界環(huán)境...
    茶點故事閱讀 39,254評論 3 307
  • 文/蒙蒙 一缆蝉、第九天 我趴在偏房一處隱蔽的房頂上張望宇葱。 院中可真熱鬧,春花似錦刊头、人聲如沸黍瞧。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,259評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽印颤。三九已至,卻和暖如春穿肄,著一層夾襖步出監(jiān)牢的瞬間年局,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,485評論 1 262
  • 我被黑心中介騙來泰國打工咸产, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留矢否,地道東北人。 一個月前我還...
    沈念sama閱讀 45,497評論 2 354
  • 正文 我出身青樓脑溢,卻偏偏與公主長得像僵朗,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 42,786評論 2 345

推薦閱讀更多精彩內(nèi)容