0Pricing
HTML Academy · Leçon

L’élément `video` et le rapport d’aspect

Intégrez des vidéos en conservant le rapport d’aspect approprié.

L’élément `video` et le rapport d’aspect est une leçon HTML Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage HTML Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours HTML Academy comprend 4 leçons au total.

L’élément video

L’élément <video> intègre nativement une vidéo :

<video controls width="800" height="450" src="tutorial.mp4">
  Your browser does not support video.
</video>

Attributs essentiels

Attributs vidéo importants :

<video
  src="demo.mp4"
  controls           <!-- show player UI -->
  width="1280"       <!-- intrinsic width -->
  height="720"       <!-- intrinsic height -->
  poster="preview.jpg" <!-- thumbnail before play -->
  preload="metadata"   <!-- preload only metadata -->
>
  Your browser does not support video.
</video>

L’attribut poster

L’attribut poster définit une miniature affichée avant la lecture de la vidéo :

<video controls poster="/thumbnails/episode-42.jpg" width="800" height="450">
  <source src="episode-42.mp4" type="video/mp4">
</video>
<!-- Without poster: browser shows a black frame
     or the first frame of the video (browser-dependent) -->

Largeur et hauteur pour les proportions

Indiquez toujours la largeur et la hauteur afin d’éviter les décalages de mise en page :

<video controls width="1280" height="720" src="video.mp4"></video>
<!-- Browser reserves correct space before video loads -->
<!-- Prevents CLS (Cumulative Layout Shift) -->
<!-- Make responsive with CSS:
  video { width: 100%; height: auto; }
-->

Vidéo adaptative avec CSS

Rendez la vidéo adaptative avec CSS :

video {
  width: 100%;
  height: auto;
  max-width: 1280px;
  display: block;
  margin: 0 auto;
}

/* Aspect ratio box: */
.video-wrapper {
  position: relative;
  padding-top: 56.25%;  /* 16:9 aspect ratio: 9/16 = 0.5625 */
}
.video-wrapper video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

Propriété CSS aspect-ratio

Approche moderne utilisant aspect-ratio en CSS :

video {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
}

/* Other common ratios: */
/* 4:3 → aspect-ratio: 4 / 3 */
/* 21:9 → aspect-ratio: 21 / 9 */
/* 1:1 → aspect-ratio: 1 */

Commandes de lecture vidéo avec JS

Contrôle d’une vidéo avec JavaScript :

const video = document.getElementById('my-video');

video.play();
video.pause();
video.currentTime = 60;  // jump to 1 minute
video.playbackRate = 1.5;  // 1.5x speed
video.volume = 0.7;
video.muted = true;
video.requestFullscreen();

console.log(video.duration);    // total length
console.log(video.paused);      // is it paused?

Événements vidéo

Écoutez les événements vidéo :

video.addEventListener('play', () => updatePlayButton());
video.addEventListener('pause', () => updatePlayButton());
video.addEventListener('ended', () => showNextVideo());
video.addEventListener('timeupdate', () => updateProgressBar());
video.addEventListener('loadedmetadata', () => {
  console.log('Duration:', video.duration);
  console.log('Dimensions:', video.videoWidth, 'x', video.videoHeight);
});

API de plein écran

Entrez en mode plein écran et quittez-le par programmation :

const btn = document.getElementById('fullscreen-btn');
const video = document.getElementById('player');

btn.addEventListener('click', () => {
  if (!document.fullscreenElement) {
    video.requestFullscreen();
  } else {
    document.exitFullscreen();
  }
});

document.addEventListener('fullscreenchange', () => {
  btn.textContent = document.fullscreenElement ? 'Exit Fullscreen' : 'Fullscreen';
});

Politique de lecture automatique des vidéos

Règles de lecture automatique des vidéos dans les navigateurs :

  • Vidéo muette → peut être lue automatiquement dans tous les navigateurs modernes
  • Vidéo avec son → bloquée sauf si l’utilisateur a interagi avec la page
  • Indice d’engagement envers les médias de Google → la lecture automatique peut être autorisée pour les visiteurs fréquents
  • Prévoyez toujours un bouton de lecture comme solution de repli

Accessibilité des vidéos

Exigences d’accessibilité pour les vidéos :

  • Fournissez des sous-titres pour tous les dialogues et les sons importants
  • Fournissez une transcription pour les personnes sourdes ou malentendantes
  • Fournissez des descriptions audio pour les personnes aveugles (décrivez les informations uniquement visuelles)
  • Assurez-vous que les commandes au clavier fonctionnent (les commandes natives le permettent)

Vérification rapide

Quel attribut vidéo affiche une image fixe avant la lecture de la vidéo ?

Récapitulatif : élément video

Éléments essentiels de video :

  • controls — afficher l’interface du lecteur
  • width et height — éviter les décalages de mise en page
  • poster — miniature avant la lecture
  • preload="metadata" — valeur par défaut offrant de bonnes performances
  • Adaptativité : width: 100%; height: auto; ou aspect-ratio: 16/9
  • Une vidéo muette peut être lue automatiquement ; une vidéo avec son ne le peut pas dans la plupart des navigateurs

Questions Fréquemment Posées

La leçon « L’élément `video` et le rapport d’aspect » est-elle gratuite ?

Oui — le texte complet de « L’élément `video` et le rapport d’aspect » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours HTML Academy, passe à CoddyKit PRO. Le cours HTML Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « L’élément `video` et le rapport d’aspect » ?

Intégrez des vidéos en conservant le rapport d’aspect approprié. Tu pratiques HTML Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer HTML Academy ?

Aucune expérience préalable n'est requise. HTML Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.

Combien de temps prend la leçon « L’élément `video` et le rapport d’aspect » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon HTML Academy ?

Oui. Chaque leçon HTML Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. L’élément `audio` : `src`, commandes, boucle et lecture automatique
  2. L’élément `video` et le rapport d’aspect
  3. L’élément `source` pour plusieurs formats
  4. Sous-titres avec `track` et WebVTT
← Retour à HTML Academy