Balise HTML `<video>`

La balise <video> fait partie des éléments HTML5. Elle est utilisée pour intégrer une vidéo dans un document HTML. Les navigateurs ne prenant pas tous en charge les mêmes formats vidéo, il est recommandé de fournir plusieurs formats pour un affichage correct. Le chemin vers le fichier vidéo est inclus dans la balise <source> ou dans l'attribut src.

Vous pouvez également ajouter un texte alternatif dans la balise <video>, qui sera affiché si le navigateur ne prend pas en charge le format vidéo.

Il existe 3 formats vidéo pris en charge pour l'élément <video> : MP4/MPEG 4, WebM et Ogg. Pour la compression/décompression des fichiers vidéo volumineux, des programmes et codecs spécialisés sont utilisés.

Les fichiers MP4/MPEG 4 utilisent les codecs vidéo H264 et audio AAC, les fichiers WebM - les codecs vidéo VP8 ou VP9 et audio Vorbis ou Opus ; et les fichiers Ogg - le codec vidéo Theora et le codec audio Vorbis.

Pour contrôler le contenu vidéo et/ou audio, vous pouvez utiliser différents événements. Ces événements permettent de surveiller la progression du téléchargement et de la lecture du média, ainsi que la position et l'état de lecture.

Pour modifier le positionnement de la vidéo dans le cadre de l'élément, vous pouvez utiliser la propriété CSS object-position. Si vous souhaitez contrôler la façon dont la taille de la vidéo est ajustée pour s'inscrire dans le cadre, utilisez la propriété object-fit.

Vous pouvez ajouter des sous-titres à votre vidéo en utilisant JavaScript avec l'élément <track> et le format WebVTT. Vous pouvez également lire des fichiers audio via <video>, ce qui peut s'avérer utile dans certains cas.

L'élément <video> est un élément remplacé avec une valeur par défaut display: block. La mise en forme est généralement gérée via width/height ou des propriétés CSS comme object-fit et object-position.

Syntaxe

La balise <video> s'écrit en paire. Le contenu est placé entre la balise d'ouverture (<video>) et la balise de fermeture (</video>).

Exemple de la balise HTML `<video>` avec les attributs controls, muted et src :

Exemple de la balise HTML <video>

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      video{
        width: 300px; 
        height: 200px;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <video controls muted src="https://fr.w3docs.com/build/videos/arcnet.io(7-sec).mp4" playsinline>
      <track default kind="subtitles" srclang="en" src="https://fr.w3docs.com/build/videos/arcnet.io(7-sec).vtt"/>
    </video>
    <p>Some information about video</p>
  </body>
</html>

Try it Yourself »

Exemple de la balise HTML `<video>` avec l'attribut controls :

Comment utiliser la balise HTML <video> ?

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      video {
        width: 300px;
        height: 220px;
        border: 1px solid #666;
      }
    </style>
  </head>
  <body>
    <video controls playsinline>
      <source src="http://techslides.com/demos/sample-videos/small.ogv" type="video/ogg" />
      <source src="https://fr.w3docs.com/build/videos/arcnet.io(7-sec).mp4" type="video/mp4" />
    </video>
    <p>Some information about video</p>
  </body>
</html>

Try it Yourself »

TIP

Les attributs controls, autoplay et loop sont des attributs booléens et n'acceptent pas de valeurs. S'ils sont spécifiés, ils sont activés par défaut.

Attributs

Attributs	Valeur	Description
autoplay	autoplay	Indique que la vidéo doit commencer à se jouer automatiquement dès qu'elle est prête.
controls	controls	Affiche les contrôles permettant à l'utilisateur de gérer la lecture vidéo, y compris le volume, la recherche et la pause/reprise.
height	pixels	Définit la hauteur du lecteur vidéo.
loop	loop	Indique que la vidéo doit redémarrer automatiquement à chaque fois qu'elle est terminée.
muted	muted	Indique que la vidéo doit être initialement coupée (muet).
poster	URL	Définit une image qui sera affichée pendant le téléchargement de la vidéo, ou jusqu'à ce que l'utilisateur clique sur le bouton de lecture.
preload	auto, metadata, none	Fournit une indication au navigateur concernant le contenu à charger avant la lecture de la vidéo : `<br>` auto : Le fichier vidéo entier peut être téléchargé. `<br>` metadata : Les métadonnées vidéo (ex. durée) sont récupérées. `<br>` none : La vidéo ne doit pas être préchargée. `<br>` Remarque : L'attribut est ignoré si autoplay est activé.
src	URL	Définit l'URL de la vidéo intégrée. L'élément `<source>` peut être utilisé à la place pour spécifier la vidéo à intégrer.
width	pixels	Définit la largeur du lecteur.

La balise <video> prend en charge les Attributs globaux et les Attributs d'événements.

Pratique

À quoi peut servir la balise HTML <video> ?

Intégrer des vidéos dans des documents HTMLIntégrer un lien hypertexte dans des documents HTMLPlacer un extrait audio dans un document HTMLPermettre de contrôler les vidéos, comme la lecture, la pause et le volumeInsérer des images dans le document HTML

Balise HTML <video> ​

Syntaxe ​

Exemple de la balise HTML <video> avec les attributs controls, muted et src : ​

Exemple de la balise HTML <video> avec l'attribut controls : ​