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

Les navigateurs ne prennent pas en charge l'ensemble des formats vidéo et il est possible de 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>

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 navigateurs et il est nécessaire de fournir ses propres contrôles en utilisant JavaScript et l'API HTMLMediaElement API. 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.

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

À 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 : La lecture automatique peut être source de nuisance pour les utilisateurs. Mieux vaut l'éviter lorsque c'est possible ou proposer à l'utilisateur de choisir cette option. Cette valeur peut être utile lors de la création de vidéos dont la source sera définie a posteriori.

Note : Cet attribut est un attribut booléen et indiquer autoplay="false" ne suffira pas à retirer la lecture automatique. Pour ce faire, il faut complètement retirer l'attribut.

Note : Pour certains navigateurs (ex. Chrome 70), l'attribut autoplay ne fonctionne pas si aucun attribut mute n'est présent.

buffered

Un attribut qui peut être lu afin de déterminer l'intervalle temporel mis en mémoire tampon. Cet attribut contient un objet TimeRanges.

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 Expérimental

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 Header 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-Origin), 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.

height

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

intrinsicsize Expérimental

Cet attribut indique au navigateur d'ignorer la taille intrinsèque de la vidéo et de la dimensionner avec la taille définie par cet attribut. La vidéo aura les dimensions indiquées et le rapport naturalWidth/naturalHeight renverra les valeurs fournies par cet attribut. Explications, exemples

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. Par défaut, quand l'attribut est absent, le son sera utilisé lors de la lecture de la vidéo.

disablePictureInPicture Expérimental

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.

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.

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.

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.

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 (en valeur absolue uniquement).

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.

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

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

elem.audioTrackList.onaddtrack = function (event) {
  trackEditor.addTrack(event.track);
};

elem.audioTrackList.onremovetrack = function (event) {
  trackEditor.removeTrack(event.track);
};

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

<!-- Un exemple simple -->
<video src="fichiervideo.webm" autoplay poster="vignette.jpg">
  Votre navigateur ne permet pas de lire les vidéos. Mais vous pouvez toujours
  <a href="fichiervideo.webm">la télécharger</a> !
</video>

<!-- Une vidéo avec des sous-titres -->
<video src="toto.webm">
  <track kind="subtitles" src="toto.en.vtt" srclang="en" label="Anglais" />
  <track kind="subtitles" src="toto.sv.vtt" srclang="sv" label="Suédois" />
</video>

Dans le premier exemple, la vidéo est lancée dès que possible. Avant que la vidéo ne soit lancée, la vignette utilisée sera le fichier "vignette.jpg".

Dans le deuxième exemple, l'utilisateur peut choisir parmi deux pistes de sous-titres.

Dans cet exemple, trois sources différentes pour la vidéo sont fournies. La première source utilisée est WebM, si son format n'est pas lisible pour le navigateur, c'est le fichier MP4 qui sera utilisé et si celui-ci n'est pas lisible non plus, ce sera le fichier OGG qui sera exploité.

<video
  width="480"
  controls
  poster="https://archive.org/download/WebmVp8Vorbis/webmvp8.gif">
  <source
    src="https://archive.org/download/WebmVp8Vorbis/webmvp8.webm"
    type="video/webm" />
  <source
    src="https://archive.org/download/WebmVp8Vorbis/webmvp8_512kb.mp4"
    type="video/mp4" />
  <source
    src="https://archive.org/download/WebmVp8Vorbis/webmvp8.ogv"
    type="video/ogg" />
  Votre navigateur ne permet pas de lire les vidéos HTML5.
</video>

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 un boîte grise avec une croix si JavaScript est activé.

Si vous utilisez Apache pour servir des vidéos Ogg Theora, vous pouvez ajouter les extensions utilisées pour les fichiers en face du type MIME. Pour cela, il faut éditer le fichier de configuration mime.types (situé dans le dossier /etc/apache ) ou utiliser la directive de configuration AddType dans le fichier httpd.conf.

AddType video/ogg .ogm
AddType video/ogg .ogv
AddType video/ogg .ogg

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

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.

• Sous-titres et légendes - Plugins
• API Web Video Text Tracks Format (WebVTT)
• WebAIM : Captions, Transcripts, and Audio Descriptions (en anglais)
• Comprendre les règles WCAG 1.2
• Understanding Success Criterion 1.2.1 - W3C Understanding WCAG 2.0 (en anglais)
• Understanding Success Criterion 1.2.2 - W3C Understanding WCAG 2.0 (en anglais)

• Les formats pris en charge par <audio> et <video>
• <audio>
• Les propriétés CSS permettant de positionner/redimensionner le contenu : object-position and object-fit
• Utiliser les éléments <audio> et <video>
• Manipuler l'élément <video> avec <canvas>
• Configuration côté serveur pour les média Ogg