html5多媒體組件的使用-code寶寶主講

1、后盾網(wǎng)HTML5課件 后盾網(wǎng) 人人做后盾主講：岳英俊Page 2 作者：作者：code寶寶寶寶 版權所有版權所有 仿造必究仿造必究后盾網(wǎng) 人人做后盾 html5多媒體組件的使用1. html5多媒體組件指的是video(視頻)組件和audio(音頻)組件。HTML5多媒體組件可以在不借助諸如Flash Player等第三方插件的情況下，直接在你的網(wǎng)頁上嵌入多媒體組件。瀏覽器提供原生支持視頻的新能力使得網(wǎng)頁開發(fā)人員更易于在不依賴于外置插件有效性的情況下，在他們的網(wǎng)站上添加視頻組件。由于蘋果公司現(xiàn)階段在iPhone和iPad上使用的Flash技術的局限性，HTML5多媒體組件的能力就顯得尤為重要了

2、。Page 3 作者：作者：code寶寶寶寶 版權所有版權所有 仿造必究仿造必究后盾網(wǎng) 人人做后盾 html5支持的視頻格式1. 視頻格式當前，當前，video 元素支持三種視頻格式：元素支持三種視頻格式：Ogg = 帶有帶有 Theora 視頻編碼和視頻編碼和 Vorbis 音頻編碼的音頻編碼的 Ogg 文件文件MPEG4 = 帶有帶有 H.264 視頻編碼和視頻編碼和 AAC 音頻編碼的音頻編碼的 MPEG 4 文文件件WebM = 帶有帶有 VP8 視頻編碼和視頻編碼和 Vorbis 音頻編碼的音頻編碼的 WebM 文件文件Page 4 作者：作者：code寶寶寶寶 版權所有版權所有 仿

3、造必究仿造必究后盾網(wǎng) 人人做后盾 視頻編碼和解碼1. 視頻編碼所謂視頻編碼方式就是指通過特定的壓縮技術，將某個視頻格式的文件轉換成另一種視頻格式文件的方式。2. 視頻解碼用特定方法把已經編碼的視頻還原成它原有的格式，進行播放3. 編碼說明A.Theora 視頻編碼，視頻編碼，Theora是開放而且免費的視頻壓縮編碼技術，由是開放而且免費的視頻壓縮編碼技術，由Xiph基金會發(fā)布。做為該基金會基金會發(fā)布。做為該基金會Ogg項目的一部分，從項目的一部分，從VP3 HD高清高清到到MPEG-4/DiVX格式都能夠被格式都能夠被Theora很好的支持。很好的支持。 使用使用Theora無無需任何專利許可

4、費。需任何專利許可費。Firefox和和Opera將通過新的將通過新的HTML5元素提供了元素提供了對對Ogg/Theora視頻的原生支持。視頻的原生支持。B. H.264 視頻編碼，視頻編碼，H.264是在是在MPEG-4技術的基礎之上建立起來的，技術的基礎之上建立起來的，H.264與以前的國際標準如與以前的國際標準如H.263和和MPEG-4相比，為達到高效的壓相比，為達到高效的壓縮，充分利用了各種冗余，統(tǒng)計冗余和視覺生理冗余。藍光技術縮，充分利用了各種冗余，統(tǒng)計冗余和視覺生理冗余。藍光技術（Blu-ray）就采用這種格式）就采用這種格式C. VP8 視頻編碼，視頻壓縮解決方案廠商視頻編碼

5、，視頻壓縮解決方案廠商On2 Technologies公司現(xiàn)公司現(xiàn)已推出最新的視頻壓縮格式已推出最新的視頻壓縮格式On2 VP8。On2 VP8是第八代的是第八代的On2視視頻，能以更少的數(shù)據(jù)提供更高質量的視頻，而且只需較小的處理能頻，能以更少的數(shù)據(jù)提供更高質量的視頻，而且只需較小的處理能力即可播放視頻力即可播放視頻Page 5 作者：作者：code寶寶寶寶 版權所有版權所有 仿造必究仿造必究后盾網(wǎng) 人人做后盾 video標簽屬性Page 6 作者：作者：code寶寶寶寶 版權所有版權所有 仿造必究仿造必究后盾網(wǎng) 人人做后盾 source標簽屬性音頻文件提供至少兩種不同的解碼器才能覆蓋所有支持HTML5的瀏覽器。如同對視頻元素的處理一樣，你需要使用source元素來實現(xiàn)該功能。一個audio元素能包含多種source元素，因此你能為你的音頻提供多種格式支持Page 7 作者：作者：code寶寶寶寶 版權所有版權所有 仿造必究仿造必究后盾網(wǎng) 人人做后盾 videoAPI方法Page 8 作者：作者：code寶寶寶寶 版權所有版權所有 仿造必究仿造必究后盾網(wǎng) 人人做后盾 videoAPI屬性Page 9 作者：作者：code寶寶寶寶 版權所有版權所有 仿造必究仿造必究后盾網(wǎng) 人人做后盾 videoAPI事件Page 10 作者