|
15. 音頻播放的支持
HTML5中提供了<audio>標(biāo)簽，解決了以往必須依靠第三方插件才能播放音頻文件的問題。目前為止，還只有少數(shù)的最新瀏覽器支持該標(biāo)簽。
<audio controls="controls" autoplay="autoplay">
<source src="file.ogg" />
<source src="file.mp3" />
<a href="file.mp3">Download this file.</a>
</audio>
為什么會(huì)有兩種格式的音頻文件？因?yàn)镕irefox和Webkit瀏覽器所支持的格式存在差異，F(xiàn)irefox只能支持.ogg文件，而Webkit只支持.mp3的文件，解決的辦法就是創(chuàng)建兩個(gè)版本的音頻文件，這樣就可以兼容Firefox和Webkit的瀏覽器了，需要注意的是IE不支持該標(biāo)簽。
16. 視頻播放的支持
和<audio>標(biāo)簽一樣，HTML5也提供了<video>標(biāo)簽對(duì)播放視頻文件的支持。YouTube也宣布了一項(xiàng)新的HTML5的視頻嵌入。不過有點(diǎn)遺憾，HTML5的規(guī)范并沒有指定特定的視頻解碼器，而是讓瀏覽器自己來決定。這就造成了個(gè)瀏覽器的兼容問題，雖然Safari和IE9都支持還H.264格式的視頻( Flash 播放器可以可以播放)，F(xiàn)irefox和Opera則支持開源的Theora和Vorbis格式。因此，當(dāng)顯示HTML5視頻的時(shí)候，也得準(zhǔn)備2種格式。
<video controls preload>
<source src="cohagenPhoneCall.ogv" type="video/ogg"; codecs='vorbis, theora'" />
<source src="cohagenPhoneCall.mp4" type="video/mp4; 'codecs='avc1.42E01E, mp4a.40.2'" />
<div> your browser is old. <a href="cohagenPhoneCall.mp4">download this video instead.</a> </div>
</video>
需要注意的是，type屬性雖然可以省略掉，但是如果加上的話，瀏覽器就可以更快的準(zhǔn)確的解析該視頻文件。并不是所有的瀏覽器都支持HTML5的視頻，所以得做好使用Flash版本來代替，當(dāng)然，這個(gè)決定權(quán)在于你。
17. 預(yù)加載視頻
預(yù)加載屬性：preload，首先要確定是否需要預(yù)先加載視頻，假如，訪客在訪問一個(gè)有很多視頻展示的頁面，那么就有必要預(yù)先加載一段視頻，這樣可以節(jié)省訪客的等待時(shí)間，提高用戶體驗(yàn)。你可以給<video>標(biāo)簽添加一個(gè)preload屬性來實(shí)現(xiàn)預(yù)先加載的功能。
<video preload="preload">
...
</video>
18. 顯示控件
顯示控件屬性可以給視頻添加一個(gè)播放暫停的控件，需要注意的是每個(gè)瀏覽器顯示的效果可能會(huì)有些差異。
<video controls="controls" preload="preload">
...
</video>
出處：
責(zé)任編輯：bluehearts
上一頁 22個(gè)HTML5的初級(jí)技巧 [4] 下一頁 22個(gè)HTML5的初級(jí)技巧 [6]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁 
第 5 頁 22個(gè)HTML5的初級(jí)技巧 [5]
