HTML - L'élément vidéo

Syntaxe de base

L'élément <video> en HTML vous permet d'intégrer du contenu vidéo dans une page web. Sa structure de base comprend une balise d'ouverture <video> et une balise de fermeture </video>. Entre ces balises, vous spécifiez la source de la vidéo et incluez des attributs pour contrôler le comportement et l'apparence de la vidéo.

<video src="video.mp4" controls>
  Votre navigateur ne prend pas en charge l'élément vidéo.
</video>

L'attribut src pointe vers l'URL ou le chemin du fichier vidéo que vous souhaitez intégrer. L'attribut controls ajoute des contrôles vidéo, tels que les boutons de lecture, pause, volume et plein écran, au lecteur vidéo.

Le texte entre les balises d'ouverture et de fermeture <video> est un contenu de secours. Il s'affichera si le navigateur ne prend pas en charge l'élément <video> ou si la source vidéo ne peut pas être chargée.

Bien que l'attribut src soit nécessaire pour spécifier la source de la vidéo, il existe des attributs facultatifs que vous pouvez utiliser pour modifier la fonctionnalité et le comportement du lecteur vidéo :

Ces attributs facultatifs vous donnent plus de contrôle sur l'expérience de lecture vidéo. Vous pouvez les inclure selon vos besoins dans la balise <video>.

Notez que certains attributs, comme autoplay, peuvent être soumis à des restrictions du navigateur et aux préférences de l'utilisateur. De nombreux navigateurs exigent maintenant que les vidéos soient muettes ou qu'il y ait une interaction de l'utilisateur avant d'autoriser la lecture automatique pour éviter la lecture vidéo non désirée.

Sources vidéo

Pour spécifier la source d'une vidéo dans l'élément <video>, vous pouvez utiliser l'attribut src. L'attribut src pointe vers l'URL ou le chemin du fichier vidéo que vous souhaitez intégrer.

<video src="video.mp4" controls>
  Votre navigateur ne prend pas en charge l'élément vidéo.
</video>

Tous les navigateurs ne prennent pas en charge les mêmes formats vidéo et codecs. Pour vous assurer que votre vidéo est lisible sur différents navigateurs, vous pouvez utiliser plusieurs éléments <source> à l'intérieur de l'élément <video>. Chaque élément <source> spécifie un format de fichier vidéo ou un codec différent.

<video controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  Votre navigateur ne prend pas en charge l'élément vidéo.
</video>

Le navigateur essaiera de charger le premier élément <source> (video.mp4). S'il ne peut pas lire ce format, il passera au prochain élément <source> (video.webm). Le navigateur utilisera la première source vidéo compatible qu'il trouve.

Les formats vidéo et codecs les plus couramment pris en charge dans les navigateurs modernes sont :

Il est recommandé d'inclure plusieurs sources vidéo dans différents formats pour maximiser la compatibilité avec les navigateurs. Vous pouvez utiliser des outils en ligne ou des convertisseurs vidéo pour générer différentes versions de votre vidéo dans divers formats.

Lors de l'utilisation de plusieurs éléments <source>, l'attribut type est important pour spécifier le type MIME de chaque source vidéo. Le type MIME aide le navigateur à déterminer s'il peut lire le format vidéo sans télécharger l'intégralité du fichier.

En fournissant des sources vidéo dans différents formats et en utilisant les attributs appropriés, vous pouvez vous assurer que vos vidéos sont lisibles sur une large gamme de navigateurs et d'appareils, améliorant ainsi l'expérience utilisateur sur votre page web.

Attribut d'affiche

L'attribut poster dans l'élément <video> vous permet de définir une image d'affiche qui est montrée avant que la vidéo ne commence à jouer. L'image d'affiche sert de placeholder ou de vignette pour la vidéo, donnant aux utilisateurs un aperçu du contenu vidéo.

<video src="video.mp4" poster="poster.jpg" controls>
  Votre navigateur ne prend pas en charge l'élément vidéo.
</video>

L'attribut poster pointe vers l'URL ou le chemin d'un fichier image (poster.jpg) qui sera affiché comme image d'affiche pour la vidéo.

L'utilisation d'une image d'affiche présente plusieurs avantages :

Lors du choix d'une image d'affiche, considérez les points suivants :

• Utilisez une image de haute qualité qui soit claire et visuellement attrayante.
• Assurez-vous que l'image est pertinente pour le contenu vidéo et le représente fidèlement.
• Optimisez la taille du fichier image pour éviter de ralentir les temps de chargement de la page.
• Utilisez un texte alternatif approprié pour l'image d'affiche afin de décrire son contenu pour les lecteurs d'écran et les moteurs de recherche.

