video_feat-205x115Die Integration eines Videoclips auf der eigenen Webseite war bisher nur durch die Verwendung zusätzlicher Software wie Adobe Flash, Microsoft Silverlight oder anderen Plugin-Technologien möglich. Mit der Verbreitung von HTML5-fähigen Browsern hält nun das Video-Element Einzug in die Hypertext Markup Language.

Ein Video einbinden

Es könnte so einfach sein. Um ein Video auf der eigenen Webseite anzuzeigen, deklariert man einfach

<video src="http://meineseite.de/media/video.mp4"></video>

und öffnet die Seite mit einem modernen Browser

black-video-screen-595x220

Ganz so leicht geht es dann aber doch nicht. Man wird nur ein schwarzes Rechteck zu Gesicht bekommen, falls der passende Video-Codec vom Browser unterstützt wird, ansonsten eine Fehlermeldung, die besagt, dass die angegebene Quelle nicht unterstützt wird.

Anwender haben dem Video-Element mehr Informationen mitzugeben, damit ein Video auf der Webseite auch abgespielt werden kann.

Video-Element-Attribute

Das Video Element verfügt über eine Reihe von Attributen, die man angeben kann:

  • controls
  • autoplay
  • loop
  • preload
  • poster
  • width
  • height
  • src

Ergänzt man das Beispiel von oben mit dem Attribut „controls“ werden die Standard Bedienelemente des Browsers für die Steuerung des Videos eingeblendet.

video-controls-IE-595x339

Die übrigen Attribute bewirken Folgendes:

  • „autoplay“ macht genau das, was der Name vermuten lässt. Das Attribut spielt das Video nach dem Laden sofort ab.
  • „loop“ wiederholt das Video und startet es erneut, sobald es zu Ende ist.
  • „preload“ erlaubt dem Website-Betreiber, das Ladeverhalten zu ändern. Das Video wird normalerweise sofort mit der Referenzierung geladen, sobald das Element im Browser gezeichnet wird. Dieses Verhalten kann man entweder per „none“ abstellen oder per „metadata“ auf die Metadaten beschränken. Letzteres erlaubt das Verarbeiten der Videodaten zur Anzeige, um zum Beispiel die Länge anzuzeigen. Für Video-Portale ist es sinnig, das automatische Laden von vielen Videos zu unterbinden. Erst durch die Auswahl des Benutzers sollte man dann die entsprechende Quelle laden und abspielen.
  • „poster“ definiert eine Grafik, die angezeigt wird, solange das Video noch nicht läuft.
  • „src“ gibt die Quelle des Videos an. Dieses Attribut lässt sich auch als einzelnes Element innerhalb des „video“-Elements deklarieren, was eigentlich die Regel ist, denn es gibt noch eine zweite Sache,  die zum Abspielen des Videos notwendig ist.

Der Video Codec

Je nach verwendeten Browser werden unterschiedliche Video-Codecs unterstützt. Nach heutigem Stand bieten sich zur Wiedergabe von Video-Inhalten folgende Codecs an: „H.264“, „Theora“ und „WebM“. Theora und WebM sind Open-Source-Codecs, iH.264 – der mit Abstand am häufigsten genutzte Codec – ist proprietär. Dank der hohen Verbreitung an Medien in diesem Format gibt es auch viele Hardware-Player wie DVD-Player, Fernsehgeräte und Settop-Boxen, die eine direkte H.264 Unterstützung eingebaut haben.

Der richtige Codec

Der Internet Explorer unterstützt H.264 und mit einer nachträglichen Installation auch WebM. Chrome hingegen unterstützt WebM und Theora, hat aber seinen H.264-Support bereits aufgekündigt. Firefox unterstützt Theora und WebM, während Safari von Haus aus H.264 unterstützt und auf iOS nur H.264 unterstützt.

Damit fallen zwangsläufig die Würfel und man sollte seine Videos in allen drei Varianten anbieten, wenn man niemanden außen vor lassen will. So könnte eine Deklaration der Quellen aussehen:

<video controls>
    <source src="http://meineseite.de/media/video.mp4"
     type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
    <source src="http://meineseite.de/media/video.webm"
     type='video/webm; codecs="vp8, vorbis"'/>
    <source src="http://meineseite.de/media/video.ogv"
     type='video/ogg; codecs="theora, vorbis"'/>
</video>

Das Attribut „type“ im Element „source“ kann man weglassen, dann werden Standardwerte für das jeweilige Videoformat genommen.

Mein Browser kann kein HTML5!

Natürlich sollte man auch den Fall der Fälle einplanen: Webseiten-Besucher mit einem nicht HTML5-fähigen Browser. Hier kann man auf die Eigenschaft des Browser-Parsings zurückgreifen. Elemente, die ein Browser beim Parsen der Seite nicht erkennt, werden ignoriert. Dieses Verhalten kann man für eine Fallback-Strategie nutzen, die sich aus zwei Alternativen zusammensetzt:

  1. Das Anzeigen des Videos mit einem Plugin wie Flash, Silverlight, etc...
  2. Die Möglichkeit das Video herunterzuladen

