SSV – Einheitlicher Standard für Videos

Der SSV-Standard legt Anforderungen an die Semantik, die Konfiguration von Hintergrund- und interaktiven Videos, Attribute für Safari, Barrierefreiheitsregeln und das Gewicht von Videos fest.

Hintergrundvideo

Das Hintergrundvideo darf die Wahrnehmung des Hauptinhalts nicht beeinträchtigen.

Die wichtigste Aufgabe besteht darin, einen reibungslosen, automatischen und geräuschlosen Start auf allen Geräten zu gewährleisten.

Dazu wird ein strenger Satz von Attributen verwendet:

1. autoplay und muted - sind für die automatische Wiedergabe erforderlich. Dies ist besonders wichtig in Safari, das jede automatische Wiedergabe mit Ton blockiert.
2. loop - sorgt dafür, dass das Video in einer Schleife abgespielt wird.
3. playsinline - ist für iOS von entscheidender Bedeutung, damit das Video auf der Seite und nicht im Vollbildmodus des Players abgespielt 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, sollte die Steuerung vollständig dem Nutzer überlassen bleiben.

Hier sind die Attribute controls zur Anzeige der Standard-Player-Oberfläche und preload="metadata" erforderlich, wodurch Datenverkehr eingespart wird, da nur Informationen zur Dauer und zum ersten Bild geladen werden.

Die Richtlinien der meisten Browser verbieten die automatische Wiedergabe von Ton!

Der Ton darf erst nach einer expliziten Aktion des Nutzers (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 gleichermaßen gut unterstützt. Die Strategie besteht darin, zwei Hauptformate zu verwenden:

1. WebM - ein modernes Format mit guter Komprimierung. Es wird an erster Stelle 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.

Barrierefreiheit nicht vergessen

Das Video muss für alle Nutzer zugänglich sein, einschließlich derjenigen, die Screenreader verwenden oder hörgeschädigt sind.

1. Untertitel - es muss unbedingt eine Text-Spur vorhanden sein, <track>. Dies hilft nicht nur Hörgeschädigten, sondern ist auch nützlich, wenn das Video ohne Ton angesehen wird.

   <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 <video>-Tags wird angezeigt, wenn der Browser das Element überhaupt nicht unterstützt.

Best Practices und Optimierung

1. Optimieren Sie die Größe - Hintergrundvideos sollten nicht größer als 5 MB sein. Verwenden Sie Komprimierung, reduzieren Sie die Dauer und die Bildrate, aber übertreiben Sie es nicht.

2. Verwenden Sie ein Poster - das Attribut poster="preview.jpg" legt ein Ersatzbild fest, das vor dem Laden des Videos angezeigt wird und so die Wahrnehmung und die Darstellungsgeschwindigkeit der Seite verbessert.

3. Machen Sie das Video responsiv - mit CSS können Sie das Video so gestalten, dass es den Bereich wie ein 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 oft mit CSS 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>

Der Artikel wird ergänzt werden