Docs HTML exécutables : Vidéo en HTML

Q: Comment ajouter une vidéo en HTML ?

Utilisez . L'attribut controls affiche le bouton de lecture, la barre de progression et le volume du navigateur. Sans lui, la vidéo montre sa première image (ou son poster) et l'utilisateur ne peut pas la lancer.

Q: Comment ajouter une miniature à une vidéo ?

Utilisez l'attribut poster avec l'URL d'une image : . L'image s'affiche jusqu'au début de la lecture.

Q: Comment ajouter des sous-titres à une vidéo HTML ?

Ajoutez un dans la vidéo. Le fichier utilise le format WebVTT, et le navigateur affiche un bouton de sous-titres dans ses contrôles.

Q: Comment rendre une vidéo responsive ?

Définissez width: 100% et height: auto en CSS (ou max-width: 100%). La vidéo suit la taille de son conteneur et garde ses proportions.

Comment ajouter une vidéo

Faites pointer l'élément <video> vers un fichier vidéo et ajoutez controls pour que le lecteur puisse la lancer :

<video src="movie.mp4" controls width="640"></video>

controls affiche le lecteur propre au navigateur : lecture et pause, barre de progression, volume et plein écran. Sans lui, la vidéo reste immobile. Cet aperçu ne peut pas charger de fichiers vidéo, donc les exemples de cette page alimentent l'élément avec une petite animation de canvas dessinée par un script ; les attributs fonctionnent exactement comme avec un fichier :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Video</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <video id="player" controls muted width="320" height="180"></video>
  <p>Press play.</p>
  <script>
    // Stand-in for a video file: an animation drawn on a canvas
    const canvas = document.createElement('canvas');
    canvas.width = 320; canvas.height = 180;
    const ctx = canvas.getContext('2d');
    let x = 0;
    (function draw() {
      ctx.fillStyle = '#111827'; ctx.fillRect(0, 0, 320, 180);
      ctx.fillStyle = '#f59e0b'; ctx.beginPath();
      ctx.arc(30 + (x % 260), 90, 24, 0, Math.PI * 2); ctx.fill();
      x += 2; requestAnimationFrame(draw);
    })();
    document.getElementById('player').srcObject = canvas.captureStream(30);
  </script>
</body>
</html>

Comme la source est un flux en direct plutôt qu'un fichier, la barre de progression ne peut pas être déplacée ici et il n'y a pas de durée fixe. Avec un vrai .mp4, le même lecteur a une barre de recherche complète.

Les attributs de video

Attribut	Rôle
`controls`	Affiche les contrôles du lecteur du navigateur
`autoplay`	Lance la lecture dès que possible (en pratique, seulement avec `muted`)
`muted`	Démarre avec le son coupé
`loop`	Recommence depuis le début à la fin
`playsinline`	Lit dans la page sur iPhone au lieu de passer en plein écran
`poster="thumb.jpg"`	Image affichée avant la lecture
`preload`	`none`, `metadata` (seulement la taille et la durée) ou `auto` (le navigateur décide de la quantité à télécharger)
`width`, `height`	Taille en pixels ; définir les deux réserve la place avant le chargement de la vidéo

Autoplay, muted et loop

