HTML 5 Video Scrip­ting mit Java­script

Hier ist er noch einmal unser Reiher (600 kbit/s, 848x480). Diesmal werden wir durch eine Abspieloption im Schneckentempo sowie Einzelbildschritte in den vollen Genuß des Videos kommen, sofern ihr Browser alle geforderten Funktionen bereits unterstützt.

Bis auf das Zurückspulen und den Szenenselektor, den wir selber implementiert haben, werden alle hier gezeigten Funktionen direkt via Javascript unterstützt.

Referenz: Javascript Funktionen, Eigenschaften und Eventhandler des video-Tags

Für alle die etwas ungeduldig sind und wissen wollen, welche Methoden, Eigenschaften und Eventhandler das video-Objekt zur Verfügung stellt hier eine Referenz absteigend nach Präzedenz und Themenzusammenhang sortiert. Damit kann man schon einmal selber loslegen ohne viel fremden Code lesen zu müssen. Natürlich sind auch weiterführende Eigenschaften und Fähigkeiten aufgelistet um die bestehende Implementierung erweitern zu können.

Ein video-Tag kann mit document.createElement("VIDEO") ins Dokument eingefügt werden; seine Eigenschaften können dann über video.src, .autoplay, .loop, .controls und .preload gesteuert werden (siehe Einführungsartikel). video.addEventListener('canplay', fnname, false) fügt schließlich noch eine entsprechende Ereignishandhabung ein. Die dadurch aufgerufene Funktion erwartet ein Eventobjekt e als Parameter; mit e.target hat man dann Zugriff auf das Videoelement. "error" wäre bspw. ein weiterer Eventlistener function(e) { alert(e.code); } (siehe nachfolgende Tabelle).

über video.networkState kann man den Ladefortschritt feststellen

Passend zu dem Statusfeld video.networkState gibt es auch die Ereignisse loadstart, progress (downloading), suspend (herunterladen ausgesetzt oder fertig), abort (abgebrochen), error, emptied (reload/neu laden) und stalled (versucht Daten zu bekommen aber keine sind verfügbar).

video.currentSrc bezeichnet die aktuelle Quelle, aus der das Video geladen wird. video.canPlayType(type) == '' / 'maybe' / 'probably' wenn das entsprechende Format gar nicht, vielleicht oder ziemlich sicher geladen werden kann.

Um ein Video automatisch starten zu lassen gibt es schließlich noch video.readyState:

Auch hier gibt es wieder passende Ereignisse nämlich loadedmetadata, loadeddata, waiting, playing, canplay, canplaythrough. Letztlich gibt es Ereignisse für alle Benutzerinteraktionen wie play, pause, seeking, timeupdate, ended, ratechange und durationchange.

Ebenso läßt sich feststellen, ob gewisse Filmabschnitte schon gepuffert sind, vom Benutzer bereits abgespielt wurden oder ansteuerbar sind: buffered, played und seekable sind TimeRanges Objekte. Die Anzahl an Zeitabschnitten kann mit timeranges.length abgefragt werden; nicht zu vergessen die Zeitabschnitte selbst, die man mit timeranges.start(i) und timeranges.end(i) bekommt. Zusätzlich gibt es noch die Boolean-Statusflags seeking und ended für das Springen an eine neue Position und das Ende der Wiedergabe. video.startTime gibt schließlich die Position an, ab der das Abspielen zuletzt begonnen hat.

Interessanterweise kann man sogar das aktuelle Videoframe pixelwseise auslesen und nach gegebener Veränderung in einen anderen Canvas schreiben. Das geht allerdings nicht direkt, sondern man muß das aktuelle Frame zuerst mit drawImage aus dem Video herausholen und in einen unsichtbaren Canvas kopieren. Von dort kann man es dann pixelwseise mit getImageData auslesen. Schließlich möchte man vielleicht ein neues Bild mit createImageData erzeugen und händisch befüllen. Die Pixel sind alle in einem eindimensionalen Array mit einem Eintrag für Rot, Grün, Blau und Alpha (Undurchsichtigkeit) hintereinander gespeichert. Danach kann dieses mit putImageData in einen sichtbaren Canvas kopiert werden.

Sourcecodes des eingebetteten Videos

