Vidéo HTML

La vue d’ensemble Médias vous a orienté vers plusieurs familles. Cette session se concentre sur une seule : l’élément video pour les clips et démos que vous hébergez vous-même. Donnez aux visiteurs une UI lecture/pause avec controls au lieu de les surprendre avec un son lancé automatiquement.

Ce que fait video

video demande au navigateur de récupérer un fichier film et de l’afficher dans la page. Vous pouvez pointer un seul fichier avec src, ou lister plusieurs enfants <source> pour que le navigateur choisisse un format pris en charge. Des attributs optionnels réservent la taille (width / height), montrent une image fixe avant la lecture (poster), et exposent les contrôles natifs.

Réponse directe

Utilisez <video controls src="movie.mp4"> ou imbriquez des enfants <source> pour plusieurs formats. Ajoutez une image poster pour un aperçu avant la lecture. Incluez un court texte de secours (et éventuellement un lien de téléchargement) à l’intérieur de video pour les agents qui ne peuvent pas lire le média. Préférez des fichiers compressés, de taille raisonnable.

Vidéo simple avec controls

Un seul MP4 plus controls et une largeur suffisent pour beaucoup de pages d’enseignement.

Lire l’échantillon simple

• controls demande au navigateur l’UI lecture/pause
• width="480" aide à réserver l’espace de mise en page pendant le chargement du fichier
• src pointe vers le fichier film dans votre dossier media
• Le texte à l’intérieur de video est le contenu de secours quand l’élément n’est pas pris en charge

Sources multiples et un poster

Les navigateurs diffèrent dans leur aisance avec les formats. Lister WebM et MP4 avec des indices type, plus une image fixe poster, est un motif pratique courant.

Lire l’échantillon multi-sources

• poster montre une image d’aperçu jusqu’au début de la lecture
• Chaque source nomme un fichier et un type MIME
• Le navigateur choisit la première source qu’il peut lire
• Le lien de téléchargement à l’intérieur aide quand la lecture est indisponible

Taille des fichiers et formats

Les exports caméra énormes bloquent sur les réseaux lents. Exportez un MP4 taille web (et éventuellement WebM) adapté au besoin pédagogique — de courtes démos battent des masters de plusieurs gigaoctets sur une page de leçon. Vous n’avez pas besoin de chaque conteneur dès le premier jour ; faites d’abord fonctionner un MP4 clair, puis ajoutez un second format si votre public le demande.

Autoplay : apprenez controls d’abord

L’autoplay avec son est souvent bloqué et généralement de mauvaise manière. Des astuces d’autoplay muet existent pour les héros marketing, mais les débutants devraient maîtriser controls et la lecture démarrée par l’utilisateur d’abord. Quand vous aurez besoin d’autoplay plus tard, lisez soigneusement les politiques des navigateurs et gardez un chemin de pause accessible.

Sous-titres et accessibilité (habitude)

Si le contenu parlé enseigne quelque chose d’important, prévoyez des sous-titres ou une transcription — même si vous branchez les éléments track complets dans un passage ultérieur. Ne comptez pas sur l’image poster seule comme seul résumé accessible d’une leçon face caméra.

Largeur, hauteur et mise en page

Définir width (et une height assortie quand vous connaissez le ratio d’aspect) réduit le saut de mise en page pendant le chargement des métadonnées vidéo. Étirer avec des nombres incompatibles a mauvaise mine ; gardez le vrai ratio d’aspect à l’esprit comme vous l’avez fait pour les images.

Pratiquer dans votre éditeur

1. Placez un .mp4 court dans un dossier media.
2. Intégrez-le avec video + controls + une largeur raisonnable.
3. Ajoutez un texte de secours à l’intérieur de l’élément.
4. Optionnellement, ajoutez une image poster et un second format source.
5. Ouvrez la page, lisez et mettez en pause, puis testez avec le réseau ralenti si vous le pouvez — remarquez pourquoi la taille du fichier compte.

Erreurs faciles

• Omettre controls pour que les utilisateurs ne puissent pas lire facilement
• Livrer d’énormes fichiers non compressés qui bloquent sur les réseaux lents
• Oublier le texte de secours ou un lien de téléchargement
• Se précipiter vers l’autoplay avec son avant de comprendre les bases
• Mettre alt sur video comme sur img (utilisez plutôt sous-titres/transcriptions et descriptions visibles)
• Confondre les embeds YouTube hébergés (iframe) avec des fichiers video auto-hébergés

Résumé

• video intègre les fichiers film que vous hébergez
• Utilisez controls pour l’UI de lecture
• Plusieurs balises source améliorent le support des formats
• poster montre une image d’aperçu avant la lecture
• Préférez des fichiers compressés et évitez le son en autoplay surprise