HTML5 Video einfügen

Eine Anfrage zum Einfügen eines Filmclips auf einer Webseite schickte mich neulich auf die Suche nach einer Lösung die alle modernen Browser unterstützt. Ein neueres JavaScript-Paket, videojs.com, bot sich an, besonders wegen der aktiven Enwicklung.

Anfangs schien es perfekt, dann gab es Schwierigkeiten mit der Benutzung. Ich wollte Abspielen und Pause mit der Leertaste auslösen, die untere Steuer­leiste vor Start ausblenden, und der Film sollte am Ende wieder zurückspulen. Das Problem mit der Leertaste war nicht zu beheben. Obendrein stellte sich die Wahl einer befriedigenden Lösung schwer wegen der überaus agilen Entwicklung des Produkts, wobei Funktionen unkommentiert fallengelassen, geändert und wieder aufgegriffen wurden.

Geht das nicht einfacher? In der Tat.

Die Lösung:

Keinen extra JavaScript-Ballast einfügen. Nur die einfache <video> Tag.

<video id="oceans" controls preload="auto" width="582" height="242" poster="http://bitpals.com/en/wp-content/uploads/2014/11/oceans.jpg">
  <source type="video/mp4" src="http://vjs.zencdn.net/v/oceans.mp4"></source>
  <source type="video/webm" src="http://vjs.zencdn.net/v/oceans.webm"></source>
</video>

Und siehe da:


Der Player hat den Fokus während des Abspielens, und so wird das Drücken der Leertaste für Abspielen / Pause durchgereicht.

Der Film ist so spielbar in allen aktuellen Browsern, auch im Internet Explorer (IE) 9. Ältere IE-Versionen brauchen extra Hilfe für HTML5. Eine interessante Lösung dafür (die ich nicht getestet habe) ist der Video For Everybody Generator, der JavaScript für alle Browser erzeugt. Mehr Infos dazu bei Crossbrowser-safe HTML5 video.

Die Basisfunktionen werden zwar in den aktuellen Browsern unterstützt, es gibt jedoch Unterschiede in der Umsetzung. Firefox (cool!) stellt den großen Abspielknopf mitten aufs Video und behält den Fokus beim Klick auch darauf, so daß der Film sich mit der Leertaste bedienen läßt. Google Chrome bietet den Knopf nicht, und damit auch nicht die Bedienung mit der Leertaste. Ich glaube, die Benutzer sollten aber letztendlich selber entscheiden, welchen Browser sie bevorzugen. So müssen Entwickler sich nicht um die Browser, sondern nur um die Benutzer kümmern, und das ist gut so.

Update!

Mit einem kleinen JavaScript-Schnipsel funktioniert die Leertaste browser­übergreifend, auch auf Chrome. Danke an Jan-Sören Wiemers von Xing für den Tip!

Wir brauchen noch ein paar kleine Optimierungen, um die Steuerleiste beim Laden der Seite auszublenden und den Film nach Ende zurückzuspulen. Dazu kommt die Leertaste für die anderen Browser.

Optimierungen:

Das Manipulieren der sogen. Media Events wird durch das HTML5 Media API geregelt. Folgendes Skript ermöglicht die Steuerung mit der Leertaste und lädt den Film erneut nach Ende:

<script type="text/javascript">
  (function(){
    // Video am Ende neu laden
    var video = document.getElementsByTagName('video')[0];
    video.addEventListener('ended', function() {
      video.load();
    });
    // Play/Pause mit Leertaste bedienen
    window.addEventListener('keydown', function(event) {
      if(event.keyCode === 32) {
        if(video.paused) {
          video.play();
        }
        else {
          video.pause();
        }
        event.preventDefault();
      }
    });
  })()
</script>

Wichtig ist hier event.preventDefault(); ohne dies wird die Leertaste nach dem Skript an die Seite weitergereicht, mit häßlichem hoch- und runterspringen.

Um die Steuerleiste auszublenden kann man derzeit nur das controls Attribut von der video Tag entfernen. Das controls Attribut enthält alle Eingabeelemente, die auf der Video Oberfläche (engl. canvas) liegen. Das Ausblenden würde demnach den mittigen Abspielknopf mit sich ziehen, und der Film kann nicht gestartet werden. An dieser Stelle sollte man sich mit weiteren Optimierungs­versuchen zurückhalten und hoffen, daß das W3C und Web-Autoren sich damit befassen (obwohl die HTML5 Media API schon fertig im RFC-Stadium ist).


Videoclip von Disney Nature’s Oceans via Videojs.com. Warenzeichen und Urheberrechte liegen bei ihren jeweiligen Inhabern.

Der Eintrag wurde in HTML5 geschrieben.
Lesezeichen auf die Permalink setzen.