<video>
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
L'élément HTML <video>
intègre un contenu vidéo dans un document.
Exemple interactif
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'APIHTMLMediaElement
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.
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 : 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 attributmute
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'attributcontrols
est utilisé.Les valeurs autorisées pour cet attribut sont
nodownload
,nofullscreen
etnoremoteplayback
.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 HTTPOrigin
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 HTTPAccess-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 HTTPHeader
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 HTTPAccess-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 valeurauto
.
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é surpreload
. Siautoplay
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).
Évènements
Nom | Condition de déclenchement |
---|---|
audioprocess
Obsolète
|
La mémoire tampon en entrée d'un ScriptProcessorNode peut désormais être traité. |
canplay |
Le navigateur peut lire le média mais estime que trop peu de données ont été chargées pour lire le média jusqu'à sa fin (il faudra vraisemblablement un arrêt pour un chargement en mémoire tampon). |
canplaythrough |
Le navigateur estime qu'il peut lire le média jusqu'à sa fin, sans avoir à interrompre la lecture par du chargement en mémoire tampon. |
complete |
Le rendu d'un OfflineAudioContext est terminé. |
durationchange |
L'attribut duration a été mis à jour. |
emptied |
Le média est devenu vide. Cela peut par exemple se produire lorsque le média a déjà été (partiellement ou complètement) chargé et que la méthode load() est invoquée pour le recharger. |
ended |
La lecture a été interrompue car la fin du média est atteinte. |
loadeddata |
La première frame du média a été chargée. |
loadedmetadata |
Les métadonnées ont été chargées. |
pause |
La lecture a été mise en pause. |
play |
La lecture a démarré. |
playing |
La lecture est prête à être lancée après avoir été mise en pause ou interrompue pour un chargement en mémoire de données. |
progress |
Évènement déclenché périodiquement lorsque le navigateur charge une ressource. |
ratechange |
La vitesse de lecture a changé. |
seeked |
Une opération de déplacement du curseur de lecture (seek) est terminée. |
seeking |
L'agent utilisateur tente de récupérer les données associées au média mais les données ne parviennent pas. |
stalled |
L'agent utilisateur tente de récupérer les données associées au média mais les données ne parviennent pas. |
suspend |
Le chargement des données du média ont été suspendues. |
timeupdate |
Le temps décrit par l'attribut currentTime a été mis à jour. |
volumechange |
Le volume a été modifié. |
waiting |
La lecture a été interrompue en raison d'un manque temporaire de données. |
Notes d'utilisation
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.
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ènementaddtrack
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 objetVideoTrackList
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 objetTextTrackList
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
.
Exemples
Exemples simples
<!-- 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.
Utiliser plusieurs sources
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>
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 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
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
.
- 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)
Résumé technique
Catégories de contenu |
Contenu de flux,
contenu phrasé,
contenu intégré. Si l'élément a un attribut
controls :
contenu interactif,
contenu tangible.
|
---|---|
Contenu autorisé |
Si l'élément a un attribut
Sinon, zéro ou plusieurs éléments |
Omission de balises | |
Parents autorisés | Tout élément qui accepte du contenu intégré. |
Rôles ARIA autorisés | application |
Interface DOM | HTMLVideoElement |
Spécifications
Specification |
---|
HTML Standard # the-video-element |
Compatibilité des navigateurs
BCD tables only load in the browser
Voir aussi
- Les formats pris en charge par
<audio>
et<video>
<audio>
- Les propriétés CSS permettant de positionner/redimensionner le contenu :
object-position
andobject-fit
- Utiliser les éléments
<audio>
et<video>
- Manipuler l'élément
<video>
avec<canvas>
- Configuration côté serveur pour les média Ogg