Tag HTML <video>

Le tag de HTML <video> donne l’opportunité d’ajouter des fichier vidéo sur la page. Pour lire correctement les fichiers vidéo, vous devez définir plusieurs formats à la fois, car tous les navigateurs ne prennent pas en charge les fichiers vidéo de tous les formats.

Le chemin d’accès au fichier est spécifié à l’aide de l’attribut src ou élément <source> imbriqué. L’élément <video> peut contenir plusieurs éléments <source> à la fois, Chacun spécifie des variantes de la même vidéo avec différentes versions de codecs.

Le tag <video> peut aussi contenir un texte, qui sera affiché si le navigateur ne supporte pas le format du fichier vidéo.

Il existe actuellement 3 formats vidéo: MP4 / MPEG-4, OGG et WebM +. Pour compresser les données vidéo et les restaurer, des programmes spéciaux et des codecs vidéo sont utilisés. Un codec est une formule de fichier qui détermine le mode de "packaging" du contenu vidéo et de sa lecture.

Pour le fichier vidéo de format MPEG-4 on utilise le codec vidéo Н.264 et le codec audio ААС. Pour utiliser des codecs, on doit obtenir une licence.

Pour le fichier vidéo Ogg on utilise le codec vidéo Theora et le codec audio Vorbis avec un code ouvre.

Pour le fichier vidéo de format WebM + on utilise le codec vidéo VP8 et le codec audio Vorbis. Pour les utiliser, vous n'avez pas besoin de licence.

Syntaxe

Le tag de HTML <video> est apparié; le contenu est écrit entre les tags ouvrant (<video>) et fermant (</video>).

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      video {
        width: 300px; 
        height: 200px;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <video controls muted src="/build/videos/arcnet.io(7-sec).mp4">
      <track default kind="subtitles" srclang="en" src="/build/videos/arcnet.io(7-sec).mp4"/>
    </video>
    <p>Quelque information sur le vidéo</p>
  </body>
</html>

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      video {
      width: 300px; 
      height: 220px;
      border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <video controls>
      <source src=”http://techslides.com/demos/sample-videos/small.ogv” type=video/ogg>
      <source src="/build/videos/arcnet.io(7-sec).mp4" type=video/mp4>
    </video>
    <p>Quelque information sur le vidéo</p>
  </body>
</html>
On peut utiliser les attributs controls, autoplay et loop sans valeur. Si l’attribut est indiqué, cela signifie que la fonction donnée est activée, et s’il n’est pas indiqué, alors la fonction est désactivée.

Attributs

Attribut Valeur Description
autoplay autoplay Indique, que la vidéo démarrera automatiquement dès qu’elle sera prête.
controls controls Affiche les commandes intégrées pour les fichiers multimédia (bouton lecture / pause, bouton vous permettant de naviguer vers un clip spécifique, ainsi que le contrôle du volume).
height pixels Définit la hauteur du lecteur vidéo.
loop loop Indique que la lecture commencera à partir du début, chaque fois après la fin.
muted muted Indique que la vidéo sera jouée en silence.
poster URL Définit l'image affichée pendant le chargement de la vidéo ou jusqu'à ce que l'utilisateur appuie sur le bouton de lecture.
preload auto
metadata
none
Indique comment la vidéo doit être chargée lors du chargement de la page. L'attribut est ignoré si l'attribut autoplay est défini.
src URL Indique l’adresse URL du fichier vidéo.
width pixels Définit la largeur du lecteur vidéo.

Le tag <video> supporte également les Attributs globaux et les Attributs d'événements.


Support de Navigateurs

4+ 3.5+ 4+ 10.5+


Trouvez-vous cela utile?

Articles Associées