Comment intégrer une vidéo dans React

Intégrer une vidéo dans une application React semble simple, jusqu’à ce que vous soyez confronté à un autoplay défaillant, à une iframe non responsive ou à une balise <embed> qui ne fonctionne tout simplement pas. Ce guide couvre les deux approches les plus pragmatiques : l’élément HTML5 natif <video> pour les fichiers auto-hébergés, et les intégrations via <iframe> pour des plateformes comme YouTube et Vimeo. Les bibliothèques tierces sont mentionnées uniquement lorsqu’elles apportent une véritable valeur ajoutée, et non comme solution par défaut.

Méthode 1 : vidéo HTML5 dans React pour les fichiers auto-hébergés

Si vous contrôlez le fichier vidéo, l’élément natif <video> est l’outil approprié. Aucune bibliothèque requise.

import myVideo from './assets/demo.mp4';

export default function VideoPlayer() {
  return (
    <video
      width="100%"
      style={{ aspectRatio: '16/9' }}
      controls
      playsInline
      muted
    >
      <source src={myVideo} type="video/mp4" />
      <track
        kind="subtitles"
        src="/captions/demo.en.vtt"
        srcLang="en"
        label="English"
        default
      />
      Your browser does not support the video tag.
    </video>
  );
}

Quelques points à noter :

• autoPlay requiert muted pour fonctionner de manière fiable dans les navigateurs modernes. Chrome, Safari et Firefox bloquent tous par défaut l’autoplay non muet. Ne supposez pas que cela fonctionnera sans muted. Notez qu’en JSX, l’attribut s’écrit en camelCase sous la forme autoPlay, et non autoplay. La prise en charge par les navigateurs et les politiques d’autoplay sont documentées sur Can I Use.
• playsInline est requis sur iOS pour empêcher la vidéo de s’ouvrir automatiquement en plein écran.
• <track> ajoute des sous-titres ou des légendes. C’est la bonne manière de gérer l’accessibilité du contenu vidéo, et c’est un aspect facile à négliger.
• Le texte de repli à l’intérieur de <video> n’apparaît que dans les très anciens navigateurs qui ne reconnaissent pas l’élément. Il vaut tout de même la peine de l’inclure.

Pour les formats de streaming adaptatif comme HLS (.m3u8), la prise en charge native par les navigateurs varie. Safari gère HLS nativement, mais Chrome et Firefox nécessitent une bibliothèque telle que hls.js pour analyser et lire le flux.

Intégration YouTube dans React : utilisation d’une iframe

Pour YouTube ou Vimeo, une <iframe> constitue l’approche standard. Vous n’avez pas besoin d’un package spécifique à React pour cela.

export default function YouTubeEmbed({ videoId }) {
  return (
    <div style={{ aspectRatio: '16/9', width: '100%' }}>
      <iframe
        width="100%"
        height="100%"
        src={`https://www.youtube-nocookie.com/embed/${videoId}`}
        title="YouTube video player"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
        allowFullScreen
        style={{ border: 'none' }}
      />
    </div>
  );
}

Détails importants :

• Utilisez youtube-nocookie.com au lieu de youtube.com pour l’URL d’intégration. Il s’agit du mode confidentialité renforcée de YouTube, qui réduit les cookies de suivi jusqu’à ce que l’utilisateur interagisse avec le lecteur.
• title est obligatoire sur les iframes pour les lecteurs d’écran. Sans cet attribut, les technologies d’assistance n’ont aucun moyen de décrire le contenu intégré.
• aspectRatio: '16/9' sur le conteneur avec width: 100% et height: 100% sur l’iframe constitue l’approche responsive la plus propre en utilisant le CSS moderne. Aucune astuce de padding nécessaire. La prise en charge par les navigateurs de la propriété CSS aspect-ratio est disponible sur Can I Use.
• Le format de l’URL d’intégration est https://www.youtube-nocookie.com/embed/{VIDEO_ID}. L’identifiant de la vidéo correspond à la valeur du paramètre de requête v dans une URL YouTube standard (par exemple, la partie après ?v= dans youtube.com/watch?v=VIDEO_ID).

Vous pouvez transmettre des paramètres supplémentaires via la chaîne de requête :

/embed/VIDEO_ID?controls=1&rel=0

Quand utiliser une bibliothèque de lecteur vidéo React

Pour la plupart des cas d’usage, l’élément natif <video> ou une simple iframe suffit. Envisagez une bibliothèque comme ReactPlayer si vous devez prendre en charge plusieurs plateformes (YouTube, Vimeo, Wistia, HLS, DASH) à partir d’un seul composant avec une API unifiée, ou si vous avez besoin de callbacks d’événements tels que onReady, onProgress ou onEnded à travers différents fournisseurs.

ReactPlayer ajoute un poids de bundle non négligeable, il vaut donc la peine d’évaluer si vous avez réellement besoin de cette flexibilité avant de l’ajouter comme dépendance.

Conclusion

Commencez par l’outil le plus simple qui fonctionne. Pour la vidéo auto-hébergée, utilisez l’élément HTML5 <video> avec controls, playsInline et muted si l’autoplay est nécessaire. Pour les intégrations YouTube dans React, une simple <iframe> pointant vers youtube-nocookie.com avec un attribut title approprié est tout ce dont vous avez besoin. N’optez pour une bibliothèque que lorsque l’approche native est réellement insuffisante.

FAQ

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.