Les navigateurs bloquent les vidéos qui démarrent seules avec du son. Une vidéo muette peut démarrer automatiquement, c'est ainsi que fonctionnent les vidéos d'arrière-plan et les courts clips en boucle :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Autoplay</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    .hero { position: relative; width: 320px; height: 180px; border-radius: 10px; overflow: hidden; }
    .hero video { width: 100%; height: 100%; object-fit: cover; }
    .hero h1 { position: absolute; inset: auto 0 0 0; margin: 0; padding: 10px; color: #fff; font-size: 20px; background: rgba(0, 0, 0, 0.45); }
  </style>
</head>
<body>
  <div class="hero">
    <video id="bg" autoplay muted loop playsinline></video>
    <h1>Background video</h1>
  </div>
  <p id="state"></p>
  <script>
    const canvas = document.createElement('canvas');
    canvas.width = 320; canvas.height = 180;
    const ctx = canvas.getContext('2d');
    let t = 0;
    (function draw() {
      ctx.fillStyle = 'hsl(' + (t % 360) + ', 70%, 45%)';
      ctx.fillRect(0, 0, 320, 180);
      t += 1; requestAnimationFrame(draw);
    })();
    const video = document.getElementById('bg');
    video.srcObject = canvas.captureStream(30);
    video.addEventListener('playing', () => {
      document.getElementById('state').textContent = 'Playing without a click, because it is muted.';
    });
  </script>
</body>
</html>

Les quatre attributs vont ensemble : autoplay pour démarrer, muted pour que le navigateur l'autorise, loop pour un clip, et playsinline pour que les iPhone ne l'ouvrent pas en plein écran. Une vidéo qui démarre seule avec du son n'est pas seulement bloquée, c'est aussi un problème pour les utilisateurs de lecteurs d'écran, dont la synthèse vocale est couverte. Si un clip dure plus de cinq secondes, donnez aux gens un moyen de le mettre en pause.

Image poster et preload

poster affiche une image avant la lecture de la vidéo, comme une miniature. Ici, la vidéo n'a aucune source, donc le poster est tout ce qu'on voit :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Poster</title>
</head>
<body style="font-family: system-ui, sans-serif;">
  <video controls width="320" height="180" preload="none"
    poster="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='180'%3E%3Crect width='320' height='180' fill='%232563eb'/%3E%3Ctext x='160' y='98' font-family='Arial' font-size='22' fill='white' text-anchor='middle'%3EEpisode 1: Intro%3C/text%3E%3C/svg%3E">
  </video>
</body>
</html>

Avec preload="none", le navigateur ne télécharge rien avant que le lecteur appuie sur lecture, et le poster évite que l'espace paraisse vide. Utilisez preload="metadata" quand vous voulez que la durée soit visible avant la lecture. Sans poster, la plupart des navigateurs affichent la première image une fois chargée.

Formats et replis avec source

Au lieu de src, vous pouvez lister plusieurs fichiers avec des éléments <source>. Le navigateur lit le premier qu'il prend en charge :

<video controls width="640" poster="thumb.jpg">
  <source src="movie.webm" type="video/webm">
  <source src="movie.mp4" type="video/mp4">
  <track kind="captions" src="captions.vtt" srclang="en" label="English">
  <p>Your browser cannot play this video. <a href="movie.mp4">Download it</a>.</p>
</video>

Le MP4 avec une vidéo H.264 se lit dans tous les navigateurs actuels, c'est donc le choix sûr quand vous n'avez qu'un fichier. L'attribut type permet au navigateur d'ignorer les formats qu'il ne sait pas lire sans les télécharger. Le texte à la fin ne s'affiche que dans les navigateurs qui ne prennent pas du tout en charge <video>.

Sous-titres avec track

<track kind="captions"> charge un fichier WebVTT, un simple fichier texte de lignes minutées. Le navigateur ajoute un bouton de sous-titres à ses contrôles et dessine le texte sur la vidéo :

WEBVTT

00:00:00.000 --> 00:00:03.000
Welcome to the course.

00:00:03.000 --> 00:00:06.500
Today we build our first web page.

Les sous-titres aident les spectateurs sourds et malentendants, les personnes qui regardent sans le son et tous ceux qui suivent une vidéo dans une seconde langue. Ajoutez default à une piste pour l'afficher sans clic. Un fichier de sous-titres venant d'un autre domaine a besoin d'en-têtes CORS et de crossorigin sur la vidéo.

La styliser et la contrôler en JavaScript

Une vidéo est un élément remplacé, comme une image : width: 100% avec height: auto la rend responsive, et object-fit décide comment elle remplit une boîte d'une autre forme. Le JavaScript dispose de play(), pause(), currentTime, volume et d'événements comme play, pause et ended :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Custom controls</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 12px; }
    video { width: 100%; max-width: 360px; height: auto; border-radius: 10px; display: block; }
    button { font: inherit; margin-top: 8px; padding: 6px 14px; }
  </style>