Schauen wir uns zunächst die HTML-Stuerelemente des eingebetteten Videos an. Hier ist nichts wirklich besonderes zu erkennen, außer daß wir die Druckknöpfe mit Unicodezeichen beschriftet haben. Einige Unicode-Symbolzeichen lassen sich etwa mit kcharselect, der Zeichentabelle von KDE auswählen, während man andere speziell für Multimediazwecke gedachte Zeichen besser nachschlägt. Diese haben so sprechende Namen wie RIGHT-POINTING TRIANGLE. Schauen Sie sich auch den Javascript oncanplay-Hook im video-Tag sowie die onchange und onclick Ereignisse der Slider, Optionslisten und Druckknöpfe an.

Wenn Sie nun mehrere Videos auf einer html-Seite haben wollen, so müssen Sie jedem Video eine eigene ID zuweisen. Der ID-Wert muß daraufhin für alle onclick und onchange Funktionsaufrufe ausgetauscht werden. Andere Elemente brauchen nicht geändert zu werden, da InitControls(this) diese automatisch aufgrund des Klassennamens ('class=') innerhalb des übergeordneten VideoContainer-Containerelements findet.

Beginnen wir mit dem Abspielen des Videos erst einmal ohne die Rückspulfunktion zu beachten. Hier haben wir eine Routine PlayPause, die wiederum PlayVideo und PauseVideo aufruft. Wir verwenden niemals video.play() und video.pause() direkt sondern eben PlayVideo und PauseVideo um die Beschriftung der Knöpfe anzupassen. video.play() sollte auch nur aufgerufen werden, wenn das Video noch nicht spielt, da es sonst an den Beginn zurückspringt. Auch ein aufeinanderfolgendes video.pause() und video.play() würde nicht das tun was wir wollen, da hierbei das Video pausiert bliebe (Scheinbar braucht es eine gewisse Zeit bis video.pause() Effekt trägt.).

Beim Anklicken eines Wiedergabezeitpunktes in der Liste rechts wird SelectScene aufgerufen, das eigentlich nur video.currentTime zu setzten braucht. Danach rufen wir wie nach jeder Änderung von video.currentTime UpdateTime auf um unseren Zeitbalken am unteren Rand des Videos anzupassen (einzige Ausnahme: GotoPos, wenn der Zeitbalken direkt angeklickt wird braucht dieser nicht mehr upgedated zu werden, da er ja schon vom Browser gesetzt worden ist.).

UpdateTime ist übrigens auch der Hook der ständig aufgerufen wird während das Video spielt. Er übergibt die Kontrolle an CheckForScene, das in der Liste der aktuellen Wiedergabezeitpunkte (Szenen) den aktuell gespielten heraussucht. Der DOM-SubTree, also alle option-Felder unseres Szenen-selectors, braucht aber nur dann abgegrast zu werden, wenn sich die aktuelle Szene verändert hat (curSceneStart, curSceneEnd).

Etwas trickreich ist auch die Implementierung der Abspielknöpfe, da sich hier immer der Knopf mit der aktuellen Wiedergabegeschwindigkeit (Vor-, Zurückspulen, Schneckentempo, normales Abspielen) in einen Pause-Knopf verwandelt. Das geht ganz einfach, indem die Beschriftung aller Knöpfe zurückgesetzt wird und dann der aktuelle in einen Pauseknopf verwandelt.

Das Erkennen der aktuellen Abspielgeschwindigkeit funktioniert mit ratedelta, da nach dem Setzen der video.playbackRate, diese geringfügig vom gesetzten Wert abweichen kann (ab- oder aufgerundet).

Nun zum Zurückspulen. Grundsätzlich funktioniert dieses so, daß wir video.currentTime 25 mal in der Sekunde mittels setInterval setzen. Das alleine würde allerdings noch nicht funktionieren. Ändert man die Videoposition nämlich schneller als der Browser das nächste Frame anzeigen kann, so ändert sich an der Anzeige im Video gar nichts. Der Browser wartet also bei mehreren Änderungen, die dicht hintereinander erfolgen, eine Zeit lang bevor er ein entsprechendes neu gesetztes Frame auch anzeigt. Das erkennt UpdateTime und setzt last_frame_shown.

Die Implementierung der anderen Steuerelemente wie Mute und AdjustVolume ist sehr geradlining und spricht wohl für sich selbst; deren Entdeckung will ich dem Leser üebrlassen.

Damit es hinsichtlich der Verwendbarkeit des präsentierten Codes keine Zweifel und Probleme gibt: er darf verwendet werden und ist unter LGPL lizensiert.