Technische Dokumentation - ISB
Utility Film mit HTML5
Utility Film > Tipps&Tricks
----HTML5
Utility Film mit HTML5
Die klassische Lösung
Der Begriff Utility Film ist durch Robert Rotenberger, Geschäftsführer der memex GmbH, eingeführt worden. Deshalb wundert es auch nicht, dass der Riva Producer Enterprise, ein Produkt der memex GmbH, das am weitesten verbreitete Software-Werkzeug zur Erstellung von Utility Filmen ist. Der Riva Producer Enterprise ermöglicht es, auf einfache und schnelle Art und Weise aus Videoaufnahmen einen Utility Film zu produzieren. Er hat in seiner aktuellen Version aber ein paar entscheidende Nachteile.
Das Ausgabeformat
Der Riva Producer gibt die Utility Filme grundsätzlich in einem Flash-Format aus. Zur Darstellung der Utility Filme wird der Riva Player, ebenfalls eine Flash Anwendung, benötigt. Auf der PC-Plattform stellt das kaum ein Problem dar, da weit über 90 Prozent aller mit dem Internet verbundenen PCs über einen Flash Player verfügen. Ganz anders sieht das aber bei Smartphones und anderen mobilen Endgeräten aus. Viele dieser Geräte sind nicht in der Lage, Flash Inhalte darzustellen. Die Firma Apple verbietet für ihr iPhone sogar ausdrücklich die Benutzung von Flash.
Das bisherige Konzept
Beim Einsatz des Utility Films in Unternehmen ergeben sich schnell spezifische Anforderungen. So soll z.B. der Utility Film in ein Ersatzteil-Bestellsystem eingebunden werden oder die Darstellung soll deutlich vom Standard abweichen, um dem Corporate Design des Unternehmens zu entsprechen. Die Software Riva Producer stösst hier schnell an ihre Grenzen. Schon der Austausch der Standard-Navigations-Schaltflächen durch selbstdefinierte Schaltflächen ist nicht vorgesehen. Jede Abweichung vom Standard führt somit schnell zu hohen Aufwänden und Kosten.
Alternativen
Auf der Suche nach Alternativen findet man eine Reihe von sogenannten Autorensystemen, die ebenfalls zur Erstellung von Utility Filmen genutzt werden können. Sie sind in der Regel deutlich flexibler und funktionsreicher als der Riva Producer. Das bringt aber auch einen deutlich höheren Einarbeitungsaufwand mit sich. Da Autorensysteme nicht direkt für den Utility Film geschrieben sind, gestaltet sich die Erstellung eines Utility Films meist aufwändiger als im Riva Producer.
Utility Film
HTML5
Mit dem neuen Internet-Standard HTML5 erwächst allen Lösungen, die einen eigenen Player benötigen, aber eine ernstzunehmende Konkurrenz. HTML5 ist in der Lage, Videos ohne externen Player abzuspielen. Es werden also kein Flash, Siverlight oder ähnliche zusätzliche Software benötigt.
HTML5 wird derzeit schon von den meisten Intenet-Browsern unterstützt, es fehlt zur Zeit nur noch der Microsoft Internet Explorer. Aber auch Microsoft hat für die neue Version seines Browsers die HTML5-Unterstützung angesagt. Ende September 2010 veröffentlichte Microsoft eine öffentliche Beta-Version des Internet Explorer 9, bei der man diese Funktionalität schon testen kann. Voraussichtlich mit dem Jahreswechsel 2010/2011 wird die endgültige Version des Internet Explorer 9 auf dem Markt sein. Da Microsoft die neue Version über seinen Update-Dienst an alle Windows-Nutzer verteilen wird, kann man davon ausgehen, dass Mitte 2011 die meisten Internet-Nutzer über einen Browser verfügen, der HTML5 (und damit Videos) unterstützt.
Die Situation bei den mobilen Geräten, wie z.B. Smartphones, sieht hier heute schon besser aus. Fast alle Geräte unterstützen zumindest Teile des HTML5-Standards. Es muss jedoch im Einzelfall darauf geachtet werden, dass nur die Teile des Standards genutzt werden, die vom Zielgerät auch unterstützt werden.
Das Einbinden eines Videos in eine HTML5-Seite gestaltet sich sehr einfach. Der folgede HTML-Code zeigt ein Beispiel:
Einfaches Video in HTML5
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Utility Film in HTML5</title>
</head>
<body>
<video src="video01.ogv" autoplay="autoplay" >
Das Video kann nicht angezeigt werden.
</video>
</body>
</html>
Der entscheidende Teil in diesem Code-Beispiel ist das video-Tag. Wie man erkennen kann, muss hier lediglich die Videodatei als Quelle angegeben werden. Der Text, der innerhalb des video-Tags steht ("Das Video kann nicht angezeigt werden."), ist nur für Browser gedacht, die mit dem video-Tag nichts anfangen können. Diese Browser zeigen diesen Text an. Hier könnte z.B. auch ein Hinweis erscheinen, der zur Installation einer aktuellen Browser-Version auffordert.
Video-Formate
Wo Licht ist, ist auch Schatten. Und so ist es auch bei der Video-Unterstützung der verschiedenen Browser in HTML5. Der Standard legt zwar fest, wie ein video-Tag aufgebaut sein muss, über das eigentliche Video-Format gibt es jedoch keine Einigkeit zwischen den Browser-Herstellern. Zur Zeit konkurrieren mindestens 3 Video-Formate um die Vorherrschaft im Web. Der HTML5-Standard berücksichtigt diesen Umstand aber, indem er es ermöglicht, mehrere Angaben über die Video-Datei zu machen. Der Browser sucht sich dann aus der Liste die Datei aus, die er anzeigen kann.
Lizenzprobleme bei Videoformaten
Der Wildwuchs bei den unterschiedlichen Videoformaten in HTML5 entsteht hauptsächlich auf Grund von Lizenzproblemen bzw. -unsicherheiten für die unterschiedlichen Verfahren zur Komprimierung von Videos. Die Algorithmen, mit denen ein Video komprimiert wird, damit es eine handhabbare Größe bekommt, sind in vielen Fällen durch Lizenzrechte geschützt. Aus diesem Grund gibt es Versuche, offene Standards für die Video-Kompression zu erstellen.
Ein offenes Verfahren bietet z.B. das Ogg-Format. Die Algorithmen und Programme, die hier zur Anwendung kommen, sind Open Source und damit von jedem einsehbar. Trotzdem ist es umstritten, ob nicht auch hier geschützte Algorithmen verwendet werden.
Google versucht diesem Problem damit zu begegnen, dass sie ein eigenes Format veröffentlicht (WebM) und für dieses Format erklärt haben, dass Google das Format zeitlich unbegrenzt lizenzfrei zur Verfügung stellt.
Einbindung unterschiedlicher Videoformate
<head>
<title>Utility Film in HTML5</title>
</head>
<body>
<video autoplay="autoplay" >
<source src="video01.mp4" type="video/mp4" />
<source src="video01.webm" type="video/webm" />
<source src="video01.ogv" type="video/ogg" />
Das Video kann nicht angezeigt werden.
</video>
</body>
</html>
Es existieren entsprechende Tools, die die verschiedenen Video-Formate ineinander umwandeln können. Trotzdem bleibt natürlich der Umstand, dass die Videos in verschiedenen Formaten erstellt und bereitgestellt werden müssen.
Steuerelemente für den Utility Film
Die bisherigen Beispiele zeigen nur ein Video in einer HTML-Seite. Ein Video ist aber noch kein Utility Film, es fehlen noch die Steuer- und Anzeige-Elemente. In HTML ist es möglich, mehrere Ebenen übereinander zu legen, so dass beliebige Elemente (Text, Bilder ...) über dem Video liegen können. Dazu wird jede Ebene in ein div-Element verpackt, dessen Position festgelegt wird.
Mehrere Ebenen zur Anzeige von Steuerlementen
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Utility Film in HTML5</title>
</head>
<body>
<div style="position:absolute;left:100px;top:50px">
<video src="video01.ogv" autoplay="autoplay" >
Das Video kann nicht angezeigt werden.
</video>
</div>
<div style="position:absolute;left:100px;top:50px">
Hier könnten die Steuerelemente stehen.
</div>
</body>
</html>
Für einfache Steuerlemente, wie z.B. die Schaltflächen zum Wechseln zwischen den Clips, reichen einfache Bilder im Format JPEG oder PNG aus. Für funktional weitergehende Objekte, wie z.B. ein Fortschrittsbalken, benötigt man Elemente, die animiert werden können.
Auch hier bietet HTML5 eine Lösung. Der HTML5-Standard unterstützt das Einbinden von SVG-Grafiken. Das SVG-Format ist ein XML-Format zur Beschreibung von Vektorgrafiken und einfachen Animationen. Außerdem lassen sich SVG-Elemente direkt mit HTML-Seiten verlinken. Schreibt man die HTML-Datei im XHTML-Format, können die SVG-Elemente sogar direkt in die Datei eingebunden werden.
Das folgende Beispiel legt zwei einfache rote Dreiecke über das Video, die anklickbar sind und auf den vorherigen bzw. nachfolgenden Clip verlinken.
Das SVG-Format
Das SVG-Format ist nicht neu. Die erste Version des Standards wurde schon 2001 veröffentlicht. Viele Browser, wie z.B. Firefox oder Opera, unterstützen das SVG-Format schon länger. Einzig der Internet Explorer benötigte hier bisher ein PlugIn. Ein solches PlugIn von Adobe stand auch kostenlos zur Verfügung. Allerdings hat Adobe mit dem Erwerb des Unternehmens Macromedia, und damit auch des Flash-Formats, das Interesse an SVG verloren. Somit wurde das PlugIn nicht weiterentwickelt und steht jetzt auch nicht mehr zur Verfügung.
Mit der Version 9 wird der Microsoft Internet Explorer das SVG-Format aber auch direkt unterstützten, so dass kein PlugIn mehr notwendig ist.
Utility Film mit Steuerelemente in SVG
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Utility Film in HTML5</title>
</head>
<body>
<div style="position:absolute;left:100px;top:50px">
<video src="video01.ogv" autoplay="autoplay" >
Das Video kann nicht angezeigt werden.
</video>
</div>
<div style="position:absolute;left:100px;top:50px">
<svg xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlnik="http://www.w3.org/1999/xlink"
viewBox="0 0 720 576"
width="720px" height="576px">
<a xlink:href="video03.ogv">
<polygon points="620 20, 700 70, 620 120" style="stroke:none; fill:#ff0000;"/>
</a>
<a xlink:href="video01.ogv">
<polygon points="130 20, 130 120, 50 70" style="stroke:none; fill:#ff0000;"/>
</a>
</svg>
</div>
</body>
</html>
SVG-Dateien sind zwar recht einfach aufgebaut, können bei aufwändigen Grafiken und Animationen aber doch sehr lang werden. Die meisten verbreiteten Vektorgrafik-Programme (z.B. Inkscape, CorelDraw) unterstützen das Format aber direkt. So können Steuerelemente, Symbole und Animationen komfortabel erstellt und einfach in den Utility Film eingebunden werden.
Ein Beispiel, wie sich ein Utility Film mittels angepasstem HTML5 auch auf dem iPad darstellen lässt, finden Sie hier.