HTML - Das Videoelement

Grundlegende Syntax

Das <video>-Element in HTML ermöglicht es Ihnen, Videoinhalte in eine Webseite einzubetten. Seine grundlegende Struktur besteht aus einem öffnenden <video>-Tag und einem schließenden </video>-Tag. Zwischen diesen Tags geben Sie die Videoquelle an und fügen Attribute hinzu, um das Verhalten und Aussehen des Videos zu steuern.

<video src="video.mp4" controls>
  Ihr Browser unterstützt das Video-Element nicht.
</video>

Das src-Attribut verweist auf die URL oder den Pfad der Videodatei, die Sie einbetten möchten. Das controls-Attribut fügt Videosteuerelemente wie Wiedergabe-, Pause-, Lautstärke- und Vollbildschaltflächen zum Videoplayer hinzu.

Der Text zwischen den öffnenden und schließenden <video>-Tags ist Fallback-Inhalt. Er wird angezeigt, wenn der Browser das <video>-Element nicht unterstützt oder die Videoquelle nicht geladen werden kann.

Während das src-Attribut erforderlich ist, um die Videoquelle anzugeben, gibt es optionale Attribute, die Sie verwenden können, um die Funktionalität und das Verhalten des Videoplayers zu ändern:

Diese optionalen Attribute geben Ihnen mehr Kontrolle über das Videoabspielerlebnis. Sie können sie nach Bedarf innerhalb des <video>-Tags einfügen.

Beachten Sie, dass einige Attribute, wie autoplay, möglicherweise Browserbeschränkungen und Benutzereinstellungen unterliegen. Viele Browser erfordern jetzt, dass Videos stummgeschaltet sind oder eine Benutzerinteraktion stattfindet, bevor sie Autoplay zulassen, um unerwünschte Videowiedergabe zu verhindern.

Videoquellen

Um die Quelle eines Videos im <video>-Element anzugeben, können Sie das src-Attribut verwenden. Das src-Attribut verweist auf die URL oder den Pfad der Videodatei, die Sie einbetten möchten.

<video src="video.mp4" controls>
  Ihr Browser unterstützt das Video-Element nicht.
</video>

Nicht alle Browser unterstützen die gleichen Videoformate und Codecs. Um sicherzustellen, dass Ihr Video in verschiedenen Browsern abspielbar ist, können Sie mehrere <source>-Elemente innerhalb des <video>-Elements verwenden. Jedes <source>-Element gibt ein anderes Videodateiformat oder einen anderen Codec an.

<video controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  Ihr Browser unterstützt das Video-Element nicht.
</video>

Der Browser wird versuchen, das erste <source>-Element (video.mp4) zu laden. Wenn er dieses Format nicht abspielen kann, geht er zum nächsten <source>-Element (video.webm) über. Der Browser verwendet die erste kompatible Videoquelle, die er findet.

Die am häufigsten unterstützten Videoformate und Codecs in modernen Browsern sind:

Es ist eine gute Praxis, mehrere Videoquellen in verschiedenen Formaten einzubinden, um die Browser-Kompatibilität zu maximieren. Sie können Online-Tools oder Video-Konverter verwenden, um verschiedene Versionen Ihres Videos in unterschiedlichen Formaten zu erstellen.

Bei der Verwendung mehrerer <source>-Elemente ist das type-Attribut wichtig, um den MIME-Typ jeder Videoquelle anzugeben. Der MIME-Typ hilft dem Browser zu bestimmen, ob er das Videoformat abspielen kann, ohne die gesamte Datei herunterzuladen.

Indem Sie Videoquellen in verschiedenen Formaten bereitstellen und die entsprechenden Attribute verwenden, können Sie sicherstellen, dass Ihre Videos auf einer Vielzahl von Browsern und Geräten abspielbar sind, was die Benutzererfahrung auf Ihrer Webseite verbessert.

Poster-Attribut

