HTML5. Leitfaden für Webentwickler. Klaus Förster, Bernd Öggl. An imprint of Pearson Education

Transkript

1

2 Klaus Förster, Bernd Öggl HTML5 Leitfaden für Webentwickler An imprint of Pearson Education München Boston San Francisco Harlow, England Don Mills, Ontario Sydney Mexico City Madrid Amsterdam

3 Kapitel 4 Video und Audio Abbildung 4.7: Der Internet Explorer 8 mit der Fallback-Bibliothek»mwEmbed«von Kaltura html5media Die JavaScript-Bibliothek html5media arbeitet noch zurückhaltender als mwembed und greift nur dann ein, wenn der Browser keines der angegebenen Video-Formate abspielen kann. In diesem Fall wird der Open-Source-Flash- Video-Player Flowplayer geladen und erwartet als Eingabe ein MP4-(H.264-) Video. Leider hat die Bibliothek in der aktuellen Version einen Fehler, wodurch ältere Browser bei der Angabe von mehreren source-elementen einen JavaScript-Fehler melden und nichts ausgeben. <!DOCTYPE html> <html> <head> <title>html5media Fallback</title> <script type="text/javascript" src="libs/html5media.min.js" > </script> </head> 108

4 Übergangslösungen für»alte«browser <body> <h1>html5media Fallback</h1> <video src="videos/mvi_2170.mp4" width=640 height=480 controls> </video> </body> </html> Die Angabe von Breite und Höhe ist in diesem Fall wichtig, da der Flowplayer andernfalls nur wenige Pixel hoch ausgegeben wird. Abbildung 4.8: Internet Explorer 8 mit dem freien Flowplayer (Flash-Fallback) 109

5 Kapitel 4 Video und Audio 4.7 Video und Scripting ein einfacher Video-Player Videos kann man nicht nur im Browser anzeigen, sondern über das Interface HTMLMediaElement auch direkt mit JavaScript steuern. Wie das geht, zeigen wir in diesem Abschnitt, in dem wir einen einfachen JavaScript-HTML5-Video- Player mit folgenden Features implementieren: Starten und Stoppen des Videos Anzeigen und Setzen der Wiedergabeposition auf einer Zeitleiste Schnellsuchlauf vor und zurück Auswählen bestimmter Sequenzen im Film Laut, leise und stumm schalten Das passende Video für unseren Video-Player ist schnell gefunden: Big Buck Bunny ein etwa zehn Minuten langer, computeranimierter Trickfilm der, wie seine Adresse vermuten lässt, das Resultat eines freien Filmprojekts ist. Initiiert von der Blender Foundation, kreierten sieben 3D-Animationsspezialisten im Zeitraum von Oktober 2007 bis April 2008 unter Verwendung freier Software wie eben Blender, Gimp, Inkscape oder Python auf Ubuntu diesen Film und stellten ihn unter einer offenen Lizenz ins Netz. Die Handlung folgt dem Motto funny and furry (lustig und pelzig) und kann unter in der Wikipedia nachgelesen werden. Wir wollen uns ja mehr um den Player kümmern, also tun wir das auch Abbildung 4.9 zeigt. wie er aussehen wird. HINWEIS Die HTML-Seite des Video-Players mit JavaScript-Bibliothek und CSS-Stilen finden Sie auf der Internetseite zum Buch unter folgenden Links:

6 Video und Scripting ein einfacher Video-Player Abbildung 4.9: Screenshot des JavaScript-HTML5-Video-Players Einbau des Videos Der HTML-Code zum Einbau des Videos sollte bereits hinlänglich bekannt sein und bietet außer den beiden Event-Handler-Attributen oncanplay und ontimeupdate, die allerdings noch eine wichtige Rolle spielen werden, nicht viel Neues: <video preload=metadata poster=videos/bbb_poster.jpg width=854 height=480 oncanplay="initcontrols()" ontimeupdate="updateprogress()"> <source src='videos/bbb_480p_stereo.ogv' type='video/ogg;codecs="theora, vorbis"'>  Ihr Browser kann diesen Film leider nicht anzeigen. </video> Mit preload=metadata soll vorerst nur so viel vom Film geladen werden, dass die Filmdauer sowie zumindest der erste Frame zur Verfügung stehen. Während des Ladens kommt wie bekannt das im poster-attribut angeführte Bild zur Anzeige und wird danach vom ersten Frame ersetzt, der bei uns leider zur Gänze schwarz ist. 111

