video

通過<video>標(biāo)簽，我們可以拋棄最近不怎么討好的Flash，直接在頁面中播放視頻文件。視頻文件自然是最符合語義化的文件格式，但該元素標(biāo)簽同樣支持音頻與圖片。

過去(及目前)，我們通常要使用類似下面這樣繁冗丑陋的代碼來將視頻放置在頁面中，但這種方式要求瀏覽器安裝有Flash插件，并支持JavaScript：

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="425" height="344" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowFullScreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="src" value="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" /><param name="allowfullscreen" value="true" /><embed type="application/x-shockwave-flash" width="425" height="344"src="http://www.youtube.com/v/oHg5SJYRHA0&hl=en&fs=1&" allowscriptaccess="always" allowfullscreen="true"></embed> </object>

?

HTML5的方式：

<video width="640" height="360" src="http://www.youtube.com/demo/google_main.mp4" controls autobuffer><p>Try this page in Safari 4! Or you can<a href="http://www.youtube.com/demo/google_main.mp4">download the video</a>instead.</p> </video>

?

<video>標(biāo)簽有如下幾個常用屬性：

Autoplay: 用來設(shè)定視頻是否在頁面加載后自動播放。

Src: 為視頻指定文件鏈接或下載路徑，當(dāng)瀏覽器不支持<video>標(biāo)簽或發(fā)生某種播放錯誤時，可以提供給用戶進(jìn)行下載。

Autobuffer: 用來設(shè)定視頻是否自動緩沖；如果設(shè)定，那么頁面加載之后，視頻會自動下載緩沖，當(dāng)用戶點擊播放按鈕后，至少已經(jīng)有一部分視頻可以直接觀看而無需等待了。

Poster: 用來為視頻設(shè)置一個“相框默認(rèn)圖片”性質(zhì)的背景圖片；當(dāng)視頻無法正常加載播放時可以向用戶呈現(xiàn)。

Controls: 用來設(shè)置是否為視頻添加控制條，例如“播放”、“暫停”等；控制條的外觀可以自定義。

Loop: 用來設(shè)置視頻是否循環(huán)播放。

Width , Height: 用來控制視頻的寬度與高度。

雖然<video>元素備受關(guān)注且大有潛力，不過距離被主流瀏覽器全面支持仍有待時日；目前，如果一定有必要使用<video>?標(biāo)簽，我們可以使用類似如下不倫不類的代碼組合方式：

<video width="640" height="360" src="http://www.youtube.com/demo/google_main.mp4" autobuffer controls poster="whale.png"><object classid="clsid:02bf25d5-8c17-4b23-bc80-d3488abddc6b" width="640"height="360"codebase="http://www.apple.com/qtactivex/qtplugin.cab"><param value="http://www.youtube.com/demo/google_main.mp4"><param value="true"><param value="false"><embed src="http://www.youtube.com/demo/google_main.mp4" width="640"height="360"autoplay="true" controller="false" pluginspage="http://www.apple.com/quicktime/download/"></embed></object> </video>

?

audio

HTML5中的新元素標(biāo)簽<audio>是被大家等待已久的，它有原生支持音頻播放的功能，而不需要瀏覽器安裝額外的擴(kuò)展；目前支持<audio>元素的瀏覽器主要有Safari 4，Firefox 3.5和Chrome 3。

<audio>元素標(biāo)簽的一些常用屬性：

src：音頻文件路徑。

autobuffer：設(shè)置是否在頁面加載時自動緩沖音頻。

autoplay：設(shè)置音頻是否自動播放。

loop：設(shè)置音頻是否要循環(huán)播放。

controls：設(shè)置是否顯示播放控制面板。

可以看到這些屬性和<video>元素標(biāo)簽的屬性很類似。下面我們來看一個代碼范例：

<audio src="elvis.ogg" controls autobuffer></audio>

?

這段代碼可以在Firefox 3.5和Chrome 3中正常工作，對于Safari 4來說要使用ogg格式的音頻文件替換掉mp3文件。不過，鑒于W3C的HTML5定義規(guī)范并沒有最終完成，這些格式限制也許在將來會有所變化。

根據(jù)定義規(guī)范，以下幾種API方法是可以使用的：

play()：播放音頻

pause()：暫停播放

canPlayType()：命令瀏覽器判斷當(dāng)前音頻文件是否可以被播放

buffered()：設(shè)定文件需要緩沖部分的開始與結(jié)束時間點。

