HTML5-Videos: diese drei Features erleichtern den Umgang mit Video-Content
Kommentare

HTML5 bietet als Webstandard für unterschiedliche Bereiche viele Möglichkeiten, Content im Web aufzubereiten. Gerade auch, um Videos in Websites zu integrieren, stellt HTML5 Webdesignern verschiedene Möglichkeiten zur Verfügung, mit denen sich Videos einbinden lassen. Armando Roggio hat drei besonders nützliche HTML5-Video-Features vorgestellt.

Medienfragmente, dynamische Thumbnails und das-Element in HTML5-Videos

Videos lassen sich mit HTML5 dank verschiedener Techniken leicht in eine Website einbinden. So lassen sich mit Medienfragmenten bestimmte Start- und Endzeitpunkte eines Videos festlegen, indem die entsprechenden Zeiten in der Video-Quell-URL definiert werden. Gewöhnlich werden die Zeitpunkte im Format Minute-Sekunde angegeben, allerdings kann auch ein Stunde-Minute-Sekunde-Format spezifiziert werden. Hat ein Video zum Beispiel mehrere Übergänge, können diese mit data-Attributen versehen werden, um das Einfügen der zeitbasierten Medienfragmente zu vereinfachen.

HTML5-Videos ermöglichen auch das Anzeigen von On-Screen-Text, der auf den Video-Content abgestimmt ist. Besonders nützlich ist diese Methode für das Hinzufügen von (übersetzten) Untertiteln, Kapiteln oder einer zusätzlichen Beschreibung der Video-Geschehnisse. Dafür wird ein -Element eingesetzt, in welchem die Art des Text und dessen Quelle mithilfe zusätzlicher Attribute wie label, kind, srclang oder default definiert wird. Notwendig ist in jedem Fall die URL der im WebVTT-Format vorliegenden Text-Datei in einem scr-Attribut.

Ein weiterer großer Vorteil von HTML5-Video ist, dass es mit anderen HTML-Elementen interagieren kann – etwas, was zum Beispiel Third-Party-Plug-ins nicht oder nur begrenzt können. So lässt sich beispielsweise ein Video zum HTML-Dokument hinzufügen, ein canvas-Element erstellen und dann in regelmäßigen Abständen das aktuelle Bild festhalten und anzeigen. Nützlich ist dies zum Beispiel beim Erstellen dynamischer Thumbnails.

Einige Beispiele, wie Medienfragmente, das-Element und dynamische Thumbnails eingesetzt werden können, zeigt Armando Roggio in seinem Artikel zum Thema. Dort finden sich nicht nur mehrere Demos, sondern auch die entsprechenden Code-Beispiele. In jedem Fall bieten diese drei HTML5-Video-Features viele verschiedene Einsatzmöglichkeiten und erleichtern den Umgang mit Videos in der eigenen Website.

Aufmacherbild: Smart keyboard with color button, image and text von Shutterstock / Urheberrecht: LanKS

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -