So binden Sie Videos in React ein

Das Einbetten von Videos in eine React-App klingt einfach – bis Sie auf nicht funktionierendes Autoplay, ein nicht responsives iframe oder ein <embed>-Tag stoßen, das schlicht nicht funktioniert. Dieser Leitfaden behandelt die zwei praxistauglichsten Ansätze: das native HTML5-<video>-Element für selbst gehostete Dateien und <iframe>-Einbettungen für Plattformen wie YouTube und Vimeo. Drittanbieter-Bibliotheken werden nur dort erwähnt, wo sie tatsächlich einen Mehrwert bieten – nicht als Standardlösung.

Methode 1: HTML5-Video in React für selbst gehostete Dateien

Wenn Sie die Videodatei selbst kontrollieren, ist das native <video>-Element das richtige Werkzeug. Es ist keine Bibliothek nötig.

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>
  );
}

Einige Punkte sind erwähnenswert:

• autoPlay benötigt muted, um in modernen Browsern zuverlässig zu funktionieren. Chrome, Safari und Firefox blockieren standardmäßig alle Autoplay-Wiedergaben mit Ton. Verlassen Sie sich nicht darauf, dass es ohne muted funktioniert. Beachten Sie, dass das Attribut in JSX als autoPlay in CamelCase geschrieben wird – nicht als autoplay. Browser-Unterstützung und Autoplay-Richtlinien sind auf Can I Use dokumentiert.
• playsInline ist auf iOS erforderlich, um zu verhindern, dass das Video automatisch im Vollbild geöffnet wird.
• <track> fügt Untertitel oder Bildunterschriften hinzu. Dies ist der korrekte Weg, um Barrierefreiheit für Videoinhalte umzusetzen – und wird leicht übersehen.
• Der Fallback-Text innerhalb von <video> wird nur in sehr alten Browsern angezeigt, die das Element nicht erkennen. Trotzdem lohnt es sich, ihn einzufügen.

Bei adaptiven Streaming-Formaten wie HLS (.m3u8) variiert die native Browser-Unterstützung. Safari unterstützt HLS nativ, während Chrome und Firefox eine Bibliothek wie hls.js benötigen, um den Stream zu parsen und abzuspielen.

YouTube-Einbettung in React: Verwendung eines iframes

Für YouTube oder Vimeo ist ein <iframe> der Standardansatz. Sie benötigen dafür kein React-spezifisches Paket.

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>
  );
}

Wichtige Details:

• Verwenden Sie youtube-nocookie.com anstelle von youtube.com für die Embed-URL. Dies ist der datenschutzfreundliche Modus von YouTube, der Tracking-Cookies reduziert, bis der Nutzer mit dem Player interagiert.
• title ist bei iframes Pflicht – für Screenreader. Ohne Titel haben assistive Technologien keine Möglichkeit, den eingebetteten Inhalt zu beschreiben.
• aspectRatio: '16/9' auf dem Wrapper kombiniert mit width: 100% und height: 100% am iframe ist der sauberste responsive Ansatz mit modernem CSS. Padding-Tricks werden nicht benötigt. Die Browser-Unterstützung für die CSS-Eigenschaft aspect-ratio finden Sie auf Can I Use.
• Das Format der Embed-URL lautet https://www.youtube-nocookie.com/embed/{VIDEO_ID}. Die Video-ID ist der Wert des Query-Parameters v in einer Standard-YouTube-URL (z. B. der Teil nach ?v= in youtube.com/watch?v=VIDEO_ID).

Sie können zusätzliche Parameter über den Query-String übergeben:

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

Wann sollten Sie eine React-Videoplayer-Bibliothek verwenden?

Für die meisten Anwendungsfälle reichen das native <video>-Element oder ein einfaches iframe völlig aus. Eine Bibliothek wie ReactPlayer bietet sich an, wenn Sie mehrere Plattformen (YouTube, Vimeo, Wistia, HLS, DASH) aus einer einzigen Komponente heraus mit einer einheitlichen API unterstützen müssen oder wenn Sie Event-Callbacks wie onReady, onProgress oder onEnded über verschiedene Anbieter hinweg benötigen.

ReactPlayer bringt nennenswertes zusätzliches Bundle-Gewicht mit – es lohnt sich also, vor dem Hinzufügen als Abhängigkeit zu prüfen, ob Sie diese Flexibilität wirklich benötigen.

Fazit

Beginnen Sie mit dem einfachsten Werkzeug, das funktioniert. Für selbst gehostete Videos verwenden Sie das HTML5-<video>-Element mit controls, playsInline sowie muted, falls Autoplay benötigt wird. Für YouTube-Einbettungen in React reicht ein einfaches <iframe>, das auf youtube-nocookie.com verweist und ein passendes title-Attribut besitzt. Greifen Sie nur dann zu einer Bibliothek, wenn der native Ansatz tatsächlich nicht ausreicht.

FAQs

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.