Das poster-Attribut im <video>-Element ermöglicht es Ihnen, ein Posterbild festzulegen, das angezeigt wird, bevor das Video abgespielt wird. Das Posterbild dient als Platzhalter oder Vorschaubild für das Video und gibt Benutzern einen Eindruck vom Videoinhalt.

<video src="video.mp4" poster="poster.jpg" controls>
  Ihr Browser unterstützt das Video-Element nicht.
</video>

Das poster-Attribut verweist auf die URL oder den Pfad einer Bilddatei (poster.jpg), die als Posterbild für das Video angezeigt wird.

Die Verwendung eines Posterbildes bietet mehrere Vorteile:

Bei der Auswahl eines Posterbildes sollten Sie Folgendes beachten:

• Verwenden Sie ein hochwertiges Bild, das klar und visuell ansprechend ist.
• Stellen Sie sicher, dass das Bild relevant für den Videoinhalt ist und ihn genau repräsentiert.
• Optimieren Sie die Bilddateigröße, um zu vermeiden, dass sich die Ladezeiten der Seite verlängern.
• Verwenden Sie einen passenden Alt-Text für das Posterbild, um seinen Inhalt für Screenreader und Suchmaschinen zu beschreiben.

Controls-Attribut

Das controls-Attribut im <video>-Element zeigt standardmäßige Videosteuerelemente des Browsers an. Diese Steuerelemente haben normalerweise Schaltflächen für Wiedergabe/Pause, Lautstärkeregelung, Vollbildmodus und einen Fortschrittsbalken, der die aktuelle Wiedergabeposition des Videos anzeigt.

<video src="video.mp4" controls>
  Ihr Browser unterstützt das Video-Element nicht.
</video>

Durch Hinzufügen des controls-Attributs zum <video>-Tag weisen Sie den Browser an, die eingebauten Videosteuerelemente anzuzeigen. Dies ermöglicht Benutzern, die Videowiedergabe auf der Webseite zu steuern.

Das Aussehen und die Funktionen der nativen Videosteuerelemente können zwischen Browsern leicht variieren, bieten aber in der Regel eine konsistente und vertraute Erfahrung für Benutzer.

Wenn Sie mehr Kontrolle über das Aussehen und Verhalten der Videosteuerelemente wünschen, können Sie benutzerdefinierte Steuerelemente mit HTML, CSS und JavaScript erstellen. Dies ermöglicht Ihnen, Steuerelemente zu gestalten, die zum Stil Ihrer Website passen und Funktionen über die Standard-Wiedergabesteuerung hinaus hinzuzufügen.

So erstellen Sie benutzerdefinierte Videosteuerelemente:

1. Entfernen Sie das controls-Attribut vom <video>-Tag, um die Standardsteuerelemente auszublenden.

2. Erstellen Sie HTML-Elemente, die als benutzerdefinierte Steuertasten fungieren (z.B. Wiedergabe, Pause, Lautstärke, Fortschrittsbalken).

3. Verwenden Sie CSS, um die benutzerdefinierten Steuerelemente zu gestalten, sie über dem Videoplayer zu platzieren und ansprechend zu gestalten.

4. Verwenden Sie JavaScript, um den benutzerdefinierten Steuerelementen Interaktivität hinzuzufügen. Sie können auf Ereignisse wie Klicks auf die Steuertasten hören und die Videowiedergabe mit der HTMLMediaElement-API ändern.

<video id="myVideo" src="video.mp4">
  Ihr Browser unterstützt das Video-Element nicht.
</video>

<div id="customControls">
  <button id="playPauseBtn">Wiedergabe/Pause</button>
  <input type="range" id="progressBar" value="0">
  <button id="muteBtn">Ton aus/an</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>

Benutzerdefinierte Steuertasten werden in HTML erstellt (playPauseBtn, progressBar, muteBtn). JavaScript wird verwendet, um die Interaktionen mit diesen Steuerelementen zu handhaben. Die addEventListener-Methode hört auf Klick-Ereignisse der Schaltflächen und aktualisiert die Videowiedergabe mit Methoden wie play(), pause() und Eigenschaften wie muted.

Das timeupdate-Ereignis wird verwendet, um den Fortschrittsbalken während der Videowiedergabe zu aktualisieren, und das input-Ereignis am Fortschrittsbalken ermöglicht es Benutzern, zu einem bestimmten Zeitpunkt im Video zu springen.

Durch die Verwendung von JavaScript zur Erstellung benutzerdefinierter Videosteuerelemente haben Sie volle Kontrolle über deren Funktionalität und können die Videowiedergabe-Erfahrung an die spezifischen Bedürfnisse Ihrer Website anpassen.

Attribute Autoplay und Loop

Die Attribute autoplay und loop im <video>-Element steuern das automatische Abspielverhalten eines Videos. Das autoplay-Attribut startet die Wiedergabe des Videos automatisch beim Laden der Seite, während das loop-Attribut das Video kontinuierlich abspielt.

Um das autoplay-Attribut zu verwenden, fügen Sie es in den <video>-Tag ein:

<video src="video.mp4" autoplay>
  Ihr Browser unterstützt das Video-Element nicht.
</video>

Mit dem autoplay-Attribut beginnt das Video sofort nach dem Laden, ohne Benutzerinteraktion. Dies kann in bestimmten Situationen nützlich sein, wie bei Hintergrundvideos oder videobasierten Startseiten-Heros.

Fügen Sie das loop-Attribut zum <video>-Tag hinzu, um das Video wiederholt abzuspielen:

<video src="video.mp4" loop>
  Ihr Browser unterstützt das Video-Element nicht.
</video>

Wenn das loop-Attribut vorhanden ist, wird das Video nach Erreichen des Endes wieder von vorne abgespielt. Dies ist hilfreich für nahtlose Video-Loops oder Videos, die kontinuierlich abgespielt werden sollen.

Beachten Sie jedoch Browser-Einschränkungen und Benutzererfahrung bei der Verwendung der autoplay- und loop-Attribute. Viele Browser haben inzwischen strengere Autoplay-Richtlinien, um unerwünschte Video- und Audiowiedergabe zu verhindern. Diese Richtlinien erfordern möglicherweise eine Benutzerinteraktion, wie einen Klick oder Tipp, bevor ein Video automatisch abgespielt werden kann.

Um Benutzerpräferenzen zu respektieren und störendes Autoplay-Verhalten zu vermeiden, können Sie das autoplay-Attribut mit dem muted-Attribut kombinieren:

<video src="video.mp4" autoplay muted>
  Ihr Browser unterstützt das Video-Element nicht.
</video>

Durch Hinzufügen des muted-Attributs wird das Video automatisch ohne Ton abgespielt, was von Browsern eher zugelassen wird. Benutzer können dann wählen, ob sie den Ton aktivieren möchten.

Bei der Entscheidung, ob Sie autoplay und loop verwenden, sollten Sie die Benutzererfahrung und den spezifischen Kontext Ihrer Website berücksichtigen. Beachten Sie Folgendes:

Generell sollten Sie autoplay und loop sparsam und nur dann verwenden, wenn sie einen Mehrwert für die Benutzererfahrung bieten. Stellen Sie klare Steuerelemente zur Verfügung, damit Benutzer die Videowiedergabe bei Bedarf stoppen oder pausieren können, und respektieren Sie ihre Präferenzen für Medien-Autoplay.

Preload-Attribut

Das preload-Attribut im <video>-Element steuert, wie viel vom Video beim Laden der Seite geladen werden soll. Es ermöglicht Ihnen, zwischen schnelleren Video-Startzeiten und Bandbreiteneinsparungen abzuwägen. Das preload-Attribut kann einen von drei Werten haben: auto, metadata oder none.

<video src="video.mp4" preload="auto" controls>
  Ihr Browser unterstützt das Video-Element nicht.
