顧春蓮

（河北省電子信息技術研究院軟件研究所，河北石家莊 050071）

HTML 5中的音頻及視頻元素對互聯(lián)網(wǎng)的影響

顧春蓮

（河北省電子信息技術研究院軟件研究所，河北石家莊 050071）

主要介紹HTML 5中有關音頻及視頻元素的新特性。并對HTML 5中的Video和audio的元素屬性進行了論述，指出了HTML 5中聲頻和視頻元素新特性對互聯(lián)網(wǎng)的影響。

HTML 5；音頻；視頻；新特性；多媒體技術

作為最重要的Web開發(fā)標準的下一代，HTML 5引起了很多Web開發(fā)者的關注。HTML 5最重要的新特性就是對音頻和視頻的支持，如構建音頻可視化，在線視頻編輯等。這一突破為互聯(lián)網(wǎng)多媒體技術帶來更多的可發(fā)展空間，為多媒體技術的可協(xié)同編輯提供了更好的平臺。

1 HTML 5中音頻及視頻元素的屬性與格式

20世紀90年代初，Real Networks首次提供了較大規(guī)模的流媒體技術，允許將播放文件嵌入到網(wǎng)頁之中，從而使得開發(fā)人員可以通過Internet發(fā)送緩沖的媒體內(nèi)容。用HTML中指定的視頻和音頻進行標記的想法在HTML 3，甚至HTML 4上實現(xiàn)起來的難度很大。HTML 4本質上是個“靜止”版本，用于顯示內(nèi)容的特定機制依賴相應的格式，并且通常需要將標記與各個參數(shù)進行捆綁后再向服務器傳遞相關信息。因此，將視頻及音頻嵌入到網(wǎng)頁的工作變成了一種特殊的技能。

Video和Audio兩個標簽作為首批被添加到HTML 5規(guī)范中的特征標記，使用HTML5中的這些新特性，結合腳本技術，將原本只能在系統(tǒng)級別上的視頻處理、音效處理等功能帶入到了互聯(lián)網(wǎng)應用的范圍內(nèi)，使瀏覽器能夠以一種易于使用的方式處理音頻及視頻文件，幫助用戶，更精確地對視頻和音頻進行控制。

2.1 HTML 5中的視頻元素Video元素

HTML 5通過直接增加視頻CODEC（編解碼器）到瀏覽器中，把一個大視頻文件轉化成許多更小的流格式文件，只需瀏覽器支持相應的HTML5中的Video標簽，視頻文件即可更流暢的播放。

2.1.1 Video元素屬性

網(wǎng)站制作中的Video元素含有source、poster、preload、autoplay、loop、controls、width、height等幾個屬性，以及一個內(nèi)部使用的屬性。Video內(nèi)除了可以包含標簽外，還可以包含當指定的視頻都不能播放時，返回的內(nèi)容。下面對幾個屬性分別介紹。

（1）Source。用于給媒體指定多個可選擇的文件地址，且只能在媒體標簽沒有使用src屬性時使用。瀏覽器按Source的順序檢測所指定的視頻是否能夠播放，如果不能播放，換下一個。此方法多用于兼容不同的瀏覽器。Source本身不代表任何含義，不能單獨出現(xiàn)。它包含src、type、media三個屬性：src屬性指定媒體的地址；type屬性說明src屬性指定媒體的類型，幫助瀏覽器在獲取媒體前判斷是否支持此類別的媒體格式；media屬性說明媒體在何種媒介中使用，不設置時默認值為all，表示支持所有媒介。

（2）src屬性和poster屬性。src屬性指定視頻的地址。poster屬性用于指定一張圖片，在當前視頻數(shù)據(jù)無效時顯示預覽圖。

（3）preload屬性。preload屬性定義視頻是否預加載。它有三個可選擇的值：none、metadata、auto，分別表示不進行預加載、部分預加載和全部預加載。如果不設置此屬性，默認為auto。

（4）autoplay屬性。autoplay屬性設置視頻是否自動播放，是一個布爾屬性。當出現(xiàn)時，表示自動播放，去掉時表示不自動播放。

（5）loop屬性。loop屬性指定視頻是否循環(huán)播放，是一個布爾屬性。

（6）controls屬性。Controls屬性用于向瀏覽器指明頁面制作者沒有使用腳本生成播放控制器，需要瀏覽器啟用本身的播放控制欄。

2.1.2 Video元素支持的三種視頻格式

Video元素支持三種視頻格式，即Ogg、MPEG 4及Web M。Ogg是帶有Thedora視頻編碼和Vorbis音頻編碼的文件；MPEG4是帶有H.264視頻編碼和AAC音頻編碼的文件；Web M是帶有VP8視頻編碼和Vorbis音頻編碼的文件。表1給出各種瀏覽器支持的視頻格式。

