SSV – Einheitlicher Standard für Videos

Der Tag <video> eröffnet vielfältige Möglichkeiten für die Integration von Multimedia-Inhalten in Webseiten. Je nach Aufgabe ändert sich der Ansatz für seine Umsetzung grundlegend.

In diesem Artikel werden wir zwei grundlegende Paradigmen betrachten: Hintergrundvideos ohne Ton und interaktive Videos mit Steuerung.

Hintergrundvideo

Hintergrundvideos dienen dazu, einen dynamischen visuellen Hintergrund zu schaffen, der die Wahrnehmung des Hauptinhalts nicht beeinträchtigen sollte.

Die wichtigste Aufgabe besteht darin, einen reibungslosen, automatischen und geräuschlosen Start auf allen Geräten zu gewährleisten, einschließlich der launischen mobilen Browser.

Dazu wird eine strenge Reihe von Attributen verwendet:

• autoplay und muted – erforderlich für die automatische Wiedergabe. Dies ist besonders wichtig in Safari, das jede automatische Wiedergabe mit Ton blockiert.
• loop – sorgt für die Endloswiedergabe des Videos.
• playsinline – ist für iOS von entscheidender Bedeutung, damit das Video auf der Seite und nicht im Vollbildmodus des Players wiedergegeben wird.

Zusätzliche Attribute wie disablePictureInPicture und preload="auto" helfen dabei, das Verhalten genauer zu steuern und die Benutzererfahrung zu verbessern.

Beispiel für ein Hintergrundvideo:

<video 
  autoplay
  muted
  loop
  playsinline
  disablePictureInPicture
  preload="auto"
  poster="preview.jpg"
  aria-hidden="true"
>
  <source src="bg.webm" type="video/webm">
  <source src="bg.mp4" type="video/mp4">
  <p>
    Ihr Browser unterstützt keine Videos. 
    <a href="bg.mp4">Video herunterladen</a>
  </p>
</video>

Interaktives Video

Wenn das Video den Hauptinhalt darstellt (Schulungsvideo, Präsentation, Interview), sollte die Steuerung vollständig dem Benutzer überlassen werden.

Hier stehen die Attribute controls für die Anzeige der Standard-Player-Oberfläche und preload="metadata" im Vordergrund, wodurch Traffic gespart wird, da nur Informationen zur Dauer und zum ersten Bild geladen werden.

Wichtige Einschränkung: Die meisten Browser verbieten die automatische Wiedergabe von Ton!

Der Ton kann nur nach einer eindeutigen Aktion des Benutzers (z. B. einem Klick auf die Wiedergabetaste) eingeschaltet werden.

<video
  controls
  preload="metadata"
  poster="preview.jpg"
>
  <source src="content.webm" type="video/webm">
  <source src="content.mp4" type="video/mp4">
</video>

Auswahl des Formats

Nicht alle Videoformate werden von Browsern gleich gut unterstützt. Die Strategie besteht darin, zwei Hauptformate zu verwenden:

1. WebM – ein modernes Format mit guter Komprimierung. Es wird als erstes für Browser angegeben, die es verstehen (Chrome, Firefox).

2. MP4 (H.264) – eine universelle "Ersatzoption" mit nahezu hundertprozentiger Unterstützung.

Das MOV-Format (QuickTime) sollte aufgrund von Problemen mit Codecs und der Wiedergabe außerhalb des Apple-Ökosystems vermieden werden.

Vergessen Sie nicht die Barrierefreiheit (Accessibility)

Videoinhalte müssen für alle Nutzer zugänglich sein, auch für diejenigen, die Screenreader verwenden oder hörgeschädigt sind.

1. Untertitel: Es muss unbedingt eine Text-Spur, <track>, vorhanden sein. Dies hilft nicht nur hörgeschädigten Menschen, sondern ist auch beim Ansehen ohne Ton nützlich.

   <track 
     kind="captions" 
     src="captions.vtt" 
     srclang="de" 
     label="Untertitel"
     default
   >

2. Beschreibung für Screenreader: Verwenden Sie ARIA-Attribute (aria-label, aria-describedby) oder einen versteckten Textblock, um blinden Nutzern den Inhalt des Videos zu beschreiben.

3. Fallback-Inhalt: Der Text innerhalb des Tags <video> wird angezeigt, wenn der Browser das Element überhaupt nicht unterstützt.

Bewährte Verfahren und Optimierung

• Größe optimieren: Hintergrundvideos sollten nicht größer als 5 MB sein. Verwenden Sie Komprimierung, reduzieren Sie die Dauer und die Bildfrequenz, aber übertreiben Sie es nicht.

• Verwenden Sie ein Poster: Das Attribut poster="preview.jpg" legt ein Ersatzbild fest, das vor dem Laden des Videos angezeigt wird, wodurch die Wahrnehmung und die Darstellungsgeschwindigkeit der Seite verbessert werden.

• Machen Sie das Video adaptiv: Mit CSS können Sie das Video so einstellen, dass es den Bereich als Hintergrund abdeckt.

  .bg-video {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover; /* Schneidet das Video zu, wobei die Proportionen beibehalten werden */
    object-position: center;
  }

Besonderheiten von Safari und mobilen Browsern

Safari hat strenge Richtlinien für die automatische Wiedergabe. Verwenden Sie für Hintergrundvideos immer die Kombination muted + playsinline. Wenn Sie eine automatische Wiedergabe mit Ton benötigen (was selten gerechtfertigt ist), kann diese nur programmgesteuert als Reaktion auf eine Benutzeraktion (Klick, Scrollen) gestartet werden.

Manchmal werden Standardsteuerelemente in Safari möglicherweise nicht korrekt angezeigt. Das Problem lässt sich häufig mit einer CSS-Regel beheben:

video::-webkit-media-controls {
  display: flex !important;
}

Die Verwendung von !important ist nur in Extremfällen gerechtfertigt!

Abschließende Beispiele

Hintergrundvideo

<video 
  class="bg-video"
  autoplay
  muted
  loop
  playsinline
  poster="sunset-preview.jpg"
  aria-hidden="true"
>
  <source src="header-bg.webm" type="video/webm">
  <source src="header-bg.mp4" type="video/mp4">
</video>

Interaktives Video mit Untertiteln und Beschreibung

<div class="tutorial">
  <video 
    controls
    preload="metadata"
    aria-label="Anleitung zum Zusammenbau eines Skateboards"
    aria-describedby="video-description"
  >
    <source src="tutorial.webm" type="video/webm">
    <source src="tutorial.mp4" type="video/mp4">
    <track label="Untertitel" kind="captions" srclang="de" src="tutorial-captions.vtt" default>
    <p>
      Ihr Browser unterstützt das Videoelement nicht.
      <a href="tutorial.mp4">Anleitung herunterladen</a>.
    </p>
  </video>
  <p id="video-description" hidden>
    Ein fünfminütiger Clip, in dem unser Meister zeigt, wie man ein Skateboard aus fertigen Komponenten zusammenbaut: Achsen, Rollen und Deck.
  </p>
</div>