</video>

Hier ist die Bedeutung jedes Wertes:

1. auto (Standard): Der Browser versucht, das gesamte Video beim Laden der Seite herunterzuladen. Dies ermöglicht die schnellste Video-Startzeit, verbraucht aber die meiste Bandbreite. Es ist eine gute Wahl, wenn Sie erwarten, dass Nutzer das Video abspielen.

2. metadata: Der Browser lädt nur die Metadaten des Videos (z.B. Dauer, Abmessungen) beim Laden der Seite, aber nicht das Video selbst. Dies verbraucht weniger Bandbreite als auto, liefert aber dennoch einige Informationen über das Video. Das Video wird erst heruntergeladen, wenn der Nutzer es abspielt.

3. none: Der Browser lädt keinen Teil des Videos vor, einschließlich der Metadaten, bis der Nutzer es abspielt. Dies verbraucht die geringste Bandbreite, kann aber zu einer langsameren Video-Startzeit führen.

Die Auswirkungen des preload-Attributs auf die Seitenladegeschwindigkeit und die Benutzererfahrung hängen vom gewählten Wert ab:

Bei der Entscheidung, welchen preload-Wert Sie verwenden sollten, berücksichtigen Sie die spezifischen Bedürfnisse Ihrer Website und die Wahrscheinlichkeit, dass Nutzer das Video abspielen:

• Wenn das Video der Hauptinhalt der Seite ist und die meisten Nutzer es voraussichtlich ansehen werden, könnte auto die beste Wahl für einen schnellen Start sein.
• Wenn das Video zusätzlicher Inhalt oder nicht der Hauptfokus ist, kann metadata eine Balance zwischen Startzeit und Bandbreitennutzung bieten.
• Wenn das Video optional ist oder wahrscheinlich nicht von den meisten Nutzern abgespielt wird, kann none Bandbreite sparen und die Seitenladegeschwindigkeit verbessern.

Es ist wichtig zu beachten, dass das preload-Attribut ein Hinweis für den Browser ist, kein strikter Befehl. Einige Browser können das preload-Attribut ignorieren oder sein Verhalten basierend auf Netzwerkbedingungen, Nutzereinstellungen oder anderen Faktoren ändern.

Außerdem wird das preload-Attribut ignoriert, wenn das autoplay-Attribut vorhanden ist, und das Video wird unabhängig vom preload-Wert vollständig heruntergeladen.

Durch die kluge Nutzung des preload-Attributs und die Berücksichtigung des spezifischen Kontexts Ihrer Website und Videos können Sie die richtige Balance zwischen Videoleistung und Seitenladeeffizienz finden und so eine bessere Benutzererfahrung für Ihre Besucher bieten.

Muted-Attribut

Das muted-Attribut im <video>-Element ermöglicht es, den Ton des Videos standardmäßig stumm zu schalten, wenn die Seite geladen wird. Wenn das muted-Attribut vorhanden ist, wird das Video ohne Ton abgespielt, bis der Benutzer die Stummschaltung aufhebt.

Um ein Video standardmäßig stumm zu schalten, fügen Sie das muted-Attribut zum <video>-Tag hinzu:

<video src="video.mp4" muted controls>
  Ihr Browser unterstützt das Video-Element nicht.
</video>

Die Verwendung des muted-Attributs hat Auswirkungen auf die Autoplay-Funktionalität des Videos. Viele Browser haben mittlerweile strengere Autoplay-Richtlinien, die Videos daran hindern, automatisch mit Ton abgespielt zu werden. Diese Richtlinien zielen darauf ab, unerwünschte Geräusche zu reduzieren und Benutzer davor zu schützen, Videos anzusehen, die sie nicht absichtlich abspielen wollten.

Wenn ein Video jedoch das muted-Attribut hat, ist es wahrscheinlicher, dass Browser das automatische Abspielen erlauben. Der Grund dafür ist, dass ein stummgeschaltetes Video weniger störend für die Benutzererfahrung ist als ein Video mit Ton.

<video src="video.mp4" autoplay muted controls>
  Ihr Browser unterstützt das Video-Element nicht.
</video>

In diesem Fall wird das Video automatisch abgespielt, wenn die Seite geladen wird, allerdings ohne Ton. Benutzer können dann wählen, den Ton des Videos einzuschalten, indem sie auf die Stummschalttaste in den Videosteuerungen klicken.

Die Verwendung des muted-Attributs in Kombination mit autoplay ist eine gute Möglichkeit, eine ansprechendere Benutzererfahrung zu bieten und gleichzeitig die Autoplay-Richtlinien der Browser und die Präferenzen der Benutzer zu respektieren. Es ermöglicht Ihnen, Videoinhalte zu präsentieren, ohne den Benutzern unerwünschten Ton aufzuzwingen.

Beachten Sie, dass selbst mit dem muted-Attribut einige Browser das automatische Abspielen in bestimmten Situationen blockieren können, beispielsweise wenn der Benutzer eine Einstellung vorgenommen hat, um alle automatisch abspielenden Videos zu blockieren. Es ist immer eine gute Praxis, den Benutzern klare Steuerelemente bereitzustellen, um Videos nach Bedarf abzuspielen, zu pausieren und die Stummschaltung aufzuheben.

Breiten- und Höhenattribute

Die Attribute width und height im <video>-Element ermöglichen es Ihnen, die Größe des Videoplayers auf der Webseite festzulegen. Diese Attribute steuern die Größe des Videoplayers und helfen dabei, das Video gut in Ihr Seitenlayout einzupassen.

Um die Videogröße festzulegen, fügen Sie die Attribute width und height zum <video>-Tag hinzu und geben Sie die Werte in Pixeln an:

<video src="video.mp4" width="640" height="360" controls>
  Ihr Browser unterstützt das Video-Element nicht.
</video>

Der Videoplayer wird eine Breite von 640 Pixeln und eine Höhe von 360 Pixeln haben.

Beachten Sie bei der Festlegung der Videogröße das Seitenverhältnis des Videos. Das Seitenverhältnis ist das Verhältnis der Breite zur Höhe des Videos. Die gängigsten Video-Seitenverhältnisse sind 16:9 (Breitbild) und 4:3 (Standard).

Wenn Sie die Attribute width und height auf Werte setzen, die nicht dem ursprünglichen Seitenverhältnis des Videos entsprechen, kann das Video gestreckt oder gestaucht aussehen. Um dies zu vermeiden, können Sie nur eines der Attribute festlegen und den Browser die andere Größe automatisch berechnen lassen, um das Seitenverhältnis beizubehalten.

<video src="video.mp4" width="640" controls>
  Ihr Browser unterstützt das Video-Element nicht.
</video>

In diesem Fall ist nur das width-Attribut auf 640 Pixel gesetzt. Der Browser berechnet automatisch die richtige Höhe basierend auf dem Seitenverhältnis des Videos und behält so die Proportionen des Videos bei.

Für responsive Videogrößen können Sie CSS verwenden, um die Videogröße in Prozent anstelle von festen Pixelwerten festzulegen. Dies ermöglicht es dem Video, basierend auf der Größe seines Containers oder des Viewports zu skalieren.

<div class="video-container">
  <video src="video.mp4" controls>
    Ihr Browser unterstützt das Video-Element nicht.
  </video>
</div>

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

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

In diesem Beispiel wird das Video in ein Container-Element mit der Klasse video-container platziert. Der Container hat eine Breite von 100% und eine maximale Breite von 640 Pixeln, was seine maximale Größe begrenzt. Das Video selbst hat eine Breite von 100% und eine Höhe von auto, wodurch es proportional innerhalb des Containers skalieren kann.

