DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML5詳解 >> HTML5的初級技巧 之第五課
HTML5的初級技巧 之第五課
編輯:HTML5詳解     

15. 音頻播放的支持

Html5中提供了<audio>標簽,解決了以往必須依靠第三方插件才能播放音頻文件的問題。目前為止,還只有少數的最新浏覽器支持該標簽。

<audio controls="controls" autoplay="autoplay">
    <source src="file.ogg" />
    <source src="file.mp3" />
    <a href="file.mp3">Download this file.</a>
</audio>

 

為什麼會有兩種格式的音頻文件?因為Firefox和Webkit浏覽器所支持的格式存在差異,Firefox只能支持.ogg文件,而Webkit只支持.mp3的文件,解決的辦法就是創建兩個版本的音頻文件,這樣就可以兼容Firefox和Webkit的浏覽器了,需要注意的是IE不支持該標簽。

16. 視頻播放的支持

和<audio>標簽一樣,HTML5也提供了<video>標簽對播放視頻文件的支持。YouTube也宣布了一項新的HTML5的視頻嵌入。不過有點遺憾,Html5的規范並沒有指定特定的視頻解碼器,而是讓浏覽器自己來決定。這就造成了個浏覽器的兼容問題,雖然Safari和IE9都支持還H.264格式的視頻( Flash 播放器可以可以播放),Firefox和Opera則支持開源的Theora和Vorbis格式。因此,當顯示Html5視頻的時候,也得准備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屬性雖然可以省略掉,但是如果加上的話,浏覽器就可以更快的准確的解析該視頻文件。並不是所有的浏覽器都支持Html5的視頻,所以得做好使用Flash版本來代替,當然,這個決定權在於你。

17. 預加載視頻

預加載屬性:preload,首先要確定是否需要預先加載視頻,假如,訪客在訪問一個有很多視頻展示的頁面,那麼就有必要預先加載一段視頻,這樣可以節省訪客的等待時間,提高用戶體驗。你可以給<video>標簽添加一個preload屬性來實現預先加載的功能。

<video preload="preload">
 ...
</video>

 

18. 顯示控件

顯示控件屬性可以給視頻添加一個播放暫停的控件,需要注意的是每個浏覽器顯示的效果可能會有些差異。

<video controls="controls" preload="preload">
...
</video>

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved