<video> : l'élément d'intégration vidéo

Exemple interactif

<video controls width="250">
  <source src="/shared-assets/videos/flower.webm" type="video/webm" />

  <source src="/shared-assets/videos/flower.mp4" type="video/mp4" />

  Télécharger la vidéo
  <a href="/shared-assets/videos/flower.webm">WEBM</a>
  ou
  <a href="/shared-assets/videos/flower.mp4">MP4</a>
  .
</video>

L'exemple précédent illustre comment utiliser l'élément <video> simplement, à la façon d'un élément <img>. Le chemin vers le média à afficher est fourni via l'attribut src et on peut inclure d'autres attributs afin de spécifier la largeur et la hauteur, la lecture automatique et/ou en boucle, les contrôles affichés, etc.

Le contenu fourni entre les balises <video></video> est affiché comme contenu alternatif par les navigateurs qui ne prennent pas en charge l'élément.

Attributs

À l'instar des autres éléments HTML, cet élément inclut les attributs universels.

autoplay

Un attribut booléen qui indique que la vidéo doit automatiquement être lancée dès qu'elle peut être jouée sans être arrêtée par le chargement des données.

Note : Les navigateurs modernes bloquent l'audio (ou les vidéos avec une piste audio non assurée) de la lecture automatique, car les sites qui jouent automatiquement l'audio peuvent être une expérience désagréable pour les utilisateurs et les utilisatrices. Consultez notre Guide sur la lecture automatique pour plus d'informations sur la façon d'utiliser correctement cette dernière.

Pour désactiver la vidéo automatique, autoplay="false" ne fonctionnera pas ; La vidéo sera automatiquement lue si l'attribut est présent dans le tag <video>. Pour supprimer la lecture automatique, l'attribut doit être complètement supprimé.

controls

Si cet attribut est présent, le navigateur affichera des contrôles pour permettre à l'utilisateur de contrôler la lecture de la vidéo, le volume et la mise sur pause.

controlslist

L'attribut controlslist, lorsqu'il est indiqué, aide le navigateur à choisir les contrôles à afficher pour la manipulation du média lorsque l'attribut controls est utilisé.

Les valeurs autorisées pour cet attribut sont nodownload, nofullscreen et noremoteplayback.

On utilisera l'attribut disablePictureInPicture afin de désactiver ce mode et les contrôles associés.

crossorigin

Cet attribut à valeur contrainte permet d'indiquer si le CORS doit être utilisé pour récupérer la vidéo. Les ressources avec le CORS activé peuvent être réutilisées dans un élément <canvas> sans le corrompre. Les valeurs autorisées sont :