Attribut "controls"

L'attribut controls dans l'élément <video> affiche les contrôles vidéo par défaut du navigateur. Ces contrôles comprennent généralement des boutons pour lire/mettre en pause, régler le volume, passer en mode plein écran, ainsi qu'une barre de progression indiquant la position actuelle de lecture de la vidéo.

<video src="video.mp4" controls>
  Votre navigateur ne prend pas en charge l'élément vidéo.
</video>

En ajoutant l'attribut controls à la balise <video>, vous indiquez au navigateur d'afficher les contrôles vidéo intégrés. Cela permet aux utilisateurs de contrôler la lecture de la vidéo sur la page web.

L'apparence et les fonctionnalités des contrôles vidéo natifs peuvent varier légèrement entre les navigateurs, mais ils offrent généralement une expérience cohérente et familière pour les utilisateurs.

Si vous souhaitez avoir plus de contrôle sur l'apparence et le comportement des contrôles vidéo, vous pouvez créer des contrôles personnalisés en utilisant HTML, CSS et JavaScript. Cela vous permet de concevoir des contrôles qui correspondent au style de votre site web et d'ajouter des fonctionnalités au-delà des contrôles de lecture standard.

Pour créer des contrôles vidéo personnalisés :

1. Supprimez l'attribut controls de la balise <video> pour masquer les contrôles par défaut.

2. Créez des éléments HTML qui serviront de boutons de contrôle personnalisés (par exemple, lecture, pause, volume, barre de progression).

3. Utilisez CSS pour styliser les éléments de contrôle personnalisés, en les positionnant sur le lecteur vidéo et en les rendant esthétiques.

4. Utilisez JavaScript pour ajouter de l'interactivité aux contrôles personnalisés. Vous pouvez écouter les événements comme les clics sur les boutons de contrôle et modifier la lecture de la vidéo à l'aide de l'API HTMLMediaElement.

<video id="myVideo" src="video.mp4">
  Votre navigateur ne prend pas en charge l'élément vidéo.
</video>

<div id="customControls">
  <button id="playPauseBtn">Lecture/Pause</button>
  <input type="range" id="progressBar" value="0">
  <button id="muteBtn">Couper/Rétablir le son</button>
</div>

<script>
  const video = document.getElementById('myVideo');
  const playPauseBtn = document.getElementById('playPauseBtn');
  const progressBar = document.getElementById('progressBar');
  const muteBtn = document.getElementById('muteBtn');

  playPauseBtn.addEventListener('click', function() {
    if (video.paused) {
      video.play();
    } else {
      video.pause();
    }
  });

  video.addEventListener('timeupdate', function() {
    progressBar.value = (video.currentTime / video.duration) * 100;
  });

  progressBar.addEventListener('input', function() {
    video.currentTime = (progressBar.value / 100) * video.duration;
  });

  muteBtn.addEventListener('click', function() {
    video.muted = !video.muted;
  });
</script>

Des boutons de contrôle personnalisés sont créés en HTML (playPauseBtn, progressBar, muteBtn). JavaScript est utilisé pour gérer les interactions avec ces contrôles. La méthode addEventListener écoute les événements de clic sur les boutons et met à jour la lecture de la vidéo en utilisant des méthodes comme play(), pause(), et des propriétés comme muted.

L'événement timeupdate est utilisé pour mettre à jour la barre de progression pendant la lecture de la vidéo, et l'événement input sur la barre de progression permet aux utilisateurs de se déplacer à un moment spécifique de la vidéo.

En utilisant JavaScript pour créer des contrôles vidéo personnalisés, vous avez un contrôle total sur leur fonctionnalité et pouvez adapter l'expérience de lecture vidéo aux besoins spécifiques de votre site web.

Attributs Autoplay et Loop

Les attributs autoplay et loop dans l'élément <video> contrôlent le comportement de lecture automatique d'une vidéo. L'attribut autoplay démarre automatiquement la lecture de la vidéo au chargement de la page, tandis que l'attribut loop fait jouer la vidéo en continu.

Pour utiliser l'attribut autoplay, incluez-le dans la balise <video> :

<video src="video.mp4" autoplay>
  Votre navigateur ne prend pas en charge l'élément vidéo.
</video>

