HTML5學習筆記簡明版（4）：新元素之video,audio,meter,datalist,keygen,output

2011-12-09 08:58 湯姆大叔閱讀(6521) 評論(4) 收藏舉報

本章節介紹的HTML5的另外6個新元素video,audio,meter,datalist,keygen,output。通過video標簽，我們可以拋棄最近不怎么討好的Flash，直接在頁面中播放視頻文件。視頻文件自然是最符合語義化的文件格式，但該元素標簽同樣支持音頻與圖片。audio有原生支持音頻播放的功能，而不需要瀏覽器安裝額外的擴展；目前支持audio元素的瀏覽器主要有Safari 4，Firefox 3.5和Chrome 3。

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>標簽有如下幾個常用屬性：

Autoplay: 用來設定視頻是否在頁面加載后自動播放。
Src: 為視頻指定文件鏈接或下載路徑，當瀏覽器不支持<video>標簽或發生某種播放錯誤時，可以提供給用戶進行下載。
Autobuffer: 用來設定視頻是否自動緩沖；如果設定，那么頁面加載之后，視頻會自動下載緩沖，當用戶點擊播放按鈕后，至少已經有一部分視頻可以直接觀看而無需等待了。
Poster: 用來為視頻設置一個“相框默認圖片”性質的背景圖片；當視頻無法正常加載播放時可以向用戶呈現。
Controls: 用來設置是否為視頻添加控制條，例如“播放”、“暫停”等；控制條的外觀可以自定義。
Loop: 用來設置視頻是否循環播放。
Width , Height: 用來控制視頻的寬度與高度。

雖然<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>元素標簽的一些常用屬性：

src：音頻文件路徑。
autobuffer：設置是否在頁面加載時自動緩沖音頻。
autoplay：設置音頻是否自動播放。
loop：設置音頻是否要循環播放。
controls：設置是否顯示播放控制面板。

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

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

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

根據定義規范，以下幾種API方法是可以使用的：

play()：播放音頻
pause()：暫停播放
canPlayType()：命令瀏覽器判斷當前音頻文件是否可以被播放
buffered()：設定文件需要緩沖部分的開始與結束時間點。

另外，我們可以使用<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個屬性：

Value：表示當前標量的實際值；如果不做指定，那么<meter>標簽中的第一個數字就會被認為是其當前實際值，例如<meter>2 out of 10</meter>中的“2”；如果標簽內沒有數字，那么標量的實際值就是0。
Min：當前標量的最小值；如不做指定則為0。
Max：當前標量的最大值；如不做指定則為1；如果指定的最大值小于最小值，那么最小值會被認為是最大值。
Low：當前標量的低值區；必須小于或等于標量的高值區數字；如果低值區數字小于標量最小值，那么它會被認為是最小值。
High：當前標量的高值區。
Optimum：最佳值；其范圍在最小值與最大值區間當中，并且可以處于高值區。

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

<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>

刷新頁面返回頂部

湯姆大叔的博客