Leitfaden Videomaterial

Beim Einsatz von Videos in Websites spielt u. a. die Dateigröße eine große Rolle. Nachfolgend haben wir für Sie einige wissenswerte Informationen zusammengestellt, die Sie bei der Auswahl und Anlieferung des Videomaterials unterstützen sollen.

Einsatzmöglichkeiten

Auf Websites kommen Videos sowohl als Inhaltselement als auch als dekoratives Element zum Einsatz.

Als Inhaltselement

Diese Videos werden vom User aktiv über den in der Website eingebundenen Videoplayer abgespielt. Das Video kann hoch- und/oder querformatig sein. Im Videoplayer hat man Möglichkeiten zur Regulierung der Lautstärke.

Gängige Seitenverhältnisse: 4:3, 16:9 oder entsprechendes Hochformat

video-desktop
Video im Querformat auf Desktop-Computer
video-mobil
Video im Hochformat auf Mobilgerät

Als dekoratives Element

Diese Videos werden normalerweise automatisch abgespielt und haben keine typischen Schaltflächen eines Videoplayers.

Videos, die ohne Benutzerinteraktion abgespielt werden, z. B. Videos als Hintergrund, werden von Browsern automatisch ohne Ton abgespielt. Für rein optisch genutzte Videos, muss eine Tonspur also nicht entfernt werden, aber das Entfernen der Tonspur bringt Einsparungen bei der Dateigröße.

Eigenschaften

Dateiformat

Für den Einsatz in Websites wird das Videoformat MP4 benötigt. Der Videoinhalt in einer MP4-Datei wird mit dem Standard "MPEG-4 AVC" kodiert.

Auflösung

Nachfolgende Tabelle zeigt die unterschiedlichen Standardauflösungen, die Videos haben können sowie eine Übersicht, welche Bitraten zu empfehlen sind, damit die Dateigröße im Rahmen bleibt.

Bezeichnung

Auflösung

Gute Bitrate 🟢

Noch okay 🟠

Schlecht 🔴

SD

480p

640 × 480px

≤ 4

4–6

> 6

HD

720p

1.280 × 720px

≤ 8

8–12

> 12

Full HD

1080p

1.920 × 1.080px

≤ 12

12–18

> 18

2K

1440p

2.560 × 1.440px

≤ 16

16–24

> 24

4K

2160p

4.096 × 2.160px

≤ 32

32–48

> 48

8K

4320p

7.680 × 4.320px

≤ 96

96–144

> 144

Für den Einsatz in Websites ist eine HD-Auflösung empfehlenswert. Noch höhere Auflösungen führen zu unnötig großen Dateien. Dies ist insbesondere dann sehr unvorteilhaft, wenn Websitebesucher das Video über ihre Mobilfunkverbindung ansehen.

Optimierung von Videos

Anders als bei Fotos sollte das Video schon beim Upload eine möglichst geringe Dateigröße haben. Hierfür kann man die Kompression des Videos mittels Software optimieren. Hierbei gilt es natürlich nicht zu stark zu komprimieren, da ansonsten die Bildqualität zu sehr leidet. Die obenstehende Tabelle gibt einen guten Anhaltspunkt, welche Bitraten empfehlenswert sind.

Bildwiederholrate

Videos sollten für das Web üblicherweise in maximal 30 FPS (Bilder pro Sekunde) vorliegen. Noch höhere Bildwiederholraten führen wieder zu unnötig großen Dateien.

Komprimierung

Als Zielwerte bei der Komprimierung von Videos dienen die in der o.g. Tabelle genannten Werte.

Eine sinnvolle Dateigröße für den Einsatz in Websites liegt also bei der genannten HD Auflösung mit 30 FPS und der o.g. guten Bitrate von maximal 8bps bei maximal 60 MB pro Minute Spielzeit.

Um das bestmögliche Ergebnis zu erzielen, kann es erforderlich sein, mehrere Versuche zu unternehmen, in denen man die Komprimierungseinstellungen verändert sowie Quell- und Zieldatei anschließend in Bezug auf die Bildqualität miteinander vergleicht.

