Explication détaillée de la balise vidéo HTML5-Tutoriel H5-php.cn

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

黄舟

Libérer： 2017-05-19 17:24:49

original

4470 Les gens l'ont consulté

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>

Copier après la connexion

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>

Copier après la connexion

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

Copier après la connexion

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>

Copier après la connexion

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