新元素之video,audio,meter,datalist,keygen,output
video
通過<video>標簽,我們可以拋棄最近不怎么討好的Flash,直接在頁面中播放視頻文件。視頻文件自然是最符合語義化的文件格式,但該元素標簽同樣支持音頻與圖片。
過去(及目前),我們通常要使用類似下面這樣繁冗丑陋的代碼來將視頻放置在頁面中,但這種方式要求瀏覽器安裝有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>標簽有如下幾個常用屬性:
雖然<video>元素備受關注且大有潛力,不過距離被主流瀏覽器全面支持仍有待時日;目前,如果一定有必要使用<video>?標簽,我們可以使用類似如下不倫不類的代碼組合方式:
<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中的新元素標簽<audio>是被大家等待已久的,它有原生支持音頻播放的功能,而不需要瀏覽器安裝額外的擴展;目前支持<audio>元素的瀏覽器主要有Safari 4,Firefox 3.5和Chrome 3。
<audio>元素標簽的一些常用屬性:
可以看到這些屬性和<video>元素標簽的屬性很類似。下面我們來看一個代碼范例:
<audio src="elvis.ogg" controls autobuffer></audio>?
這段代碼可以在Firefox 3.5和Chrome 3中正常工作,對于Safari 4來說要使用ogg格式的音頻文件替換掉mp3文件。不過,鑒于W3C的HTML5定義規范并沒有最終完成,這些格式限制也許在將來會有所變化。
根據定義規范,以下幾種API方法是可以使用的:
另外,我們可以使用<source>元素標簽來配合<audio>;<source>用來指定多個音頻文件,如果當前瀏覽器不支持第一個文件,那么<audio>會自動嘗試播放下面一個<source>中指定的文件;我們還可以在它們后面加上目前常規的<embed>代碼來加載Flash播放器,作為后備方案;范例如下:
<audio controls autobuffer><source src="elvis.ogg" /><source src="elvis.mp3" /><!-- now include flash fall back --> </audio>?
meter
meter元素標簽用來表示范圍已知且可度量的等級標量或分數值,如磁盤使用量比例、關鍵詞匹配程度等。需要注意的是,<meter>不可以用來表示那些沒有已知范圍的任意值,例如重量、高度,除非已經設定了它們值的范圍。<meter>元素共有6個屬性:
來看一些代碼范例;首先,不設定任何屬性的狀況:
<p>Your score is: <meter>2 out of 10</meter></p>然后呢,可以增加最大值與最小值的屬性設定:
<p>Your score is: <meter min="0" max="10">2 out of 10</meter></p>增加了低值區、高值區和最佳值的屬性設定:
<p>Your score is: <meter value="91" min="0" max="100" low="40" high="90" optimum="100">A+</meter></p>這時<meter>的最大值會被認為是100%或1。
下面這段代碼可以用作節日倒計時:
<p>Christmas is in <meter value ="30" min="1" max="366" title="days">30 days!</p><meter>標簽中的內容可以不包含任何數字,這時最大值會被認為是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一起使用可以創建組合框,雙擊input的時候可以提供選項讓用戶選擇,類似歷史記錄一樣。
<input list="browsers"> <datalist id="browsers"><option value="Safari"><option value="Internet Explorer"><option value="Opera"><option value="Firefox"> </datalist>?
keygen
<keygen>?標簽規定用于表單的密鑰對生成器字段。當提交表單時,私鑰存儲在本地,公鑰發送到服務器。
<form action="demo_keygen.asp" method="get"> Username: <input type="text" name="usr_name" /> Encryption: <keygen name="security" /> <input type="submit" /> </form>?
output
<output>?標簽定義不同類型的輸出,比如腳本的輸出。例如:
<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('你的瀏覽器尚未準備好!');} })(); </script>總結
以上是生活随笔為你收集整理的新元素之video,audio,meter,datalist,keygen,output的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 新元素之hgroup,header,fo
- 下一篇: HTML5中figure标签使用实例