另外，我們可以使用<source>元素標(biāo)簽來配合<audio>；<source>用來指定多個音頻文件，如果當(dāng)前瀏覽器不支持第一個文件，那么<audio>會自動嘗試播放下面一個<source>中指定的文件；我們還可以在它們后面加上目前常規(guī)的<embed>代碼來加載Flash播放器，作為后備方案；范例如下：

<audio controls autobuffer><source src="elvis.ogg" /><source src="elvis.mp3" /><!-- now include flash fall back --> </audio>

?

meter

meter元素標(biāo)簽用來表示范圍已知且可度量的等級標(biāo)量或分?jǐn)?shù)值，如磁盤使用量比例、關(guān)鍵詞匹配程度等。需要注意的是，<meter>不可以用來表示那些沒有已知范圍的任意值，例如重量、高度，除非已經(jīng)設(shè)定了它們值的范圍。<meter>元素共有6個屬性：

Value：表示當(dāng)前標(biāo)量的實際值；如果不做指定，那么<meter>標(biāo)簽中的第一個數(shù)字就會被認(rèn)為是其當(dāng)前實際值，例如<meter>2 out of 10</meter>中的“2”；如果標(biāo)簽內(nèi)沒有數(shù)字，那么標(biāo)量的實際值就是0。

Min：當(dāng)前標(biāo)量的最小值；如不做指定則為0。

Max：當(dāng)前標(biāo)量的最大值；如不做指定則為1；如果指定的最大值小于最小值，那么最小值會被認(rèn)為是最大值。

Low：當(dāng)前標(biāo)量的低值區(qū)；必須小于或等于標(biāo)量的高值區(qū)數(shù)字；如果低值區(qū)數(shù)字小于標(biāo)量最小值，那么它會被認(rèn)為是最小值。

High：當(dāng)前標(biāo)量的高值區(qū)。

Optimum：最佳值；其范圍在最小值與最大值區(qū)間當(dāng)中，并且可以處于高值區(qū)。

來看一些代碼范例；首先，不設(shè)定任何屬性的狀況：

<p>Your score is: <meter>2 out of 10</meter></p>

然后呢，可以增加最大值與最小值的屬性設(shè)定：

<p>Your score is: <meter min="0" max="10">2 out of 10</meter></p>

增加了低值區(qū)、高值區(qū)和最佳值的屬性設(shè)定：

<p>Your score is: <meter value="91" min="0" max="100" low="40" high="90" optimum="100">A+</meter></p>

這時<meter>的最大值會被認(rèn)為是100%或1。

下面這段代碼可以用作節(jié)日倒計時：

<p>Christmas is in <meter value ="30" min="1" max="366" title="days">30 days!</p>

<meter>標(biāo)簽中的內(nèi)容可以不包含任何數(shù)字，這時最大值會被認(rèn)為是1；可以參考以下的代碼：

<p><meter value="0.5">Moderate activity,</meter> Usenet, 618 subscribers</p> <p><meter value="0.25">Low activity,</meter> Usenet, 22 subscribers</p> <p><meter value="0.25">Low activity,</meter> Usenet, 66 subscribers</p>

?

datalist

datalist 與 input 的新屬性list一起使用可以創(chuàng)建組合框，雙擊input的時候可以提供選項讓用戶選擇，類似歷史記錄一樣。

<input list="browsers"> <datalist id="browsers"><option value="Safari"><option value="Internet Explorer"><option value="Opera"><option value="Firefox"> </datalist>

?

keygen

<keygen>?標(biāo)簽規(guī)定用于表單的密鑰對生成器字段。當(dāng)提交表單時，私鑰存儲在本地，公鑰發(fā)送到服務(wù)器。

<form action="demo_keygen.asp" method="get"> Username: <input type="text" name="usr_name" /> Encryption: <keygen name="security" /> <input type="submit" /> </form>

?

output

<output>?標(biāo)簽定義不同類型的輸出，比如腳本的輸出。例如：

<form action="" method="get"><p>10 + 5 = <output name="sum"></output></p><button type="submit">計算</button> </form><script type="text/javascript"> (function() {var f = document.forms[0];if ( typeof f['sum'] !== 'undefined' ) {f.addEventListener('submit', function(e) {f['sum'].value = 15;e.preventDefault();}, false);} else {alert('你的瀏覽器尚未準(zhǔn)備好！');} })(); </script>

總結(jié)

以上是生活随笔為你收集整理的新元素之video,audio,meter,datalist,keygen,output的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。