Avec l'attribut autoplay, la vidéo commencera à jouer dès qu'elle sera chargée, sans interaction de l'utilisateur. Cela peut être utile dans certaines situations, comme pour les vidéos d'arrière-plan ou les sections d'en-tête de page d'accueil basées sur la vidéo.

De même, ajoutez l'attribut loop à la balise <video> pour faire jouer la vidéo en boucle :

<video src="video.mp4" loop>
  Votre navigateur ne prend pas en charge l'élément vidéo.
</video>

Lorsque l'attribut loop est présent, la vidéo recommencera depuis le début après avoir atteint la fin. Cela est utile pour créer des boucles vidéo sans interruption ou pour des vidéos qui doivent être lues en continu.

Cependant, tenez compte des restrictions des navigateurs et de l'expérience utilisateur lors de l'utilisation des attributs autoplay et loop. De nombreux navigateurs ont maintenant des politiques de lecture automatique plus strictes pour empêcher la lecture non souhaitée de vidéos et d'audio. Ces politiques peuvent nécessiter une interaction de l'utilisateur, comme un clic ou un tapotement, avant d'autoriser la lecture automatique d'une vidéo.

Pour respecter les préférences des utilisateurs et éviter un comportement de lecture automatique gênant, vous pouvez combiner l'attribut autoplay avec l'attribut muted :

<video src="video.mp4" autoplay muted>
  Votre navigateur ne prend pas en charge l'élément vidéo.
</video>

En ajoutant l'attribut muted, la vidéo sera lue automatiquement sans son, ce qui a plus de chances d'être autorisé par les navigateurs. Les utilisateurs peuvent ensuite choisir de réactiver le son s'ils souhaitent entendre l'audio.

Lorsque vous décidez d'utiliser autoplay et loop, réfléchissez à l'expérience utilisateur et au contexte spécifique de votre site web. Prenez en compte les éléments suivants :

En général, utilisez autoplay et loop avec parcimonie et uniquement lorsqu'ils apportent une valeur ajoutée à l'expérience utilisateur. Fournissez des contrôles clairs permettant aux utilisateurs d'arrêter ou de mettre en pause la lecture vidéo si nécessaire, et respectez leurs préférences en matière de lecture automatique des médias.

Attribut Preload

L'attribut preload dans l'élément <video> contrôle la quantité de vidéo à charger lors du chargement de la page. Il vous permet d'équilibrer entre un démarrage plus rapide de la vidéo et l'économie de bande passante. L'attribut preload peut avoir l'une des trois valeurs suivantes : auto, metadata ou none.

<video src="video.mp4" preload="auto" controls>
  Votre navigateur ne prend pas en charge l'élément vidéo.
</video>

Voici ce que signifie chaque valeur :

1. auto (par défaut) : Le navigateur essaiera de télécharger toute la vidéo lors du chargement de la page. Cela offre le démarrage le plus rapide de la vidéo mais utilise le plus de bande passante. C'est un bon choix si vous vous attendez à ce que les utilisateurs lisent la vidéo.

2. metadata : Le navigateur ne chargera que les métadonnées de la vidéo (par exemple, la durée, les dimensions) lors du chargement de la page, mais pas la vidéo elle-même. Cela utilise moins de bande passante que auto mais fournit tout de même des informations sur la vidéo. La vidéo commencera à se télécharger lorsque l'utilisateur la lira.

3. none : Le navigateur ne préchargera aucune partie de la vidéo, y compris les métadonnées, jusqu'à ce que l'utilisateur la lise. Cela utilise le moins de bande passante mais peut entraîner un démarrage plus lent de la vidéo.

L'impact de l'attribut preload sur la vitesse de chargement de la page et l'expérience utilisateur dépend de la valeur choisie :

Lors du choix de la valeur preload à utiliser, prenez en compte les besoins spécifiques de votre site web et la probabilité que les utilisateurs lisent la vidéo :

• Si la vidéo est le contenu principal de la page et que la plupart des utilisateurs sont susceptibles de la regarder, auto pourrait être le meilleur choix pour un démarrage rapide.
• Si la vidéo est un contenu supplémentaire ou n'est pas le point central, metadata peut offrir un équilibre entre le temps de démarrage et l'utilisation de la bande passante.
• Si la vidéo est optionnelle ou peu susceptible d'être lue par la plupart des utilisateurs, none peut économiser de la bande passante et améliorer la vitesse de chargement de la page.

Il est important de noter que l'attribut preload est une suggestion pour le navigateur, pas une commande stricte. Certains navigateurs peuvent ignorer l'attribut preload ou modifier son comportement en fonction des conditions du réseau, des préférences de l'utilisateur ou d'autres facteurs.

