Mit HTML5 zum interaktiven Video
Kommentare

Seit der Einführung von HTML5 als Webstandard ist das Einbetten von Video-Content in eine Website genauso einfach wie das Einbetten von Bildern. Dafür genutzt wird das -Element, das dafür sorgt, dass

Seit der Einführung von HTML5 als Webstandard ist das Einbetten von Video-Content in eine Website genauso einfach wie das Einbetten von Bildern. Dafür genutzt wird das Element, das dafür sorgt, dass Videos in allen großen Browsern zufriedenstellend abgespielt werden. Doch HTML5 bietet noch mehr Möglichkeiten, den eingebetteten Videos den letzten Schliff zu verleihen. Was man dafür braucht und welche Möglichkeiten es gibt, Videos interaktiv darzustellen, beschreiben Jeroen Wijering und Robert Nyman in einem Blogpost.

Element sorgt für interaktive Video-Darstellung

Videos mit HTML5 interaktiv darstellen und für den Betrachter zugänglich zu machen, ist mit der Verwendung des -Elements keine Schwierigkeit. Eigentlich wird das Element dazu genutzt, Closed Captions aus einer separaten Textdatei über das Ende des Video-Displays zu legen und sie so zur Video-Timeline hinzuzufügen.

Darüber hinaus bietet es aber auch drei weitere Möglichkeiten, die Interaktions-Optionen von Videos voll auszuschöpfen, die Wijering und Nyman zusammengefasst haben.

Kapitelzeichen, Vorschau-Thumbnails, Timeline-Suche

Zwischen Kapiteln zu wechseln, ist etwas, was man von DVD-Menüs kennt. Doch auch bei Videos, die im Netz dargestellt werden, können mithilfe eines HTML-Elements Kapitelzeichen zur Timeline hinzugefügt und zwischen ihnen hin- und hergesprungen werden.

Viel nötig ist dafür nicht. Die Kapitelzeichen werden aus einer externen VTT-Datei mithilfe eines Elements auf der Seite dargestellt. Mit JavaScript werden dann die Cues für den nächsten Text-Track geladen, formatiert und in der Controlbar unter dem Video angezeigt.

Anschließend lassen sich mit einem data-Attribut die Kapitelstartposition festlegen und eine externe Seek-Funktion mit einem Click-Handler hinzufügen.

Um Vorschau-Thumbnails, die über der Video-Controlbar erscheinen, einzubinden, wird ebenfalls mit einer separaten VTT-Datei gearbeitet. Statt Text enthält sie Links zu unterschiedlichen JPG-Dateien. Mit einem mousemove Listener wird dann der Thumbnail an die richtige Stelle platziert und mit den Cues verbunden.

Eine besonders nützliche Funktion, die sich mit Elementen umsetzen lässt, ist die Timeline-Suche. Mit ihr lässt sich der Videoinhalt durchsuchen. Nötig ist dafür eine Caption-VTT-Datei, die in ein captions-Track geladen wird. Unter das Video und seine Controlbar wird ein Suchformular eingefügt und mit einem Event-Handler versehen.

Diese Tipps von Wijering und Nyman zeigen anhand von verschiedenen Codebeispielen zu den einzelnen Tipps, dass das Einbetten von interaktiven Videos mit HTML5 kein Hexenwerk sein muss. Das Element ist ein einfacher Weg, Videos auf der eigenen Website interaktiv zu gestalten, der sogar Cross-Browser-kompatibel ist. Pluspunkt für Web-Designer: die Website-Nutzer freuen sich über eine höhere Zugänglichkeit der Videos und sorgen damit für besseres Interagieren des Website-Besuchers mit dem Video-Content.

Aufmacherbild: Laptop with reel von Shutterstock / Urheberrecht: Horoscope

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -