HTML video: Wiedergabesteuerung, Autoplay, responsive Größe und Fehlersuche

HTML video bettet einen Video-Player in eine Webseite ein. Legen Sie die Datei-URL mit src oder untergeordneten source-Elementen fest und fügen Sie controls hinzu, damit Benutzer das Video abspielen und pausieren können. Browserrichtlinien können die automatische Wiedergabe blockieren, selbst wenn Autoplay aktiviert ist.

Wählen Sie Attribute für das Wiedergabeerlebnis

controls, muted, autoplay und loop sind boolesche Attribute. Ihre Anwesenheit aktiviert sie, daher deaktiviert autoplay="false" kein Autoplay. Entfernen Sie das Attribut, um es auszuschalten. Eine Autoplay-Anforderung erfordert das Laden von Medien, daher kann preload="none" allein das Herunterladen nicht verhindern.

Führen Sie ein vollständiges Video-Beispiel aus

Speichern Sie diesen Code als video.html und öffnen Sie ihn in einem Browser. Er lädt das öffentliche Blumenbeispiel, das in der MDN-Dokumentation verwendet wird, und benötigt eine Internetverbindung. Für Ihren eigenen Dienst hosten Sie Videos, deren Nutzung Ihnen erlaubt ist, und ersetzen Sie die URLs.

<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>HTML-Videowiedergabe</title>
  <style>
    body { margin: 24px; font-family: sans-serif; }
    video { display: block; width: 640px; max-width: 100%; height: auto; }
  </style>
</head>
<body>
  <h1>Blumenvideo</h1>
  <video id="flower" controls playsinline preload="metadata" aria-label="Blumen bewegen sich im Wind">
    <source src="https://developer.mozilla.org/shared-assets/videos/flower.webm" type="video/webm">
    <source src="https://developer.mozilla.org/shared-assets/videos/flower.mp4" type="video/mp4">
    Dieser Browser unterstützt das video-Element nicht.
  </video>
  <p>Szenenbeschreibung: Blumen und Gras bewegen sich im Wind.</p>
  <p><a href="https://developer.mozilla.org/shared-assets/videos/flower.mp4"
    target="_blank" rel="noopener noreferrer">MP4-Videodatei öffnen</a></p>
</body>
</html>

1. Suchen Sie nach einem Player mit einer Wiedergabetaste und starten Sie ihn. Die Blumen sollten sich bewegen und die Wiedergabeposition sollte fortschreiten. Das Standardbeispiel hat keine Autoplay- oder Loop-Eigenschaft.
2. Pausieren Sie die Wiedergabe, um die Bewegung zu stoppen. Bei einem schmalen Fenster sollte der Player innerhalb der Inhaltsbreite verkleinert werden.
3. Um die Wiederholung zu vergleichen, fügen Sie nur loop zum öffnenden video-Tag hinzu und öffnen Sie die Datei erneut. Überprüfen Sie, ob die Wiedergabe nach Erreichen des Endes wieder am Anfang beginnt, und entfernen Sie dann das Attribut, um das ursprüngliche Verhalten wiederherzustellen.

source bietet Dateiformate an, sodass der Browser einen unterstützten Kandidaten auswählen kann. Bereiten Sie echte WebM- und MP4-Dateien desselben Videos vor; das Ändern einer Dateinamenerweiterung konvertiert die Formate nicht. Die Wiedergabe hängt auch von den für Video und Audio in einem Container wie MP4 verwendeten Codecs ab.

Autoplay und mobile Größenanpassung

Wenn Sie eine automatische Wiedergabe benötigen, vergleichen Sie, indem Sie autoplay muted zum öffnenden Video-Tag hinzufügen. Behalten Sie playsinline und Steuerelemente bei. Benutzerpräferenzen, Energiesparrichtlinien, die Interaktionshistorie der Website oder andere Browserregeln können Autoplay verweigern, daher behalten Sie eine Wiedergabetaste bei.

Das CSS width: 640px ist die gewünschte Anzeigebreite, während max-width: 100% Überlaufen in einem schmalen übergeordneten Element begrenzt. height: auto bewahrt das Seitenverhältnis des Videos. Wenn Sie einen Rahmen mit festem Verhältnis definieren, bewahrt object-fit: contain die gesamte Szene, während cover den Rahmen durch Zuschneiden einiger Ränder füllt; überprüfen Sie, dass wichtige Inhalte sichtbar bleiben.

Fehlerbehebung bei der Wiedergabe und Überprüfung der Barrierefreiheit

• Datei-URL: Öffnen Sie den Videolink direkt und überprüfen Sie, ob die Datei existiert und ohne Anmeldung verfügbar ist. Stellen Sie sicher, dass kein lokaler Pfad mit einem Serverpfad verwechselt wurde und dass die Groß-/Kleinschreibung des Dateinamens übereinstimmt.
• Format und Antwort: Überprüfen Sie, ob der Server den richtigen MIME-Typ video/mp4 oder video/webm sendet und unterstützte Codecs verwendet. Das Netzwerk-Panel in den Entwicklertools hilft dabei, fehlgeschlagene Anfragen und Antwortheader zu überprüfen.
• Autoplay: Wenn das Drücken von Play funktioniert, unterscheiden Sie zwischen einer Autoplay-Einschränkung und einer defekten Datei.
• Fallback-Anleitung: Text innerhalb des Videos ist für Browser, die das Element nicht unterstützen. In modernen Browsern erscheint dieser Text bei einem Ladefehler nicht automatisch als Fehlermeldung. Das Beispiel legt daher auch einen Dateilink und eine Szenenbeschreibung außerhalb des Players ab.
• Stellen Sie für Videos mit Sprache genaue Untertitel und bei Bedarf ein Transkript bereit. Verbinden Sie Untertitel über das track-Element mit einer WebVTT-Datei. Prüfen Sie Textbeschreibungen oder Audiodeskription für wichtige Informationen, die nur visuell vermittelt werden.

Siehe das MDN Video-Referenz für Attribute und den MDN Leitfaden zu Video-Untertiteln für Untertiteldateien.