Den Fallback deklariert man innerhalb des „video“-Elements. In diesem Beispiel bieten wir dem Benutzer einen Downoad-Link direkt auf das Video an.

Manipulation mit CSS

Da das „video“-Element nun ein vollwertiges Mitglied der HTML-Familie ist, es sich auch per CSS manipulieren. Der folgende CSS Code wird auf alle „video“-Tags der Seite angewendet.

video:hover {

  // Vendor Prefixe für Internet Explorer und Webkit
  -ms-transform: translate(100px, 100px) rotate(15deg);
  -ms-transition: 2s;

  -webkit-transform: translate(100px, 100px) rotate(15deg);
  -webkit-transition-duration: 2s;
  -webkit-transition-property: all;
  -webkit-transition-timing-function: ease;

  border-radius: 150px 100px 0px 25px;
}

Sobald man mit der Maus über das Video, fährt wird der CSS-Style aktiv und das Video bewegt sich mit einer „ease“-Animation um die Koordinaten 100 Pixel horizontal und 100 Pixel vertikal nach rechts, neigt sich dabei im Winkel von 15 Grad und erhält zudem noch abgerundete Ecken.

video-css3-styled

Mit nur wenig Aufwand lassen sich also erstaunliche Effekte erzeugen.

Manipulation mit JavaScript

Mit JavaScript sind der Kreativität keine Grenzen mehr gesetzt. Video-Elemente lassen sich so dynamisch erstellen, steuern und auch grafisch manipulieren. Die zur Verfügung stehenden Methoden, Eigenschaften und Ereignisse kann man der W3C Spezifikationsdokumentation für das Video-Element bei HTML5 entnehmen. Zum Beispiel erstellt `document.createElement("video");` ein Video-Element:

<script>
  document.addEventListener( "DOMContentLoaded", function() {
    var video = document.createElement("video");

    document.getElementById("container").appendChild(video);

    video.src = "http://meineseite.de/media/video.mp4";
    video.controls = true;
    video.play();
  });
</script>

...

<div id="container"></div>

und die Funktion „play()“ startet es dann. Auch kann man einzelne Frames eines Videos auf einen Canvas kopieren.

// Surface ist hier der Canvas 2d Kontext
surface.drawImage( videoElement, 0, 0 );

So lässt sich das Video parallel in einem anderen Bereich anzeigen, Filter angewendet werden oder eine Video-Preview-Timeline erstellen, wie sie im unteren Bild abgebildet ist.

video-preview-demo-595x368

Der Quellcode für das Beispiel befindet sich als Gist auf Github .

Untertitel? Selbstverständlich!

Videoinhalte lassen sich mit Untertiteln erweitern. Dazu definiert man ein „<track>“-Element innerhalb des Videos.

<track kind="subtitles" srclang="de" label="Deutsche Untertitel" src="de-captions.vtt" default>

Die Angabe der Quelle sollte dem Foramt Timed Text Markup Language (TTML) 1.0 oder Web Video Text Tracks entsprechen. Im Prinzip sind hier Zeitstempel mit den entsprechenden Textpassagen enthalten. Mit mehreren track-Elementen kann man Mehrsprachigkeit realisieren. Hier ein Beispiel , wie der Internet Explorer Untertitel im Video-Control zur Verfügung stellt und anzeigt.

video-with-captions-595x334

Player Frameworks

Alle Browser haben noch eine Sache gemeinsam: Unterschiedlich aussehende Steuerelemente für das Video. So unterscheiden sich die visuellen Controls im Internet Explorer, Safari, Chrome, Firefox und Opera voneinander. Das kann zur Überlegung führen, eigene Controls zu zeichnen, um ein einheitliches Look & Feel über Webbrowser-Grenzen hinweg zu realisieren.

Doch das muss man nicht selbst machen. Hier kann man auf eine Vielzahl von HTML5-Video-Frameworks zurückgreifen, die meist weit mehr als nur das eigentliche Skinning des Players erlauben. Als Beispiel sei der LeanBack Player genannt. Neben CSS-Themes für die Optik bietet er auch ein Plugin-Modell, um zum Beispiel das Analytics-Tool Piwik zu integrieren.

Ready for Prime Time

Es ist gut, dass das Video-Element nun ein Bestandteil eines HTML-Dokumentes ist. Allerdings lassen sich zum derzeitigen Stand noch nicht alle Szenarien mit der Video-Integration abdecken. Video-Streaming (Smooth Streaming) lässt sich momentan nicht über den Standard bewerkstelligen, auch sind DRM-geschützte Inhalte noch nicht abspielbar. Web-Anwendungen, die auf diese technischen Aspekte angewiesen sind, werden sich nach wie vor mit Plugins wie Silverlight oder Flash behelfen müssen.

Ist man nicht auf diese speziellen Szenarien angewiesen und hat die Möglichkeit, seine Videos in mehreren Codecs anzubieten, so gibt es keinen Grund mehr, das Video-Element nicht einzusetzen. Nie war es einfacher, Videos einzubinden, zu stylen und zu manipulieren.