De plus, si l'attribut autoplay est présent, l'attribut preload est ignoré et la vidéo sera entièrement téléchargée quelle que soit la valeur de preload.

En utilisant judicieusement l'attribut preload et en tenant compte du contexte spécifique de votre site web et de vos vidéos, vous pouvez trouver le bon équilibre entre les performances vidéo et l'efficacité du chargement de la page, offrant ainsi une meilleure expérience utilisateur à vos visiteurs.

Attribut Muted

L'attribut muted dans l'élément <video> permet de couper le son de la vidéo par défaut lors du chargement de la page. Lorsque l'attribut muted est présent, la vidéo sera lue sans son jusqu'à ce que l'utilisateur le réactive.

Pour couper le son d'une vidéo par défaut, ajoutez l'attribut muted à la balise <video> :

<video src="video.mp4" muted controls>
  Votre navigateur ne prend pas en charge l'élément vidéo.
</video>

L'utilisation de l'attribut muted a des implications sur la fonctionnalité de lecture automatique de la vidéo. De nombreux navigateurs ont maintenant des politiques de lecture automatique plus strictes qui empêchent les vidéos de se lancer automatiquement avec du son. Ces politiques visent à réduire les bruits indésirables et à éviter aux utilisateurs de regarder des vidéos qu'ils n'ont pas choisi de lire.

Cependant, si une vidéo a l'attribut muted, il est plus probable que les navigateurs autorisent sa lecture automatique. Le raisonnement est qu'une vidéo muette est moins perturbante pour l'expérience utilisateur qu'une vidéo avec du son.

<video src="video.mp4" autoplay muted controls>
  Votre navigateur ne prend pas en charge l'élément vidéo.
</video>

Dans ce cas, la vidéo commencera à se lire automatiquement au chargement de la page, mais sans son. Les utilisateurs peuvent alors choisir de réactiver le son de la vidéo en cliquant sur le bouton de réactivation du son dans les commandes de la vidéo.

L'utilisation de l'attribut muted en combinaison avec autoplay est un bon moyen d'offrir une expérience utilisateur plus engageante tout en respectant les politiques de lecture automatique des navigateurs et les préférences des utilisateurs. Cela vous permet de mettre en valeur du contenu vidéo sans imposer de son non désiré aux utilisateurs.

Gardez à l'esprit que même avec l'attribut muted, certains navigateurs peuvent toujours bloquer la lecture automatique dans certaines situations, par exemple lorsque l'utilisateur a défini une préférence pour bloquer toutes les vidéos en lecture automatique. Il est toujours recommandé de fournir des commandes claires permettant aux utilisateurs de lire, mettre en pause et réactiver le son des vidéos selon leurs besoins.

Attributs de largeur et de hauteur

Les attributs width et height dans l'élément <video> vous permettent de définir la taille du lecteur vidéo sur la page web. Ces attributs contrôlent la taille du lecteur vidéo et aident la vidéo à bien s'intégrer dans la mise en page de votre page.

Pour définir la taille de la vidéo, ajoutez les attributs width et height à la balise <video>, en spécifiant les valeurs en pixels :

<video src="video.mp4" width="640" height="360" controls>
  Votre navigateur ne prend pas en charge l'élément vidéo.
</video>

Le lecteur vidéo aura une largeur de 640 pixels et une hauteur de 360 pixels.

Lors de la définition de la taille de la vidéo, gardez à l'esprit le format d'image de la vidéo. Le format d'image est le rapport entre la largeur et la hauteur de la vidéo. Les formats d'image les plus courants sont 16:9 (écran large) et 4:3 (standard).

Si vous définissez les attributs width et height avec des valeurs qui ne correspondent pas au format d'image original de la vidéo, celle-ci peut sembler étirée ou compressée. Pour éviter cela, vous pouvez définir un seul des attributs et laisser le navigateur calculer automatiquement l'autre taille pour conserver le format d'image.

<video src="video.mp4" width="640" controls>
  Votre navigateur ne prend pas en charge l'élément vidéo.
</video>

Dans ce cas, seul l'attribut width est défini à 640 pixels. Le navigateur calculera automatiquement la hauteur appropriée en fonction du format d'image de la vidéo, en conservant les proportions de la vidéo.