7 Kapitel 4 Video und Audio Die Breiten- und Höhenangaben dienen zu Demonstrationszwecken und vergrößern das nach dem Download von ursprünglich 854 x 480 auf 428 x 240 verkleinerte Originalvideo wieder auf 854 x 480 Pixel. Warum? Erstens eignet sich die verkleinerte Version mit ihren 39 Mbyte besser zum Testen als das Originalvideo mit 160 Mbyte, und zweitens kann durch das explizite Setzen der Attribute width und height 80 % des knappen HTMLVideoElement-Interfaces erklärt werden. Dieses besteht nämlich lediglich aus vier Attributen für die Dimension des Videos sowie einem weiteren Attribut für die URL des Posterframes, sofern vorhanden. Unter der Voraussetzung, dass die Variable video eine Referenz auf unser video-element enthält, ergeben sich folgende Attributwerte: video.width = 854 (angegebene Breite) video.height = 480 (angegebene Höhe) video.videowidth = 428 (Originalbreite) video.videoheight = 240 (Originalhöhe) video.poster = URL zu bbb_poster.jpg (Posterframe) Diese fünf Attribute reichen natürlich nicht aus, um unseren Player zu realisieren, und tatsächlich sind sie auch nur Zusatzattribute des HTMLVideoElements, das zugleich ein HTMLMediaElement repräsentiert jenes Objekt, hinter dem sich alle nötigen Methoden und Attribute verstecken. Neugierige finden es in der Spezifikation unter: Mit oncanplay beginnt die eigentliche Arbeit, verweist es doch auf jene Java- Script-Funktion, die ausgeführt werden soll, sobald der Browser das Video abspielen kann. Ohne auf weitere Details vorzugreifen in initcontrols() passiert vorerst nur eins: Es wird eine Referenz auf das Video erzeugt und in der globalen Variable video gespeichert. Im Zuge der Implementierung unseres Players werden wir initcontrols() noch öfter um Einträge ergänzen müssen, jetzt reicht aber folgender Code: var video; var initcontrols = function() { video = document.queryselector("video"); Die Methode document.queryselector() ist Teil der CSS Selectors API und liefert uns in der Variablen video eine Referenz auf das erste video-element im Doku- 112

8 Video und Scripting ein einfacher Video-Player ment. Damit haben wir Zugriff auf das HTMLMediaElement-Interface und können mit der Implementierung unseres ersten Features beginnen dem Abspielen und Stoppen Das Starten und Stoppen des Videos Zum Starten und Stoppen benötigen wir zuerst einmal einen Button im HTML- Dokument, der auf Benutzer-Klicks reagieren kann: <input type=button value=" " onclick="playpause(this);"> id="playbutton" Hinter verbirgt sich eine Zeichenreferenz zum Unicode-Symbol BLACK RIGHT-POINTING TRIANGLE, das wir bequem für den Abspielknopf verwenden können. Die Funktionalität des Startens und Stoppens selbst steht in playpause(), einer Callback-Funktion, die bei jedem Klick aufgerufen wird und im Argument this das button-objekt gleich mit übergeben bekommt: var playpause = function(ctrl) { if (video.paused) { video.play(); ctrl.value = String.fromCharCode('0x25AE','0x25AE'); else { video.pause(); ctrl.value = String.fromCharCode('0x25B6'); Ob der Film gerade läuft oder nicht, sagt uns das Attribut video.paused. Es liefert true, wenn der Film angehalten ist, und false, wenn er abgespielt wird. Das Starten und Stoppen ist damit leicht video.start() und video.pause() lauten die passenden Methoden, die ihrerseits video.paused auf false beziehungsweise true setzen. Das im Argument ctrl übergebene button-objekt wird dazu benutzt, je nach Status über ctrl.value die Schaltfläche in einen Pause- oder Abspielknopf zu verwandeln. Direktes Zuweisen von hätte nicht das gewünschte Ergebnis, sondern würde die Zeichenkette wörtlich als Beschriftung anzeigen. Der richtige Weg, um Unicode-Zeichen in JavaScript zu erzeugen, 113

9 Kapitel 4 Video und Audio führt über die Methode String.fromCharCode(). Ihr werden komma-getrennt die gewünschten UTF-16-Hexadezimal-Codes als Strings übergeben. Die Beschriftung des Pausenknopfs besteht übrigens aus zwei BLACK VERTICAL REC- TANGLE-Zeichen ( ). Die ID playbutton werden wir später noch brauchen Das Anzeigen und Setzen der Wiedergabeposition Um die aktuelle Wiedergabeposition anzeigen zu lassen, bedienen wir uns des bereits aus dem Kapitel 3, Intelligente Formulare, bekannten neuen Input-Typs range. <input type="range" min=0 max=1 step=1 value=0 onchange="updateprogress(this)" id="currentposition"> Die Attribute min und max geben den erlaubten Wertebereich vor, und step bestimmt jenes Intervall, um das sich beim Ziehen des Sliders der Wert value verändern soll. Auf unser Video umgemünzt, steht min für den Anfang und max für das Ende des Films, womit klar ist, dass wir den Wert max auf die Gesamtlänge des Videos in Sekunden bringen müssen. Der richtige Ort dafür ist initcontrols(), das richtige Attribut ist video.duration. Fügen wir also folgende Zeilen unserer initcontrols()-funktion hinzu: curpos = document.getelementbyid("currentposition"); curpos.max = video.duration; Damit hält max jetzt den Wert von , womit das Video knapp zehn Minuten dauert. Das direkte Setzen der Abspielposition erfolgt beim Ziehen oder Anklicken des Sliders im onchange-event-handler-callback update- Progress(): var updateprogress = function(ctrl) { video.currenttime = ctrl.value; Eine einzige Anweisung genügt dabei, denn das Attribut video.currenttime spiegelt nicht nur die aktuelle Abspielposition wider, sondern kann auch direkt gesetzt werden. Den passenden Wert dafür holen wir uns aus dem value-attribut des Sliders. Um die Anzeige der aktuellen Abspielposition im Format MM:SS zu implementieren, sind noch folgende Schritte nötig: 114

10 Video und Scripting ein einfacher Video-Player 1. Hinzufügen eines span-elements im Anschluss an den Slider: <span id="timeplayed"> </span> 2. Speichern einer Referenz auf den span in der initcontrols()-funktion und das Initialisieren dieser Variablen curtime mit dem Wert 0:00: curtime = document.getelementbyid("timeplayed"); curtime.innerhtml = '0:00'; 3. Updaten des Zeitstempels curtime bei jedem Aufruf von updateprogress(): mm = Math.floor(video.currentTime / 60.0); ss = parseint(video.currenttime) % 60; ss = (ss < 10)? '0'+ss : ss; curtime.innerhtml = mm+':'+ss; Damit sind wir fast fertig. Nur eine wesentliche Funktionalität des Sliders fehlt noch: Er muss beim Abspielen des Videos synchron mit der Abspielzeit bleiben. Die Lösung dafür liegt im HTML-Code zum Einbau des Videos und heißt ontimeupdate. Die Spezifikation legt nämlich fest, dass beim Abspielen eines Mediastreams im Abstand von mindestens 15 bis maximal 250 Millisekunden ein timeupdate-event auszulösen ist. Welche Callback-Funktion dabei aufgerufen wird, bestimmt das Event-Handler-Attribut ontimeupdate. Setzen wir es auf updateprogress(), ist der perfekte Zeitgeber zum Synchronisieren unseres Sliders gefunden. Der einzige Unterschied zum händischen Setzen der Position beim Klicken oder Ziehen des Sliders ist, dass wir jetzt nicht die Abspielposition verändern dürfen, sondern im Gegenzug den Slider und die Zeitanzeige auf video.currenttime bringen müssen. Die leicht veränderte updateprogress()-funktion ergibt sich demnach folgendermaßen: var updateprogress = function(ctrl) { if (ctrl) { video.currenttime = ctrl.value; else { curpos.value = video.currenttime; // Setzen der Zeit im Format MM:SS mm = Math.floor(video.currentTime / 60.0); ss = parseint(video.currenttime) % 60; ss = (ss < 10)? '0'+ss : ss; curtime.innerhtml = mm+':'+ss; Listing 4.1: Verändern und Aktualisieren der Abspielposition 115

11 Kapitel 4 Video und Audio Der Zweck der if-abfrage ist es, herauszufinden, ob updateprogress() vom Slider oder von ontimeupdate aufgerufen wurde. Im ersten Fall ist ctrl mit dem übergebenen Slider-Objekt belegt, und wir müssen die Abspielposition auf den Wert des Sliders setzen. Im zweiten Fall liegt ein timeupdate-event vor, und wir müssen den Slider in der Variablen curpos auf die aktuelle Abspielzeit setzen. Nachdem das Abspielen und Kontrollieren der Playback-Position so weit fertig wäre, ist jetzt ein guter Zeitpunkt, sich etwas auszuruhen. Nehmen Sie sich 10 Minuten Zeit, und erkunden Sie Big Buck Bunny mit Ihrem selbst gestrickten, beinahe fertigen Video-Player! Schnellsuchlauf vor und zurück Für diese beiden Features benötigen wir zuerst einmal Schaltflächen im HTML-Dokument, deren Beschriftung wiederum aus Unicode-Zeichen für spezielle Anführungszeichen, sogenannte Guillements, besteht. Die Unicode- Bezeichnungen spiegeln ihr Aussehen wider: LEFT-POINTING DOUBLE ANGLE QUOTATION MARK («) sowie RIGHT-POINTING DOUBLE ANGLE QUOTA- TION MARK (»). Zwei Event-Listener-Attribute sorgen für das Starten und Stoppen des Suchlaufs, der onmousedown beginnt und onmouseup wieder endet. <input type="button" value="«" onmousedown="fastfwdbwd(-1)" onmouseup="fastfwdbwd()"> <input type="button" value="»" onmousedown="fastfwdbwd(1)" onmouseup="fastfwdbwd()"> Das JavaScript-Callback fastfwdbwb() ist recht kurz und sieht so aus: var fastfwdbwd = function(direct) { _pause(); _play(); if (direct) { video.playbackrate = 5.0 * direct; Beim Beschleunigen eines Videos spielen zwei Attribute eine wichtige Rolle. Eines davon sehen wir mit video.playbackrate in unserer Callback- Funktion. Es steht für die aktuelle Abspielgeschwindigkeit. Das zweite ist 116

12 Video und Scripting ein einfacher Video-Player video.defaultplaybackrate, ein Vorgabewert, der das Basistempo des Filmes mit 1.0 festlegt. Zum schnelleren Abspielen muss die Wiedergaberate verändert werden, wobei 2.0 für»doppelt so schnell«, 4.0 für»viermal so schnell«und so weiter steht. Die Richtung bestimmt das Vorzeichen positive Werte spielen vor, negative zurück. Gemäß der Definition in der Spezifikation muss bei jedem Aufruf von video. play() das Attribut video.playbackrate auf den Wert von video.defaultplaybackrate gesetzt werden. Solange wir also nicht an der defaultplaybackrate schrauben, ist sichergestellt, dass beim Neustarten wieder die ursprüngliche Geschwindigkeit gilt. Zum Beschleunigen müssen wir also nur video.playback- Rate verändern. Die Umsetzung in fastfwdbwd() ist damit sehr einfach: Zuerst wird das Video jeweils kurz angehalten, dann weitergespielt und in dem Fall, dass die Variable direct mit 1 oder -1 belegt ist, die video.playbackrate entsprechend neu gesetzt und dadurch die Geschwindigkeit erhöht. Die Funktionen _pause() und _play() sind nötige Auslagerungen der Codeblöcke für das Starten und Stoppen im Callback playpause(). Mit ihnen können wir das Abspielen und Pausieren jetzt nicht nur über den Abspielknopf per Klick steuern, sonder auch direkt aus dem Script heraus. Um die Funktionalität vom Abspielknopf lösen zu können, müssen wir eine Referenz zum Button in init- Control() über getelementbyid() definieren und als Variable pbutton zur Verfügung stellen. Die aufgesplittete Version von playpause() sieht damit so aus: var _play = function() { video.play(); pbutton.value = String.fromCharCode('0x25AE','0x25AE'); var _pause = function() { video.pause(); pbutton.value = String.fromCharCode('0x25B6'); var playpause = function() { if (video.paused) { _play(); else { _pause(); Listing 4.2: Das Starten und Stoppen des Videos 117

13 Copyright Daten, Texte, Design und Grafiken dieses ebooks, sowie die eventuell angebotenen ebook-zusatzdaten sind urheberrechtlich geschützt. Dieses ebook stellen wir lediglich als persönliche Einzelplatz-Lizenz zur Verfügung! Jede andere Verwendung dieses ebooks oder zugehöriger Materialien und Informationen, einschliesslich der Reproduktion, der Weitergabe, des Weitervertriebs, der Platzierung im Internet, in Intranets, in Extranets, der Veränderung, des Weiterverkaufs und der Veröffentlichung bedarf der schriftlichen Genehmigung des Verlags. Insbesondere ist die Entfernung oder Änderung des vom Verlag vergebenen Passwortschutzes ausdrücklich untersagt! Bei Fragen zu diesem Thema wenden Sie sich bitte an: Zusatzdaten Möglicherweise liegt dem gedruckten Buch eine CD-ROM mit Zusatzdaten bei. Die Zurverfügungstellung dieser Daten auf unseren Websites ist eine freiwillige Leistung des Verlags. Der Rechtsweg ist ausgeschlossen. Hinweis Dieses und viele weitere ebooks können Sie rund um die Uhr und legal auf unserer Website herunterladen