HTML video : commandes, lecture automatique, taille responsive et dépannage

HTML video intègre un lecteur vidéo dans une page web. Définissez l’URL du fichier avec src ou les éléments enfants source, et ajoutez controls afin que les utilisateurs puissent le lire et le mettre en pause. Les politiques des navigateurs peuvent bloquer la lecture automatique même lorsque l’attribut autoplay est présent.

Choisissez les attributs pour l’expérience de lecture

controls, muted, autoplay et loop sont des attributs booléens. Leur présence les active, donc autoplay="false" ne désactive pas la lecture automatique. Supprimez l'attribut pour la désactiver. Une demande de lecture automatique nécessite le chargement des médias, donc preload="none" seul ne peut pas empêcher le téléchargement.

Exécuter un exemple vidéo complet

Enregistrez ce code sous video.html et ouvrez-le dans un navigateur. Il charge l'échantillon de fleurs public utilisé dans la documentation MDN et nécessite une connexion Internet. Pour votre propre service, hébergez une vidéo que vous avez le droit d'utiliser et remplacez les URL.

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Lecture vidéo HTML</title>
  <style>
    body { margin: 24px; font-family: sans-serif; }
    video { display: block; width: 640px; max-width: 100%; height: auto; }
  </style>
</head>
<body>
  <h1>Vidéo de fleurs</h1>
  <video id="flower" controls playsinline preload="metadata" aria-label="Fleurs se balançant dans le vent">
    <source src="https://developer.mozilla.org/shared-assets/videos/flower.webm" type="video/webm">
    <source src="https://developer.mozilla.org/shared-assets/videos/flower.mp4" type="video/mp4">
    Ce navigateur ne prend pas en charge l’élément video.
  </video>
  <p>Description : les fleurs et l’herbe voisine se balancent dans le vent.</p>
  <p><a href="https://developer.mozilla.org/shared-assets/videos/flower.mp4"
    target="_blank" rel="noopener noreferrer">Ouvrir le fichier vidéo MP4</a></p>
</body>
</html>

1. Vérifiez qu'il y a un lecteur avec un bouton de lecture et démarrez-le. Les fleurs devraient se déplacer et la position de lecture devrait avancer. L'exemple par défaut n'a pas d'attribut autoplay ou loop.
2. Mettez la lecture en pause pour arrêter le mouvement. Sur une fenêtre étroite, le lecteur devrait se réduire à la largeur du contenu.
3. Pour comparer la répétition, ajoutez uniquement loop à la balise vidéo d'ouverture et rouvrez le fichier. Vérifiez que la lecture revient au début après avoir atteint la fin, puis supprimez l'attribut pour restaurer le comportement original.

source propose des formats de fichiers afin que le navigateur puisse choisir un candidat pris en charge. Préparez de vrais fichiers WebM et MP4 de la même vidéo ; changer l'extension d'un fichier ne convertit pas les formats. La lecture dépend également des codecs utilisés pour la vidéo et l'audio à l'intérieur d'un conteneur tel que MP4.

Lecture automatique et dimensionnement sur mobile

Si vous avez besoin de lecture automatique, comparez en ajoutant autoplay muted à la balise vidéo d'ouverture. Conservez playsinline et les contrôles. Les préférences de l'utilisateur, les politiques d'économie d'énergie, l'historique d'interaction sur le site ou d'autres règles du navigateur peuvent refuser la lecture automatique, donc gardez un bouton de lecture.

Le CSS width: 640px est la largeur d'affichage souhaitée, tandis que max-width: 100% limite le débordement dans un parent étroit. height: auto préserve le rapport d'aspect de la vidéo. Si vous définissez un cadre à ratio fixe, object-fit: contain préserve toute la scène, tandis que cover remplit le cadre en rognant certains bords ; vérifiez que le contenu important reste visible.

Dépannez la lecture et vérifiez l'accessibilité

• URL du fichier : Ouvrez le lien vidéo directement et confirmez que le fichier existe et est disponible sans connexion. Vérifiez qu’un chemin local n’a pas été confondu avec un chemin serveur, et que la capitalisation du nom de fichier correspond.
• Format et réponse : Vérifiez que le serveur envoie le type MIME video/mp4 ou video/webm correct et utilise des codecs pris en charge. Le panneau Réseau dans les outils de développement aide à inspecter les requêtes échouées et les en-têtes de réponse.
• Lecture automatique : Si appuyer sur Lecture fonctionne, distinguez une restriction de lecture automatique d’un fichier corrompu.
• Conseils de repli : Le texte à l'intérieur de la vidéo est destiné aux navigateurs qui ne prennent pas en charge l'élément. Dans les navigateurs modernes, un échec de chargement n'affiche pas automatiquement ce texte comme un message d'erreur. L'exemple met donc également un lien vers le fichier et une description de la scène en dehors du lecteur.
• Fournissez des sous-titres précis pour les vidéos contenant des paroles, ainsi qu’une transcription si nécessaire. Reliez les sous-titres avec l’élément track et un fichier WebVTT. Prévoyez une description textuelle ou audio pour les informations essentielles transmises uniquement visuellement.

Consultez la référence vidéo MDN pour les attributs et le guide MDN des sous-titres vidéo pour les fichiers de sous-titres.