Kurzfassung der HTML5-Studiennotizen (4): neue Elemente: Messgerät, Datenliste, Keygen, Ausgabe

Video

Durch das 39000f942b2545a5315c57fa3276f220-Tag können wir auf Flash verzichten, das in letzter Zeit nicht sehr beliebt war, und Videodateien direkt auf der Seite abspielen. Videodateien sind natürlich das semantischste Dateiformat, aber dieses Element-Tag unterstützt auch Audio und Bilder.

Früher (und aktuell) mussten wir normalerweise umständlichen und hässlichen Code wie den folgenden verwenden, um Videos auf der Seite zu platzieren, aber diese Methode erfordert, dass der Browser das Flash-Plug-in installiert hat und JavaScript unterstützt :

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

<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 Tag hat die folgenden allgemeinen Attribute:

Autoplay: wird verwendet, um festzulegen, ob das Video automatisch abgespielt wird nachdem die Seite geladen wurde.

Quelle: Geben Sie einen Dateilink oder Downloadpfad für das Video an. Wenn der Browser das Tag 39000f942b2545a5315c57fa3276f220 nicht unterstützt, kann es dem Benutzer zum Herunterladen bereitgestellt werden.

Autobuffer: Wird verwendet, um festzulegen, ob das Video automatisch gepuffert wird. Wenn der Benutzer auf die Wiedergabeschaltfläche klickt, wird das Video automatisch heruntergeladen und gepuffert direkt ohne Wartezeit angeschaut werden.

Poster: Wird verwendet, um ein Hintergrundbild für das Video als „Standardbild für den Fotorahmen“ festzulegen. Es kann dem Benutzer angezeigt werden, wenn das Video nicht normal geladen und abgespielt werden kann.

Steuerelemente: Wird verwendet, um festzulegen, ob dem Video Steuerleisten hinzugefügt werden sollen, z. B. „Wiedergabe“, „Pause“ usw.; das Erscheinungsbild der Steuerleiste kann angepasst werden.

Schleife: Wird verwendet, um festzulegen, ob das Video in einer Schleife abgespielt wird.

Breite, Höhe: Wird verwendet, um die Breite und Höhe des Videos zu steuern.

Obwohl das 39000f942b2545a5315c57fa3276f220-Element viel Aufmerksamkeit erregt hat und großes Potenzial hat, wird es derzeit noch einige Zeit dauern, bis es von Mainstream-Browsern vollständig unterstützt wird, sofern die Verwendung des 39000f942b2545a5315c57fa3276f220-Elements unbedingt erforderlich ist ;-Tag, wir können so etwas wie die folgende unscheinbare Code-Kombinationsmethode verwenden:

<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

Das neue Element-Tag b97864c2e0ef2353a16c4d64c7734e92 verfügt über die Funktion der nativen Unterstützung für die Audiowiedergabe. Derzeit sind unter anderem Safari 4, Firefox 3.5 und Chrome 3 erforderlich.

b97864c2e0ef2353a16c4d64c7734e92 Einige allgemeine Attribute von Element-Tags:

src: Pfad der Audiodatei.

Autobuffer: Legen Sie fest, ob Audio beim Laden der Seite automatisch gepuffert werden soll.

Autoplay: Legen Sie fest, ob der Ton automatisch abgespielt wird.

Schleife: Legen Sie fest, ob das Audio in einer Schleife abgespielt werden soll.

Steuerelemente: Legen Sie fest, ob das Wiedergabe-Kontrollfeld angezeigt werden soll.

Sie können sehen, dass diese Attribute den Attributen des 39000f942b2545a5315c57fa3276f220-Elements sehr ähnlich sind. Schauen wir uns ein Codebeispiel an:

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

Dieser Code kann in Firefox 3.5 und Chrome 3 normal funktionieren. Für Safari 4 muss die MP3-Datei durch eine Audiodatei im OGG-Format ersetzt werden. Da die HTML5-Definitionsspezifikation des W3C jedoch noch nicht fertiggestellt ist, können sich diese Formatbeschränkungen in Zukunft ändern.

Gemäß der Definitionsspezifikation stehen folgende API-Methoden zur Verfügung:

play(): Audio abspielen

pause(): Wiedergabe anhalten

canPlayType (): Weist den Browser an, festzustellen, ob die aktuelle Audiodatei abgespielt werden kann

buffered(): Legt die Start- und Endzeitpunkte des gepufferten Teils der Datei fest.

Darüber hinaus können wir das e02da388656c3265154666b7c71a8ddc-Element-Tag verwenden, um mehrere Audiodateien anzugeben ; audio> wird automatisch versuchen, die im folgenden e02da388656c3265154666b7c71a8ddc angegebene Datei abzuspielen, um den Flash-Player wie folgt zu laden:

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

Meter

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