Zur Komprimierung von Videodateien empfehlen wir das kostenlose Tool "HandBrake", das man unter folgendem Link downloaden kann:

https://handbrake.fr/

Systemvoraussetzungen unter Windows/Linux: mindestens 16 GB RAM Arbeitsspeicher.

Barrierefreiheit von Videos

Um Menschen mit Behinderungen den barrierefreien Zugang zu Videos zu ermöglichen, gibt es gemäß BITV 2.0 zusätzliche Anforderungen an Videos, die in Websites als Informationsquelle dienen.

Untertitel

Wenn die Tonspur eines Videos Informationen enthält, müssen Untertitel als Alternative bereitgestellt werden. Es gibt sozusagen zwei verschiedene Ausbaustufen:

  1. Normale Untertitel ("Subtitles") - diese enthalten nur den gesprochenen Text - nicht aber z. B. Geräusche etc.

  2. Closed Captions (CC) - diese enthalten auch textliche Angaben zu Geräuschen, Musik oder anderen Tonereignissen.

Der Benutzer entscheidet, welche Ausbaustufe für das Video gewünscht und sinnvoll ist und lädt eine entsprechende Datei hoch.

Untertitel werden in Form einer VTT-Datei zusätzlich zur Videodatei benötigt. VTT-Dateien sind Textdateien, die im WebVTT-Format (Web Video Text Tracks) gespeichert wurden.

In unserem Videoplayer werden die Untertitel mit dem CC-Button ein- und ausgeblendet. Der CC-Button wird natürlich nur angezeigt, wenn Untertitel hochgeladen wurden.

Beispiel.vtt (im Texteditor öffnen)

untertitel-1
Beispiel Darstellung eines Untertitels

Zum automatischen Generieren und Editieren von Untertiteln, empfehlen wir das kostenpflichtige aber günstige Online Tool "Happy Scribe", das man unter folgendem Link downloaden kann:

https://www.happyscribe.com/de

Videodeskription

Wenn die Bildspur eines Videos Informationen enthält, welche nicht aus der Audiospur hervorgehen, muss eine Videodeskription als Alternative bereitgestellt werden. In dieser werden die visuellen Inhalte beschrieben.

Eine solche Datei wird ebenfalls im WebVTT-Format hochgeladen. Sollte eine solche Datei existieren, werden die darin befindlichen Informationen zusätzlich zu den Untertiteln an entsprechender Stelle im Transkript eingefügt.

Transkript

Ein Video-Transkript stellt die Informationen des Videos in zusammengefasster Textform bereit. Das Transkript wird automatisch aus der hochgeladenen Untertitel-Datei (VTT) generiert. Es muss nicht extra angegeben werden.

In unserem Videoplayer wird das Video-Transkript mit dem Transkript-Button (links neben dem CC-Button) ein- und ausgeschaltet. Der Button wird ebenfalls natürlich nur angezeigt, wenn eine Untertitel-Datei zu dem Video vorliegt.

untertitel-2
Beispiel Darstellung eines Transkripts in Kombination mit Untertiteln. Der Text wird an der aktuellen Videoposition gehighlighted.

Vorschaubilder erstellen

Um ein Vorschaubild für ein Video zu generieren sollte man dieses Standbild nicht über die Screenshotfunktion erzeugen, denn dort hat man qualitative Verluste, u.a. da ja das Standbild in so einem Fall immer aus dem gerade auf dem Bildschirm angezeigten Bild und nicht dem Originalbild erzeugt wird. Diese Qualitätsverluste können sich bei der Weiterverarbeitung für andere Dateiformate und/oder Bildschirmauflösungen noch vergrößern.

Wir empfehlen daher, die Standbilder mittels Software aus dem Video zu generieren. Nachfolgend ein paar Beispiele.

Windows

Ultimate Video Frames Extractor – Herunterladen und...

Mac

‎SnapMotion Unlimited

Zudem lassen sich auch einzelne Bilder über den kostenlosen VLC Media Player generieren:

image_vlc

Published with Nuclino