HTML5 Video

…ein Videoabend mit vielen Fallbacks

Henning über Webdesign

VHS gegen Video2000, Flash gegen HTML5…
Um ein Filmchen in die Webseite einzubetten, dafür waren schon einige Zeilen Code vonnöten, die es ermöglichten, den einzelnen Browsern gerecht zu werden. Der folgende Ausschnitt zeigt den „old fashioned way“ z.B. einen YouTube Film auf der eigenen Webseite einzubetten.


<object width="480" height="385">
   <param name="allowFullScreen" value="true" />
   <param name="allowscriptaccess" value="always" />
   <param name="src" value="video.mp4" />
   <embed type="application/x-shockwave-flash" width="480" height="385" 
     src="video.mp4" allowscriptaccess="always" allowfullscreen="true">
   </embed>
</object>

Ein ganz schöner Klotz! Aber mit HTML5 wird alles besser… bestimmt!? In HTML5 kann eine Video-Datei mit folgendem kurzen Statement eingebaut werden:


<video width="480" height="385" src="video.mp4">
   <p>...da hilft nur der <a href="video.mp4">Download des Videos</a></p>
</video>

Dem <video> Tag können eine Vielzahl von Parametern mitgegeben werden:

autoplay
Die Wiedergabe startet von selbst wenn die Seite geladen ist.


<video src="abc.mov" autoplay>
</video>

controls
Mit dem control Attribut können eigene Buttons und Grafiken für das UI des Players referenziert werden.

poster
Mit dem poster Attribut kann ein Frame des Videos als Vorschaubild verwendet werden (*.jpg, *.png, *.gif, …), z.B. auch wenn der Film aus irgendwelchen Gründen nicht startet.


<video width="640" height="360" src="video.mp4" poster="poster.png">
   <p>...da hilft nur der <a href="video.mp4">Download des Videos</a></p>
</video>

preload
preload lädt den Film beim Laden der Seite. Der Film wird dann im Hintergrund zwischengespeichert, was das Videovergnügen etwas verbessern soll. Fairerweise muss man an dieser Stelle erwähnen, dass es in der Natur der Browser liegt eingebetteten Video-Content sowieso herunterzuladen…
Werden preload und autoplay gleichzeitig verwendet, so wird preload-Attribut ignoriert.

Was kann ich eigentlich abspielen

Momentan werden zwei verschiedene Video-Codecs unterstützt – Ogg Theora (OGG – *.ogv) und MP4 (h.264 – *.mp4).

<video> erlaubt es, beide Codecs als Fallback einzubinden:


<video>
	<source src="video.ogg" type="video/ogg" />
	<source src="video.mp4" type="video/mp4" />
</video>

Die einzelnen Browser zeigen sich wie meistens allerdings wählerisch und unterstützen meistens nur ein Format. Grundsätzlich ist dieser Ansatz nicht gerade ressourcenschonend, da man das zu integrierende Video immer in mindestens zwei Versionen vorliegen haben muss. Eine Standardisierung täte an dieser Stelle Not. Eine Liste welche Browser den video-Tag unterstützen findet sich auf Video on the Web.

Die Attribute vom Typ boolean werden in HTML5 sehr oft durch einfache Nennung des Attributes gesetzt. Ist das Attribut vorhanden bedeutet das true.

A number of attributes in HTML5 are boolean attributes. The presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value.

Die Attribute width, height und src halten was sie versprechen und können entsprechend ihrer Funktion in anderen TML-Tags verwendet werden.

Fazit und Referenzen

Na ja, noch läuft die Sache nicht so rund wie gewünscht. Auch die verschiedenen Codec-Anforderungen tragen nicht dazu bei, dass man als Entwickler gleich in eine HTML5-Video-Hysterie verfallen sollte. Kann man es allerdings gar nicht erwarten und möchte es trotzdem allen recht machen, muss man wieder zu Fallbacks greifen…


<video width="480" height="385" src="video.mp4" poster="poster.png">
   <object classid="clsid:02bf25d5-8c17-4b23-bc80-d3488abddc6b" width="480" 
     height="385" codebase="http://www.apple.com/qtactivex/qtplugin.cab">
      <param value="video.mp4">
      <param value="true">
      <param value="false">
      <embed src="video.mp4" width="480" height="385" 
        pluginspage="http://www.apple.com/quicktime/download/">
      </embed>
   </object>
</video>

Verglichen mit dem Codebeispiel ganz am Anfang, hat man – wenn man ehrlich ist – nichts gewonnen, sondern eher noch ein paar Zeilen Code ‚draufgelegt. Aber, alles wird besser werden… bestimmt! …alle Links zum Nachlesen:

Informationen über den Autor

Henning

...ist ein User Interface und User Experience Designer. Nebenbei Frontend Developer für Web-, Desktop- und mobile Plattformen. Mit mehr als 10 Jahren professioneller Projekterfahrung schreibt er zu den Themen Webdesign, -trends und -programmierung – eben fullstack! Follow @kingfries