</head>
<body>
  <video id="v" muted width="320" height="180"></video>
  <button id="toggle">Play</button>
  <span id="status">Paused</span>
  <script>
    const canvas = document.createElement('canvas');
    canvas.width = 320; canvas.height = 180;
    const ctx = canvas.getContext('2d');
    let a = 0;
    (function draw() {
      ctx.fillStyle = '#e5e7eb'; ctx.fillRect(0, 0, 320, 180);
      ctx.fillStyle = '#16a34a'; ctx.beginPath();
      ctx.arc(160 + Math.cos(a) * 60, 90 + Math.sin(a) * 60, 16, 0, Math.PI * 2); ctx.fill();
      a += 0.05; requestAnimationFrame(draw);
    })();
    const video = document.getElementById('v');
    const button = document.getElementById('toggle');
    const status = document.getElementById('status');
    video.srcObject = canvas.captureStream(30);
    button.onclick = () => (video.paused ? video.play() : video.pause());
    video.addEventListener('play', () => { button.textContent = 'Pause'; status.textContent = 'Playing'; });
    video.addEventListener('pause', () => { button.textContent = 'Play'; status.textContent = 'Paused'; });
  </script>
</body>
</html>

play() renvoie une promesse rejetée quand le navigateur bloque la lecture (par exemple, un autoplay non muet), donc le code de production doit la catch. Construire vos propres contrôles est facultatif ; les controls intégrés sont accessibles au clavier et traduits, ce que des boutons personnalisés doivent reproduire. Pour les vidéos hébergées sur YouTube ou Vimeo, vous intégrez plutôt leur lecteur avec une iframe.

Erreurs fréquentes

Autoplay sans muted. Le navigateur le bloque. Ajoutez muted et playsinline.
Oublier controls. À moins de construire les vôtres, le lecteur n'a aucun moyen de lancer la vidéo.
Pas de width ni de height. La page saute au chargement de la vidéo. Définissez les deux, puis adaptez la taille en CSS.
Des fichiers énormes. Compressez les vidéos pour le web et utilisez preload="none" ou "metadata" pour les vidéos plus bas dans la page.
Pas de sous-titres sur des vidéos parlées. Ajoutez un <track kind="captions">.

Questions fréquentes

Comment ajouter une vidéo en HTML ?

Utilisez <video src="movie.mp4" controls width="640"></video>. L'attribut controls affiche le bouton de lecture, la barre de progression et le volume du navigateur. Sans lui, la vidéo montre sa première image (ou son poster) et l'utilisateur ne peut pas la lancer.

Pourquoi l'autoplay ne fonctionne pas sur ma vidéo ?

Les navigateurs bloquent la lecture automatique avec le son. Ajoutez muted à côté de autoplay, et playsinline pour que les iPhone la lisent dans la page plutôt qu'en plein écran : <video autoplay muted loop playsinline>.

Quel format vidéo utiliser pour le web ?

Le MP4 avec une vidéo H.264 se lit dans tous les navigateurs actuels, c'est donc le choix par défaut le plus sûr. Vous pouvez lister d'abord un fichier WebM plus léger avec <source> et laisser le navigateur choisir le premier format qu'il prend en charge.

Comment ajouter une miniature à une vidéo ?

Utilisez l'attribut poster avec l'URL d'une image : <video poster="thumb.jpg" controls>. L'image s'affiche jusqu'au début de la lecture.

Comment ajouter des sous-titres à une vidéo HTML ?

Ajoutez un <track kind="captions" src="captions.vtt" srclang="en" label="English"> dans la vidéo. Le fichier utilise le format WebVTT, et le navigateur affiche un bouton de sous-titres dans ses contrôles.

Comment rendre une vidéo responsive ?

Définissez width: 100% et height: auto en CSS (ou max-width: 100%). La vidéo suit la taille de son conteneur et garde ses proportions.

Concepts liés