Durch die Verwendung von responsiven Größentechniken können Sie sicherstellen, dass Ihre Videos sich an verschiedene Bildschirmgrößen und Geräte anpassen und eine bessere Benutzererfahrung auf verschiedenen Plattformen bieten.

Testen Sie Ihre Videos auf verschiedenen Geräten und Bildschirmgrößen, um sicherzustellen, dass sie korrekt angezeigt werden und ihr Seitenverhältnis beibehalten. Bei Bedarf können Sie Media Queries in CSS verwenden, um unterschiedliche Stilregeln basierend auf der Viewport-Größe anzuwenden, was Ihnen mehr Kontrolle über das Aussehen des Videos auf verschiedenen Geräten gibt.

Fallback-Inhalte

Das <video>-Element in HTML5 wird von modernen Browsern unterstützt. Es kann jedoch Fälle geben, in denen der Browser eines Nutzers das <video>-Element oder das angegebene Videoformat nicht unterstützt. In solchen Fällen ist es wichtig, Fallback-Inhalte bereitzustellen, um sicherzustellen, dass Nutzer das Video trotzdem abspielen oder andere Möglichkeiten finden können, den Inhalt anzusehen.

Fallback-Inhalte werden zwischen dem öffnenden <video> und dem schließenden </video>-Tag platziert. Wenn der Browser das <video>-Element unterstützt und das angegebene Videoformat abspielen kann, werden die Fallback-Inhalte ignoriert. Wenn der Browser das <video>-Element oder das Videoformat nicht unterstützt, werden stattdessen die Fallback-Inhalte angezeigt.

<video src="video.mp4" controls>
  <p>Ihr Browser unterstützt das Video-Element nicht.</p>
  <a href="video.mp4">Video herunterladen</a>
</video>

Fallback-Inhalte können Folgendes umfassen:

<video src="video.mp4" controls>
  <img src="fallback-image.jpg" alt="Video-Vorschaubild">
  <p>Ihr Browser unterstützt das Video-Element nicht.</p>
  <a href="video.mp4">Video herunterladen</a>
</video>

Beachten Sie bei der Bereitstellung von Fallback-Inhalten die folgenden bewährten Praktiken:

• Halten Sie den Fallback-Inhalt kurz und informativ und vermitteln Sie klar die Botschaft, dass das Video nicht abgespielt werden kann.
• Geben Sie klare Anweisungen oder Links, um Nutzer anzuleiten, wie sie auf den Videoinhalt auf andere Weise zugreifen können.
• Stellen Sie sicher, dass der Fallback-Inhalt zugänglich und mit Hilfstechnologien wie Screenreadern kompatibel ist.
• Verwenden Sie geeignete Alt-Texte für Bilder, die als Fallback-Inhalt verwendet werden, um den Inhalt des Videos zu beschreiben.

Durch die Einbeziehung von Fallback-Inhalten innerhalb des <video>-Elements können Sie eine gute Erfahrung für Nutzer bieten, deren Browser die Videowiedergabe nicht unterstützen, und sicherstellen, dass sie trotzdem auf Ihre Videoinhalte zugreifen und damit interagieren können.

Barrierefreiheitserwägungen

Bei der Einbettung von Videos auf einer Webseite ist es wichtig, die Barrierefreiheit zu berücksichtigen, um sicherzustellen, dass alle Nutzer, einschließlich Menschen mit Behinderungen, auf die Videoinhalte zugreifen und sie genießen können. Hier sind einige wichtige Überlegungen zur Barrierefreiheit für das <video>-Element:

<video src="video.mp4" controls>
  <track src="captions.vtt" kind="captions" srclang="en" label="Englische Untertitel">
  Ihr Browser unterstützt das Video-Element nicht.
</video>

<div class="video-controls">
  <button class="play-pause" tabindex="0">Abspielen/Pause</button>
  <button class="mute" tabindex="0">Stummschalten/Ton ein</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>

Browser-Unterstützung