Pour un dimensionnement vidéo réactif, vous pouvez utiliser CSS pour définir la taille de la vidéo en pourcentages plutôt qu'en valeurs de pixels fixes. Cela permet à la vidéo de s'adapter en fonction de la taille de son conteneur ou de la fenêtre d'affichage.

<div class="video-container">
  <video src="video.mp4" controls>
    Votre navigateur ne prend pas en charge l'élément vidéo.
  </video>
</div>

.video-container {
  width: 100%;
  max-width: 640px;
}

video {
  width: 100%;
  height: auto;
}

Dans cet exemple, la vidéo est placée à l'intérieur d'un élément conteneur avec une classe video-container. Le conteneur a une largeur de 100% et une largeur maximale de 640 pixels, limitant sa taille maximale. La vidéo elle-même a une largeur de 100% et une hauteur auto, lui permettant de s'adapter proportionnellement à l'intérieur du conteneur.

En utilisant des techniques de dimensionnement réactif, vous pouvez vous assurer que vos vidéos s'adaptent à différentes tailles d'écran et appareils, offrant une meilleure expérience utilisateur sur diverses plateformes.

Testez vos vidéos sur différents appareils et tailles d'écran pour vous assurer qu'elles s'affichent correctement et conservent leur format d'image. Si nécessaire, vous pouvez utiliser des media queries en CSS pour appliquer différentes règles de style en fonction de la taille de la fenêtre d'affichage, vous donnant plus de contrôle sur l'apparence de la vidéo sur différents appareils.

Contenu de secours

L'élément <video> en HTML5 est pris en charge par les navigateurs modernes. Cependant, il peut y avoir des cas où le navigateur d'un utilisateur ne prend pas en charge l'élément <video> ou le format vidéo spécifié. Dans ces situations, il est important de fournir un contenu de secours pour s'assurer que les utilisateurs peuvent toujours accéder à la vidéo ou trouver d'autres moyens de visualiser le contenu.

Le contenu de secours est placé entre les balises d'ouverture <video> et de fermeture </video>. Si le navigateur prend en charge l'élément <video> et peut lire le format vidéo spécifié, le contenu de secours est ignoré. Si le navigateur ne prend pas en charge l'élément <video> ou le format vidéo, le contenu de secours est affiché à la place.

<video src="video.mp4" controls>
  <p>Votre navigateur ne prend pas en charge l'élément vidéo.</p>
  <a href="video.mp4">Télécharger la vidéo</a>
</video>

Le contenu de secours peut inclure :

<video src="video.mp4" controls>
  <img src="fallback-image.jpg" alt="Miniature de la vidéo">
  <p>Votre navigateur ne prend pas en charge l'élément vidéo.</p>
  <a href="video.mp4">Télécharger la vidéo</a>
</video>

Lors de la fourniture de contenu de secours, tenez compte des meilleures pratiques suivantes :

• Gardez le contenu de secours concis et informatif, en expliquant clairement que la vidéo ne peut pas être lue.
• Fournissez des instructions claires ou des liens pour guider les utilisateurs sur la manière d'accéder au contenu vidéo par d'autres moyens.
• Assurez-vous que le contenu de secours est accessible et compatible avec les technologies d'assistance, comme les lecteurs d'écran.
• Utilisez un texte alternatif approprié pour les images utilisées comme contenu de secours afin de décrire le contenu de la vidéo.

En incluant un contenu de secours dans l'élément <video>, vous pouvez offrir une bonne expérience aux utilisateurs dont les navigateurs ne prennent pas en charge la lecture vidéo, en vous assurant qu'ils peuvent toujours accéder et interagir avec votre contenu vidéo.

Considérations d'accessibilité

Lors de l'intégration de vidéos sur une page web, il est important de prendre en compte l'accessibilité pour s'assurer que tous les utilisateurs, y compris ceux ayant des handicaps, puissent accéder et profiter du contenu vidéo. Voici quelques considérations clés d'accessibilité pour l'élément <video> :

<video src="video.mp4" controls>
  <track src="captions.vtt" kind="captions" srclang="en" label="Sous-titres en anglais">
  Votre navigateur ne prend pas en charge l'élément vidéo.
</video>

<div class="video-controls">
  <button class="play-pause" tabindex="0">Lecture/Pause</button>
  <button class="mute" tabindex="0">Muet/Son</button>
  <input class="volume" type="range" min="0" max="1" step="0.1" value="1" tabindex="0">
  <div class="progress">
    <progress class="progress-bar" value="0" max="100" tabindex="0"></progress>
  </div>
</div>

Compatibilité avec les navigateurs

