HTML5 学習メモの簡潔版 (4): 新しい要素: meter、datalist、keygen、output

video

39000f942b2545a5315c57fa3276f220 タグを使用すると、最近あまり普及していない 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>

39000f942b2545a5315c57fa3276f220 タグには次の共通属性があります:

Autoplay: ページが読み込まれた後にビデオを自動的に再生するかどうかを設定するために使用されます。

Src: ブラウザが 39000f942b2545a5315c57fa3276f220 タグをサポートしていない場合、または再生エラーが発生した場合に、ビデオのファイル リンクまたはダウンロード パスを指定して、ダウンロード用にユーザーに提供できます。

自動バッファ: ビデオを自動的にバッファリングするかどうかを設定するために使用されます。設定されている場合、ユーザーが再生ボタンをクリックすると、ビデオの少なくとも一部が直接視聴されます。待っている。

ポスター: ビデオの「フォトフレームのデフォルト画像」の背景画像を設定するために使用されます。ビデオを正常にロードして再生できない場合にユーザーに表示できます。

コントロール: 「再生」、「一時停止」などのコントロール バーをビデオに追加するかどうかを設定するために使用され、コントロール バーの外観をカスタマイズできます。

ループ: ビデオをループ再生するかどうかを設定するために使用されます。

幅、高さ: ビデオの幅と高さを制御するために使用されます。

39000f942b2545a5315c57fa3276f220 要素は多くの注目を集めており、大きな可能性を秘めていますが、現時点で主流のブラウザーで完全にサポートされるまでにはまだ時間がかかります。次の組み合わせメソッドのような平凡なコードを使用できます:

<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 の新しい要素タグ b97864c2e0ef2353a16c4d64c7734e92 は、ブラウザーのインストールを必要とせずにネイティブでオーディオ再生をサポートする機能を備えています。追加の拡張機能は現在、< audio 要素の主なブラウザは Safari 4、Firefox 3.5、および Chrome 3 をサポートしています。

b97864c2e0ef2353a16c4d64c7734e92 要素タグのいくつかの共通属性:

src: オーディオ ファイルのパス。

autobuffer: ページの読み込み時に音声を自動的にバッファリングするかどうかを設定します。

自動再生: オーディオを自動的に再生するかどうかを設定します。

loop: オーディオをループで再生するかどうかを設定します。

コントロール: 再生コントロールパネルを表示するかどうかを設定します。

これらの属性は 39000f942b2545a5315c57fa3276f220 要素タグの属性と非常に似ていることがわかります。コード例を見てみましょう:

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

このコードは、Firefox 3.5 および Chrome 3 で正常に動作します。Safari 4 の場合、mp3 ファイルを ogg 形式のオーディオ ファイルに置き換える必要があります。ただし、W3C の HTML5 定義仕様が最終決定されていないため、これらの形式の制限は将来変更される可能性があります。

定義仕様に従って、次の API メソッドが使用できます:

play(): オーディオの再生

pause(): 再生の一時停止

canPlayType(): 現在のオーディオ ファイルが再生可能かどうかをブラウザーに決定します。再生

buffered(): ファイルのバッファリングされた部分の開始時点と終了時点を設定します。

さらに、e02da388656c3265154666b7c71a8ddc 要素タグを使用して b97864c2e0ef2353a16c4d64c7734e92 を使用できます。現在のブラウザが最初のファイルをサポートしていない場合は、b97864c2e0ef2353a16c4d64c7734e92 が使用されます。次の e02da388656c3265154666b7c71a8ddc で指定されたファイルを自動的に再生します。また、現在の従来の d8e2720730be5ddc9c2a3782839e8eb6 コードを追加して、バックアップ プランとして Flash プレーヤーをロードすることもできます:

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

メーター

meter元素标签用来表示范围已知且可度量的等级标量或分数值，如磁盘使用量比例、关键词匹配程度等。需要注意的是，49c6123c49c6be380cb91db06cd3bfa9不可以用来表示那些没有已知范围的任意值，例如重量、高度，除非已经设定了它们值的范围。49c6123c49c6be380cb91db06cd3bfa9元素共有6个属性：

Value：表示当前标量的实际值；如果不做指定，那么49c6123c49c6be380cb91db06cd3bfa9标签中的第一个数字就会被认为是其当前实际值，例如49c6123c49c6be380cb91db06cd3bfa92 out of 106fd20bd7b615c56cbd536dc339c52b20中的“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>

这时49c6123c49c6be380cb91db06cd3bfa9的最大值会被认为是100%或1。

下面这段代码可以用作节日倒计时：

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

49c6123c49c6be380cb91db06cd3bfa9标签中的内容可以不包含任何数字，这时最大值会被认为是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

aa983b9eb8086376f1f6481364a02e5a 标签规定用于表单的密钥对生成器字段。当提交表单时，私钥存储在本地，公钥发送到服务器。

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

output

be6d67dae90cc1ad6469079e163d0939 标签定义不同类型的输出，比如脚本的输出。例如：

<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[&#39;sum&#39;] !== &#39;undefined&#39; ) {
        f.addEventListener(&#39;submit&#39;, function(e) {
            f[&#39;sum&#39;].value = 15;
            e.preventDefault();
        }, false);
    } else {
        alert(&#39;你的浏览器尚未准备好！&#39;);
    }
})();
</script>

以上就是HTML5学习笔记简明版（4）：新元素之meter,datalist,keygen,output的内容，更多相关内容请关注PHP中文网（www.php.cn）！