Das <video>-Element wird von modernen Webbrowsern unterstützt, einschließlich Chrome, Firefox, Safari, Opera und Microsoft Edge. Diese Browser unterstützen die grundlegenden Funktionen des <video>-Elements, wie das Abspielen von Videodateien, die Verwendung des src-Attributs und die Bereitstellung nativer Videosteuerungen.

Die Browser-Unterstützung für bestimmte Videoformate und Codecs kann jedoch variieren. Die am häufigsten unterstützten Videoformate sind:

Es ist eine gute Praxis, mehrere Videoquellen mit dem <source>-Element innerhalb des <video>-Elements bereitzustellen. Jedes <source>-Element kann ein anderes Videoformat angeben, sodass der Browser das für ihn am besten geeignete Format auswählen kann.

<video controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <source src="video.ogg" type="video/ogg">
  Ihr Browser unterstützt das Video-Element nicht.
</video>

Bei älteren Browsern, die das <video>-Element oder die angegebenen Videoformate nicht unterstützen, ist es wichtig, Fallback-Mechanismen bereitzustellen. Fallback-Inhalte werden zwischen den öffnenden <video>- und schließenden </video>-Tags platziert und angezeigt, wenn der Browser das Video nicht abspielen kann.

Fallback-Inhalte können Folgendes umfassen:

• Textmeldung, die Benutzer darüber informiert, dass ihr Browser keine Videowiedergabe unterstützt
• Links zum Herunterladen der Videodatei
• Alternative Medien, wie ein Bild oder animiertes GIF, das den Videoinhalt darstellt

<video controls>
  <source src="video.mp4" type="video/mp4">
  <source src="video.webm" type="video/webm">
  <p>Ihr Browser unterstützt das Video-Element nicht.</p>
  <a href="video.mp4">Video herunterladen</a>
</video>

Um die Kompatibilität und Zugänglichkeit Ihrer Videoinhalte weiter zu verbessern, sollten Sie Folgendes beachten:

• Verwenden Sie das poster-Attribut, um ein Platzhalterbild anzugeben, das angezeigt wird, bevor das Video abgespielt wird. Dies bietet eine visuelle Darstellung des Videos für Browser, die keine Videowiedergabe unterstützen.
• Stellen Sie Untertitel mit dem <track>-Element bereit, um Ihre Videoinhalte einem breiteren Publikum zugänglich zu machen, einschließlich gehörloser oder schwerhöriger Nutzer.
• Bieten Sie Transkripte und Audiobeschreibungen an, um alternative Möglichkeiten für Nutzer zu schaffen, auf die Videoinhalte zuzugreifen, insbesondere für sehbehinderte Nutzer.

Indem Sie die Browser-Unterstützung berücksichtigen, mehrere Videoquellen bereitstellen und Fallback-Mechanismen implementieren, können Sie Ihre Videoinhalte für ein möglichst breites Publikum über verschiedene Browser und Geräte hinweg zugänglich machen.

Beispiele und Anwendungsfälle

Das <video>-Element in HTML bietet Möglichkeiten, Videoinhalte in Ihre Webseiten einzubetten und zu verwenden. Schauen wir uns einige Beispiele und Anwendungsfälle an, um zu sehen, wie Sie das <video>-Element nutzen können.

<video src="video.mp4" controls>
  <p>Ihr Browser unterstützt das Video-Element nicht.</p>
</video>

<div class="video-gallery">
  <video id="video-player" controls>
    <source src="video1.mp4" type="video/mp4">
    Ihr Browser unterstützt das Video-Element nicht.
  </video>
  <ul class="video-playlist">
    <li><a href="video1.mp4" class="active">Video 1</a></li>
    <li><a href="video2.mp4">Video 2</a></li>
    <li><a href="video3.mp4">Video 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>
    Ihr Browser unterstützt das Video-Element nicht.
  </video>
  <div class="video-overlay">
    <h2>Videotitel</h2>
    <p>Hier steht die Videobeschreibung.</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>