表1 各種瀏覽器支持的視頻格式

2.1.3 HTML 5中使用Video元素顯示視頻

在HTML 5中使用Video元素顯示視頻，代碼如下：

＜video src＝"Movie.ogg"＞＜／audio＞

可以通過對Video元素使用自動播放、播放控制、寬度高度和循環(huán)播放等屬性的設置實現(xiàn)視頻的個性化顯示。

2.2 HTML5中的Audio元素

Web技術發(fā)展到現(xiàn)在，仍然沒有一項網(wǎng)頁上播放音頻的標準，目前，大多音頻是通過插件來播放的。HTML5規(guī)定了一種通過Audio元素來包含音頻的標準方法，audio元素能夠播放聲音文件或者音頻流。

2.2.1 audio元素屬性

audio元素含有src、poster、preload、autoplay、loop、controls等幾個屬性，其屬性值及使用方法與上面video元素中的相同。

2.2.2 Audio元素支持的三種音頻格式

audio元素支持三種音頻格式，即Ogg，MP3及Wav。表2給出各種瀏覽器支持的音頻格式。

表2 各種瀏覽器支持的音頻格式

2.2.3 HTML 5中使用audio元素播放音頻

如需在HTML5中播放音頻，其代碼是：

說明：audio元素允許多個source元素。source元素可以鏈接不同的音頻文件。瀏覽器將使用第一個可識別的格式。

3 HTML 5中音頻及視頻元素新特性對互聯(lián)網(wǎng)的影響

HTML 5中音頻及視頻元素新特性對互聯(lián)網(wǎng)的影響主要表現(xiàn)在以下三個方面。

（1）網(wǎng)絡視頻更加快捷方便。雖然使用Flash、Sliverlight和JavaFX能夠實現(xiàn)瀏覽器視頻，但必須安裝相應的插件。由于HTML5新增了音頻視頻功能，可方便的使用瀏覽器視頻功能，極大地加快頁面的加載速度。

（2）增強網(wǎng)絡安全性。網(wǎng)絡瀏覽器插件是由不同程序開發(fā)團隊以不同標準、不同開發(fā)模式并在不同安全模型下編寫的。隨著插件數(shù)量激增，安全性問題跟蹤的復雜性也隨之增加。在HTML5中的新增功能可以不需要插件的支持就能實現(xiàn)，從而消除了插件引起的安全問題。

（3）提升交互性，創(chuàng)建開放的視頻環(huán)境。當使用者向其他人分享視頻時，用戶可以自己編輯視頻，且該視頻是可交互的。同時這種視頻將會把社區(qū)化應用帶入一個更為立體的視野之中，創(chuàng)建開放的視頻環(huán)境。

4 小結

HTML5采用了統(tǒng)一的語言（JavaScript）、統(tǒng)一的數(shù)據(jù)模型（XML和DOM）和統(tǒng)一的表現(xiàn)規(guī)則（CSS）來表現(xiàn)音頻和視頻，使Web開發(fā)人員很容易地把音頻、視頻內(nèi)容與網(wǎng)頁中的其他內(nèi)容整合起來，為互聯(lián)網(wǎng)中多媒體的應用提供了新的思路，并具有廣闊的應用前景。由于HTML 5基于一個統(tǒng)一的標準的開發(fā)環(huán)境，這對Web開發(fā)人員而言無疑是非常理想的，同時，HTML 5中新特性的應用，強化了Web網(wǎng)頁的表現(xiàn)性能，追加了本地數(shù)據(jù)庫等應用功能，使互聯(lián)網(wǎng)的可交互內(nèi)容越來越豐富完美，極大地提升了用戶體驗度。

［1］Jeremy Keith.The desing of HTML 5［R／OL］.Fronteers 2010.10－21.

［2］劉天寅.淺析HTLM 5在多媒體上的應用前景［J］.硅谷，2010，（20）：89.

［3］李朔，谷振宇，聶詠等.HTML 5與未來的Web應用平臺［J］.陰山學刊（自然科學版），2010，24（2）：46.

Effect of audio and video elements in HTML 5 on Internet

GU Chun－lian

（InstituteofSoftware，HebeiElectronic＆InformationTechnologyAcademy，Shijiazhuang，Hebei050071，China）

The new characteristics of audio and video elements in HTML 5 is introduced.These new features of video and audio in HTML 5 are discussed.Effect of HTML 5 audio and video elements on Internet is directed.

HTML 5；Audio；Video；New characteristics；Multimedia technology

TP37

：A

1001－9383（2011）03－0106－03

2011－06－30

顧春蓮（1983－），女，河北石家莊人，助理工程師，主要研究方向：軟件工程.