Rôle

La balise <video> permet d’intégrer une vidéo dans le document.

La vidéo s’affiche, par défaut, avec des boutons de contrôle (pause, play, volume..). Vous pouvez, avec le Javascript, personnaliser ces boutons en créant votre propre contrôleur vidéo.

Actuellement, il existe 3 formats vidéo pris en charge pour l’élément <video> qui ne sont pas compatibles avec tous les navigateurs

MP4 (type mine : video/mp4) :

Note : Internet Explorer 8 et les versions antérieures, ne prennent pas en charge la balise <video>

WebM (type mine : video/webm) :

Ogg (type mine : video/ogg) :

Testez vous-même cette balise

Utilisez Codepen.

Voici le resultat

Compatibilité

Internet Explorer 8 et les versions antérieures, ne prennent pas en charge la balise <video>

Attributs spécifiques

autoplay

Spécifie si la lecture se fait automatiquement au chargement

controls

Lorsqu’il est présent, il précise que les contrôles vidéo doivent être affichés ( pause- cherche- volume- basculer en plein écran- légendes / sous-titres, si disponible- piste, si disponible)

height

Spécifie la hauteur de la vidéo

loop

Indique si la lecture doit se faire en boucle

muted

Permet de désactiver le son de la vidéo

poster

Spécifie une image à afficher lorsque la vidéo se télécharge, ou jusqu’à ce que l’utilisateur appuie sur le bouton de lecture. Si ce n’est pas inclus, la première image de la vidéo sera utilisée à la place

preload

Spécifie comment la vidéo doit être chargée au chargement de la page (ne fonctionne pas sous Internet Explorer ou si l’attribut autoplay est activé). L’attribut preload peut prendre trois valeurs : none – metadata – auto

src

Spécifie la source de la vidéo

width

Spécifie la largeur de la vidéo

La balise <area> prend aussi en charge les attributs globaux

Voir les autres balises d’intégration

area– audio– canvas– embed– figcaption– figure– iframe– img– map– object– param– source – track