SSV – Einheitlicher Standard für Videos

Definitionen

Der SSV-Standard legt Anforderungen an die Semantik, Barrierefreiheit und Funktionslogik von Video fest.

Struktur und Semantik

Es wird ein festgelegter 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:

<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>

Wenn das Video den Hauptinhalt darstellt, sollte die Steuerung vollständig dem Nutzer überlassen werden; hier sind die Attribute controls zur Anzeige der Standard-Player-Oberfläche und preload="metadata" erforderlich, was Datenverkehr spart, indem nur Informationen zur Dauer und zum ersten Bild geladen werden, während der Ton erst nach einer expliziten Aktion des Nutzers (z. B. einem Klick auf die Wiedergabetaste) aktiviert werden kann:

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

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

Nicht alle Videoformate werden von Browsern gleichermaßen gut unterstützt; daher sollte man eine Kombination aus WebM, einem modernen Format mit guter Komprimierung, und MP4 als Ausweichoption verwenden.

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

Barrierefreiheit

Das Video muss für alle Nutzer zugänglich sein, einschließlich derjenigen, die Screenreader verwenden oder hörgeschädigt sind. Zu diesem Zweck werden Untertitel, ARIA-Attribute und Text innerhalb von <video> verwendet, falls der Browser das Video nicht unterstützt (was äußerst selten vorkommt):

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

Interaktivität und Visuelle Rückmeldung

Damit der Nutzer schnell und intuitiv mit dem Video interagieren kann, sollte es nicht zu groß sein maximal 5 MB, sofern es sich bei der Website nicht um einen Videohosting-Dienst handelt. Außerdem kann man mit dem Attribut poster="preview.jpg" ein Vorschaubild hinzufügen und das Video responsiv gestalten:

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

Safari

Safari verfolgt strenge Richtlinien hinsichtlich der automatischen 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.

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 class="sr-only" id="video-description">
    Ein fünfminütiger Clip, in dem unser Meister zeigt, wie man ein Skateboard aus fertigen Komponenten zusammenbaut: Achsen, Rollen und Deck.
  </p>
</div>

Plugin

Next Video Plugin