Version concise des notes d'étude HTML5 (4) : nouveaux éléments : compteur, datalist, keygen, sortie

vidéo

Grâce à la balise 39000f942b2545a5315c57fa3276f220, nous pouvons abandonner Flash, qui n'a pas été très populaire ces derniers temps, et lire des fichiers vidéo directement sur la page. Les fichiers vidéo sont naturellement le format de fichier le plus sémantique, mais cette balise d'élément prend également en charge l'audio et les images.

Dans le passé (et actuellement), nous devons généralement utiliser un code encombrant et laid comme celui-ci pour placer des vidéos sur la page, mais cette méthode nécessite que le navigateur ait installé le plug-in Flash et prenne en charge 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>

Méthode 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>

La balise 39000f942b2545a5315c57fa3276f220 a les attributs communs suivants :

Lecture automatique : utilisée pour définir si la vidéo sera automatiquement lue une fois la page chargée.

Src : spécifiez un lien de fichier ou un chemin de téléchargement pour la vidéo. Lorsque le navigateur ne prend pas en charge la balise 39000f942b2545a5315c57fa3276f220 ou qu'une erreur de lecture se produit, elle peut être fournie à l'utilisateur pour téléchargement.

Autobuffer : utilisé pour définir si la vidéo est automatiquement mise en mémoire tampon ; si elle est définie, la vidéo sera automatiquement téléchargée et mise en mémoire tampon après le chargement de la page. Lorsque l'utilisateur clique sur le bouton de lecture, au moins une partie de la vidéo peut être enregistrée. être regardé directement sans attendre.

Affiche : utilisée pour définir une image d'arrière-plan "image par défaut du cadre photo" pour la vidéo ; elle peut être présentée à l'utilisateur lorsque la vidéo ne peut pas être chargée et lue normalement.

Contrôles : Utilisé pour définir s'il faut ajouter des barres de contrôle à la vidéo, telles que "lecture", "pause", etc. ; l'apparence de la barre de contrôle peut être personnalisée.

Boucle : utilisé pour définir si la vidéo est lue en boucle.

Largeur, Hauteur : Utilisé pour contrôler la largeur et la hauteur de la vidéo.

Bien que l'élément 39000f942b2545a5315c57fa3276f220 ait attiré beaucoup d'attention et ait un grand potentiel, il faudra encore un certain temps avant qu'il soit pleinement pris en charge par les navigateurs grand public actuellement, s'il est absolument nécessaire d'utiliser l'élément 39000f942b2545a5315c57fa3276f220 ;, nous pouvons utiliser quelque chose comme La méthode de combinaison de code non descriptive suivante :

<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

La nouvelle balise d'élément b97864c2e0ef2353a16c4d64c7734e92 a la fonction de support natif pour la lecture audio. Il ne nécessite pas que le navigateur installe des extensions supplémentaires ; actuellement, les navigateurs qui prennent en charge l'élément b97864c2e0ef2353a16c4d64c7734e92 incluent Safari 4, Firefox 3.5 et Chrome 3.

b97864c2e0ef2353a16c4d64c7734e92 Quelques attributs courants des balises d'élément :

src : chemin du fichier audio.

autobuffer : définissez s'il faut automatiquement mettre en mémoire tampon l'audio lors du chargement de la page.

lecture automatique : définissez si l'audio est lu automatiquement.

boucle : définissez si l'audio doit être lu en boucle.

contrôles : définissez s'il faut afficher le panneau de contrôle de lecture.

Vous pouvez voir que ces attributs sont très similaires aux attributs de la balise d'élément 39000f942b2545a5315c57fa3276f220 Jetons un coup d'œil à un exemple de code :

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

Ce code peut fonctionner normalement dans Firefox 3.5 et Chrome 3. Pour Safari 4, le fichier mp3 doit être remplacé par un fichier audio au format ogg. Cependant, étant donné que la spécification de définition HTML5 du W3C n'a pas été finalisée, ces restrictions de format pourraient changer à l'avenir.

Selon la spécification de la définition, les méthodes API suivantes sont disponibles :

play() : lire l'audio

pause() : mettre la lecture en pause

canPlayType () : Commande au navigateur de déterminer si le fichier audio actuel peut être lu.

buffered() : Définit les points temporels de début et de fin de la partie mise en mémoire tampon du fichier.

De plus, nous pouvons utiliser la balise d'élément e02da388656c3265154666b7c71a8ddc pour faire correspondre b97864c2e0ef2353a16c4d64c7734e92; e02da388656c3265154666b7c71a8ddc est utilisé pour spécifier plusieurs fichiers audio. b97864c2e0ef2353a16c4d64c7734e92 essaiera automatiquement de lire le fichier spécifié dans la e02da388656c3265154666b7c71a8ddc suivante ; nous pouvons également ajouter le code d8e2720730be5ddc9c2a3782839e8eb6 conventionnel actuel pour charger le lecteur Flash comme plan de sauvegarde ;

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

compteur

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