L'élément <video> est pris en charge par les navigateurs web modernes, notamment Chrome, Firefox, Safari, Opera et Microsoft Edge. Ces navigateurs supportent les fonctions de base de l'élément <video>, comme la lecture de fichiers vidéo, l'utilisation de l'attribut src et la fourniture de contrôles vidéo natifs.

Cependant, la prise en charge des formats vidéo et des codecs spécifiques peut varier selon les navigateurs. Les formats vidéo les plus couramment pris en charge sont :

Il est recommandé de fournir plusieurs sources vidéo en utilisant l'élément <source> à l'intérieur de l'élément <video>. Chaque élément <source> peut spécifier un format vidéo différent, permettant au navigateur de choisir le format qu'il prend le mieux en charge.

<video controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <source src="video.ogg" type="video/ogg">
  Votre navigateur ne prend pas en charge l'élément vidéo.
</video>

Lorsqu'on a affaire à des navigateurs plus anciens qui ne prennent pas en charge l'élément <video> ou les formats vidéo spécifiés, il est important de prévoir des mécanismes de repli. Le contenu de repli est placé entre les balises d'ouverture <video> et de fermeture </video> et s'affiche lorsque le navigateur ne peut pas lire la vidéo.

Le contenu de repli peut inclure :

• Un message textuel informant les utilisateurs que leur navigateur ne prend pas en charge la lecture vidéo
• Des liens pour télécharger le fichier vidéo
• Un média alternatif, comme une image ou un GIF animé représentant le contenu vidéo

<video controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <p>Votre navigateur ne prend pas en charge l'élément vidéo.</p>
  <a href="video.mp4">Télécharger la vidéo</a>
</video>

Pour améliorer davantage la compatibilité et l'accessibilité de votre contenu vidéo, envisagez les points suivants :

• Utilisez l'attribut poster pour spécifier une image de remplacement qui s'affiche avant le début de la lecture de la vidéo. Cela fournit une représentation visuelle de la vidéo pour les navigateurs qui ne prennent pas en charge la lecture vidéo.
• Fournissez des sous-titres en utilisant l'élément <track> pour rendre votre contenu vidéo accessible à un public plus large, y compris les utilisateurs sourds ou malentendants.
• Proposez des transcriptions et des descriptions audio pour offrir des moyens alternatifs d'accéder au contenu vidéo, en particulier pour les utilisateurs ayant des déficiences visuelles.

En tenant compte de la compatibilité des navigateurs, en fournissant plusieurs sources vidéo et en mettant en place des mécanismes de repli, vous pouvez rendre votre contenu vidéo accessible au plus grand nombre d'utilisateurs possible sur différents navigateurs et appareils.

Exemples et cas d'utilisation

L'élément <video> en HTML offre des moyens d'intégrer et d'utiliser du contenu vidéo sur vos pages web. Examinons quelques exemples et cas d'utilisation pour voir comment vous pouvez utiliser l'élément <video>.

<video src="video.mp4" controls>
  <p>Votre navigateur ne prend pas en charge l'élément vidéo.</p>
</video>

<div class="video-gallery">
  <video id="video-player" controls>
    <source src="video1.mp4" type="video/mp4">
    Votre navigateur ne prend pas en charge l'élément vidéo.
  </video>
  <ul class="video-playlist">
    <li><a href="video1.mp4" class="active">Vidéo 1</a></li>
    <li><a href="video2.mp4">Vidéo 2</a></li>
    <li><a href="video3.mp4">Vidéo 3</a></li>
  </ul>
</div>

<script>
  const videoPlayer = document.getElementById('video-player');
  const playlistLinks = document.querySelectorAll('.video-playlist a');

  playlistLinks.forEach(link => {
    link.addEventListener('click', function(e) {
      e.preventDefault();
      const videoUrl = this.getAttribute('href');
      videoPlayer.src = videoUrl;
      playlistLinks.forEach(link => link.classList.remove('active'));
      this.classList.add('active');
      videoPlayer.play();
    });
  });
</script>

<div class="video-container">
  <video src="video.mp4" controls>
    Votre navigateur ne prend pas en charge l'élément vidéo.
  </video>
  <div class="video-overlay">
    <h2>Titre de la vidéo</h2>
    <p>La description de la vidéo va ici.</p>
  </div>
</div>

<style>
  .video-container {
    position: relative;
  }

  .video-overlay {
    position: absolute;
    top: 20px;
    left: 20px;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.7);
    padding: 10px;
  }
</style>