• anonymous : une requête cross-origine est envoyée sans information d'authentification. Autrement dit, un en-tête HTTP Origin: est envoyé, sans cookie, certificat X.509 ou sans authentification HTTP simple. Si le serveur ne fournit pas d'informations d'authentification au site d'origine (c'est-à-dire en n'envoyant pas l'en-tête HTTP Access-Control-Allow-Origin:, la vidéo sera corrompue et son utilisation sera restreinte.
• use-credentials : une requête cross-origine est envoyée avec une information d'authentification. Autrement dit, un en-tête HTTP Origin: est envoyé, avec un cookie, une certification ou une authentification HTTP simple. Si le serveur ne fournit pas d'informations d'authentification au site d'origine (c'est-à-dire en n'envoyant pas l'en-tête HTTP Access-Control-Allow-Credentials:, la vidéo sera corrompue et son utilisation sera restreinte.

Lorsque cet attribut n'est pas présent, la ressource est récupérée sans requête CORS (l'en-tête HTTP Origin: n'est pas envoyé) et elle ne peut pas être utilisée dans un élément <canvas>. Si la valeur est invalide, elle sera gérée comme si le mot-clé anonymous était utilisé. Pour plus d'informations, consulter l'article sur les attributs de paramétrage du CORS.

disablepictureinpicture

Empêche le navigateur de suggérer un menu contextuel pour la superposition d'une image/vidéo ("Picture-in-picture") ou de demander l'activation automatique pour la superposition du média.

disableremoteplayback

Un attribut booléen utilisé pour désactiver la capacité de lecture à distance dans les appareils qui sont attachés à l'aide de technologies câblées (HDMI, DVI, etc.) et sans fil (Miracast, Chromecast, DLNA, AirPlay, etc.).

Sur Safari, vous pouvez utiliser x-webkit-airplay="deny" ^(angl.) comme solution.

height

La hauteur de la zone où afficher la vidéo, exprimée en pixels CSS ^(angl.) (en valeur absolue uniquement ; pas de pourcentages ^(angl.)).

loop

Un attribut booléen, qui, lorsqu'il est présent, indique que la vidéo doit être jouée en boucle.

muted

Un attribut booléen qui indique s'il faut couper le son contenu dans la vidéo. Si cet attribut est utilisé, le son sera coupé au lancement de la vidéo. Sa valeur par défaut est false, ce qui signifie que l'audio sera lu lorsque la vidéo sera lue.

playsinline

Un attribut booléen qui indique que la vidéo doit être jouée en incise, c'est-à-dire au sein de la zone de lecture de l'élément. À noter : l'absence de cet attribut n'implique pas que la vidéo sera lancée en plein écran.

poster

Une URL qui contient une vignette à afficher tant que la vidéo est en cours de téléchargement. Si cet attribut n'est pas utilisé, rien n'est affiché jusqu'à ce que la première image de la vidéo soit disponible, ensuite, c'est cette image qui est affichée comme vignette sur la vidéo.

preload

Cet attribut à valeur contrainte est une indication destinée au navigateur sur la meilleure façon de charger la vidéo (selon l'auteur de la page). Il peut prendre l'une des valeurs suivantes :

• none : la vidéo ne doit pas être préchargée.
• metadata : seules les métadonnées de la vidéo (sa durée par exemple) sont récupérées.
• auto : le fichier entier peut être téléchargé, même si l'utilisateur ne s'en sert pas.
• la chaîne de caractères vide ("") : synonyme de la valeur auto.

La valeur par défaut peut être différente selon le navigateur. La spécification conseille d'utiliser la valeur metadata.

Note :

• L'attribut autoplay a la priorité sur preload. Si autoplay est défini, le navigateur doit nécessairement télécharger la vidéo pour la lancer.
• Cet attribut est simplement une indication, la spécification ne force pas le navigateur à respecter la valeur de cet attribut.

src

L'URL de la vidéo à intégrer. Cet attribut est optionnel, l'élément <source> peut également être utilisé dans l'élément <video> afin d'indiquer la vidéo à intégrer.

width

La largeur de la zone où afficher la vidéo, exprimée en pixels CSS ^(angl.) (en valeur absolue uniquement ; pas de pourcentages ^(angl.)).

Évènements

Notes d'utilisation

Les navigateurs ne prennent pas en charge l'ensemble des formats vidéo  vous pouvez fournir plusieurs sources grâce à des éléments <source>, le navigateur utilisera la première ressource dont il connaît le format :

<video controls>
  <source src="maVideo.mp4" type="video/mp4" />
  <source src="maVideo.webm" type="video/webm" />
  <p>
    Votre navigateur ne prend pas en charge les vidéos HTML5. Voici
    <a href="myVideo.mp4">un lien pour télécharger la vidéo</a>.
  </p>
</video>

Lorsque vous utilisez des éléments <source>, le navigateur tente de charger chaque source séquentiellement. Si une source échoue (par exemple, en raison d'une URL non valide ou d'un format non pris en charge), la source suivante est tentée, etc. Un événement error se déclenche sur l'élément <video> après que toutes les sources ont échoué ; Les événements error ne sont pas déclenchés sur chaque élément individuel <source>.

Nous proposons un Guide des types de fichiers médias substantiel et approfondi et le Guide des codecs pris en charge pour la vidéo. Il y a également un guide disponible pour les codecs audio qui peuvent être utilisés avec eux.

Quelques notes d'utilisation :

• Si l'attribut controls n'est pas indiqué, la vidéo n'incluera pas les contrôles par défaut du navigateur et il est nécessaire de fournir ses propres contrôles en utilisant JavaScript et l'API HTMLMediaElement. Voir l'article créer un lecteur vidéo multi-navigateurs pour plus de détails.
• L'API HTMLMediaElement déclenche de nombreux évènements qui permettent d'avoir un contrôle précis sur l'audio et la vidéo.
• La propriété object-position permet d'ajuster la position de la vidéo dans le cadre du lecteur et la propriété object-fit permet de contrôler l'ajustement de la taille de la vidéo dans le cadre.
• Afin de fournir des sous-titres et légendes à la vidéo, on peut utiliser du code JavaScript ainsi que des éléments <track> au format WebVTT. Voir l'article Ajouter des sous-titres et légendes à une vidéo HTML5 pour plus d'informations.
• Vous pouvez lire des fichiers audio à l'aide d'un élément <video>. Cela peut être utile si, par exemple, vous devez effectuer un audio avec une transcription WebVTT, puisque l'élément <audio> n'autorise pas les transcriptions à l'aide de WebVTT.
• Pour tester le contenu similaire sur les navigateurs qui prennent en charge l'élément, vous pouvez remplacer <video> par un élément inexistant comme <notavideo> (pas une vidéo, en français).

Pour apprendre les bases concernant <video>, nous vous conseillons de consulter le tutoriel sur le contenu audio et video.

Mise en forme avec CSS

L'élément <video> est un élément remplacé et, pour cet élément, la valeur initiale de display est inline mais la hauteur et la largeur du cadre sont définies par les caractéristiques de la vidéo embarquée.

On peut changer la valeur de display en block afin de simplifier le positionnement et le dimensionnement. L'article Bases de la mise en forme d'un lecteur vidéo fournit différentes techniques de mise en forme.

Ajouter des sous-titres et d'autres pistes de texte synchronisées

Les pistes de texte synchronisées pour les sous-titres, les sous-titres codés, les titres de chapitres, etc. peuvent être ajoutées de manière déclarative en imbriquant l'élément <track>. Les pistes sont spécifiées dans le Format de fichier de pistes de texte pour vidéos Web (WebVTT) (fichier .vtt).

Par exemple, le code HTML ci-dessous inclut le fichier « captions.vtt », qui sera utilisé pour superposer des sous-titres codés sur la vidéo si l'utilisateur active cette fonctionnalité.

<video controls src="video.webm">
  <track default kind="captions" src="captions.vtt" />
</video>

Les pistes de texte synchronisées peuvent également être ajoutées par programmation à l'aide de l'API WebVTT.

Détecter l'ajout et la suppression de pistes

Il est possible de détecter l'ajout et la suppression de pistes d'un élément <video> grâce aux évènements addtrack et removetrack. Toutefois, ces évènements ne sont pas déclenchés à même l'élément <video> mais sur l'objet représentant la liste des pistes associées à l'élément <video> grâce à l'objet HTMLMediaElement qui possède un type différent selon le type de piste manipulé :

HTMLMediaElement.audioTracks

Un objet AudioTrackList qui contient l'ensemble des pistes audio associées au média. Il est possible d'ajouter un écouteur sur l'évènement addtrack sur cet objet afin d'être alerté lorsque de nouvelles pistes audio sont ajoutées à l'élément.

HTMLMediaElement.videoTracks

On peut ajouter un écouteur d'évènement addtrack à cet objet VideoTrackList afin d'être alerté lorsque des pistes vidéos sont ajoutées à l'élément.

HTMLMediaElement.textTracks

On peut ajouter un écouteur d'évènement addtrack à cet objet TextTrackList afin d'être alerté lorsque des pistes textuelles sont ajoutées à l'élément.

Le fragment de code qui suit, par exemple, permettra d'appeler une fonction donnée lorsque des pistes audio sont ajoutées ou supprimées d'un élément <video> :

const elem = document.querySelector("video");

elem.audioTracks.onaddtrack = (event) => {
  trackEditor.addTrack(event.track);
};

elem.audioTracks.onremovetrack = (event) => {
  trackEditor.removeTrack(event.track);
};

On peut aussi utiliser la méthode addEventListener() pour gérer les évènements addtrack et removetrack.

Utilisation côté serveur

Si le type MIME de la vidéo n'est pas indiqué correctement sur le serveur, la vidéo peut ne pas s'afficher, le navigateur peut afficher une boîte grise avec une croix si JavaScript est activé.

Si vous utilisez Apache Web Server pour les vidéos WebM, le problème peut également être réglé en modifiant le fichier mime.types situé dans /etc/apache ou en ajoutant une directive AddType au fichier httpd.conf.

AddType video/webm .webm

Votre hébergeur Web peut fournir une interface facile aux modifications de configuration de type MIME pour les nouvelles technologies jusqu'à ce qu'une mise à jour globale se produise naturellement.

Accessibilité

Les vidéos doivent fournir des sous-titres et retranscription qui décrivent précisément le contenu. Les sous-titres doivent permettre au visiteur malentendant de comprendre le contenu audio lorsque la vidéo est lancée. Les retranscriptions sont utilisées par les personnes qui souhaitent relire le contenu audio à un rythme différent.

Si on utilise un service de sous-titrage automatique est utilisé, il est nécessaire de vérifier que le contenu généré correspond bien au contenu audio de la vidéo.

En plus des dialogues, les sous-titres et retranscription doivent également inclure les informations permettant d'identifier la musique et les effets sonores qui communiquent des informations importantes (l'émotion et le ton entre autres) :

14
00:03:14 --> 00:03:18
[Musique rock théâtrale]

15
00:03:19 --> 00:03:21
[Murmure] Qu'est-ce que c'est au loin ?

16
00:03:22 --> 00:03:24
C'est… C'est un…

16 00:03:25 --> 00:03:32
[Bruit de choc]
[La vaisselle se brise]

Les sous-titres ne doivent pas masquer le sujet principal de la vidéo. Ils peuvent être positionnés grâce à l'indication align.

• API Web Video Text Tracks Format (WebVTT)
• WebAIM : Captions, Transcripts, and Audio Descriptions ^(angl.)
• Comprendre les règles WCAG 1.2 ^(angl.)
• Understanding Success Criterion 1.2.1 - W3C Understanding WCAG 2.0 ^(angl.)
• Understanding Success Criterion 1.2.2 - W3C Understanding WCAG 2.0 ^(angl.)

Exemples

Source unique

Cet exemple lit une vidéo lorsqu'il est activé, fournissant à l'utilisateur les commandes vidéo par défaut du navigateur pour contrôler la lecture.

HTML

<!-- Exemple vidéo de base -->
<!-- « Big Buck Bunny » sous licence CC 3.0 par la fondation Blender. Hébergé par archive.org -->
<!-- Affiche provenant de peach.blender.org -->
<video
  controls
  src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"
  poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"
  width="620">
  Désolé, votre navigateur ne prend pas en charge les vidéos intégrées, mais ne
  vous inquiétez pas, vous pouvez
  <a href="https://archive.org/details/BigBuckBunny_124">la télécharger</a>
  et la regarder avec votre lecteur vidéo préféré !
</video>

Résultat

Jusqu'à ce que la vidéo commence à être lue, l'image fournie dans l'attribut poster s'affiche à sa place. Si le navigateur ne prend pas en charge la lecture vidéo, il affiche le texte de remplacement.

Sources multiples

Cet exemple s'appuie sur le précédent et fournit trois sources différentes pour le média. Cela permet de visionner la vidéo quel que soit le codec vidéo pris en charge par le navigateur.

HTML

<!-- Utilisation de plusieurs sources comme solutions de secours pour une balise vidéo -->
<!-- « Elephants Dream » par Orange Open Movie Project Studio, sous licence CC-3.0, hébergé par archive.org -->
<!-- Affiche hébergée par Wikimedia -->
<video
  width="620"
  controls
  poster="https://upload.wikimedia.org/wikipedia/commons/e/e8/Elephants_Dream_s5_both.jpg">
  <source
    src="https://archive.org/download/ElephantsDream/ed_hd.avi"
    type="video/avi" />
  <source
    src="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4"
    type="video/mp4" />

  Désolé, votre navigateur ne prend pas en charge les vidéos intégrées, mais ne
  vous inquiétez pas, vous pouvez
  <a
    href="https://archive.org/download/ElephantsDream/ed_1024_512kb.mp4"
    download="ed_1024_512kb.mp4">
    la télécharger en MP4
  </a>
  et la regarder avec votre lecteur vidéo préféré !
</video>

Résultat

Le format AVI est essayé en premier. S'il ne peut pas être lu, le format MP4 est essayé. Un message de retour s'affiche si l'élément vidéo n'est pas pris en charge, mais pas si toutes les sources échouent.

Certains types de fichiers médias vous permettent de fournir des informations plus spécifiques à l'aide du paramètre codecs dans la chaîne de caractères de type de fichier. Par exemple, video/webm; codecs="vp8, vorbis" indique que le fichier est un fichier WebM utilisant VP8 pour la vidéo et Vorbis pour l'audio.

Résumé technique

Spécifications

Compatibilité des navigateurs

Voir aussi

• Guide des types et formats de médias : contenu image, audio et vidéo

  • Formats de conteneurs médias (types de fichiers)
  • Guide des codecs vidéo du Web
  • Guide des codecs audio du Web

• Les propriétés CSS permettant de positionner/redimensionner le contenu : object-position et object-fit

• L'élément <audio>

• Utiliser les éléments <audio> et <video>

• Manipuler l'élément <video> avec <canvas>

• Configuration côté serveur pour les médias Ogg