Maison > Article > interface Web > Explication détaillée de la balise vidéo HTML5

Explication détaillée de la balise vidéo HTML5

黄舟original: 2017-05-19 17:24:494473parcourir

Dans l'article précédent Route de développement mobile HTML5 de Xiaoqiang (5) - Créer un beau lecteur vidéo, j'ai créé un lecteur très facile à utiliser. Certains amis ne connaissent pas grand-chose aux principes. analyse approfondie de l'utilisation de la balise

1. Compétences d'utilisation

En HTML5, vous pouvez utiliser la balise

<video src="move.mp4"></video>

balise vidéo Il contient de nombreux attributs, tels que l'attribut de contrôle qui peut contrôler s'il existe une console.

<video src="move.mp4" controls="controls">  
    浏览器不支持HTML5的视频播放功能  
</video>

À partir des formats vidéo ci-dessus, nous pouvons voir que différents navigateurs prennent en charge différents formats vidéo, nous pouvons donc utiliser la balise pour spécifier des vidéos dans plusieurs formats. Par défaut, le navigateur télécharge le fichier. commencera automatiquement à déterminer son type.

<video width="400" controls="controls">  
    <source src="move.mp4"  type="video/mp4" />  
    <source src="move.ogg"  type="video/ogg" />  
</video>

2. Attributs de la balise vidéo

La balise vidéo prend en charge les attributs globaux et les attributs d'événement en HTML5

Les attributs uniques sont les suivants :

Attributs Valeurs Description

autoplay autoplay Si cet attribut est présent, la vidéo sera lue dès qu'elle sera prête.

contrôles Si cet attribut apparaît, affiche les contrôles à l'utilisateur, comme un bouton de lecture.

hauteur pixels Définissez la hauteur du lecteur vidéo.

LOOP LOOP Si cet attribut apparaît, la lecture recommencera après la lecture du fichier multimédia.

preload preload

Si cet attribut apparaît, la vidéo sera chargée au chargement de la page et sera prête à être lue.

Cet attribut est ignoré si la "lecture automatique" est utilisée.

src url L'URL de la vidéo à lire.

width pixels Définissez la largeur du lecteur vidéo.

Méthodes vidéo et événements d'attribut pris en charge par la plupart des navigateurs

pause() currentTime pause

load() videoWidth progress

canPlayType videoHeight error

durée mise à jour

terminée terminée

erreur d'abandon

🎜>

volume loadedmetadata

height

width

注释：在所有属性中，只有 videoWidth 和 videoHeight 属性是立即可用的。在视频的元数据已加载后，其他属性才可用。

三、从实例中了解Video标签的使用

<!DOCTYPE html>   
<html>   
<body>   
    <p style="text-align:center;">  
      <!--定义按钮，并添加事件监听函数-->  
      <button onclick="playPause()">播放/暂停</button>   
      <button onclick="makeBig()">大</button>  
      <button onclick="makeNormal()">中</button>  
      <button onclick="makeSmall()">小</button>  
      <br />   
      <video id="video1" width="420" style="margin-top:15px;">  
        <source src="http://demo.inwebson.com/html5-video/iceage4.mp4" type="video/mp4" />  
          <source src="http://demo.inwebson.com/html5-video/iceage4.webm" type="video/webM" />  
          <source src="http://demo.inwebson.com/html5-video/iceage4.ogv" type="video/ogg" />  
          <p>您的浏览器不支持此HTML5标签</p>  
      </video>  
    </p>   
  
    <script type="text/javascript">  
        //得到video标签对象  
        var myVideo=document.getElementById("video1");  
  
        function playPause()  
        {   
            if (myVideo.paused)   
              myVideo.play();   
            else   
              myVideo.pause();   
        }   
  
        function makeBig()  
        {   
            myVideo.width=560;   
        }   
  
        function makeSmall()  
        {   
            myVideo.width=320;   
        }   
  
        function makeNormal()  
        {   
            myVideo.width=420;   
        }   
    </script>   
  
</body>   
</html>

Explication détaillée de la balise vidéo HTML5

【相关推荐】

1. 详解html5的video标签测试应用

2. html 5中使用video元素制作一个影片播放器

3. H5 video标签只能放声音不能放视频的解决办法

4. 分享一个video标签无法播放mp4的问题以及解决方案

5. IIS的MIME未注册MP4类型，导致无法识别vidoe标签的解决办法

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Le chemin de Xiaoqiang vers le développement mobile HTML5 (13) - Attributs globaux en HTML5Article suivant：Le chemin de Xiaoqiang vers le développement mobile HTML5 (13) - Attributs globaux en HTML5

Articles Liés

Voir plus