© gemenacom, 123RF.
Ob salzig oder süß, zu einem guten Film gehört etwas zum Knabbern. Die Mozilla Foundation bietet mit dem Media-Toolkit Popcorn seit Kurzem eine nahrhafte Knabberei für Webvideos an. Die Zutaten: ein Film, HTML 5, ein bisschen Javascript, externe Webseiten, Maps, Fotos, Newsfeeds oder Tweets.
Die Netzcommunity stürmt jeden Tag Videoportale wie Youtube, My Video, Clipfish, Seveload, Vimeo & Co. Die dort dominierende Technologie ist nach wie vor Flash, um die Pufferung und das Abspielen via Streaming zu steuern. Auf Seite des Clients ist dazu neben ausreichender Bandbreite ein entsprechendes Browser-Plugin notwendig. HTML 5 mit seinem »video« -Tag schlägt einen anderen Weg ein und ermöglicht die Wiedergabe ohne Plugin. Die Steuerungsmöglichkeiten gehen dafür nicht über eine einfache Bedienleiste hinaus. Wer mehr Komfort erwartet, rüstet nach – beispielsweise mit Popcorn.
Das HTML-5-Framework der Mozilla Foundation will Videos und Inhalte anderer Webseiten näher zusammenbringen, indem es Webvideos mit Informationen aus dem Netz und zusätzlichen Steuerungsfunktionen anreichert. Nach rund anderthalbjähriger Entwicklung liegt die Javascript-Bibliothek Popcorn.js [1] in einer stabilen Version vor und ist für den produktiven Einsatz bereit.
Die Handhabung ist einfach. Die unter der MIT-Lizenz stehende Bibliothek bietet bereits fertige Javascript-Codeschnipsel, um Untertitel und Links anzuzeigen, ein Video mit Twitter, Facebook und Flickr zu verknüpfen, andere Webseiten oder Feeds einzubinden oder Orte auf Google Maps zu markieren. Die ausführliche Dokumentation [2] listet alle Möglichkeiten auf und erläutert den Einsatz mit zahlreichen Beispielen.
Wer mit Popcorn experimentieren möchte, der muss kein Javascript-Profi oder ein erfahrener Webprogrammierer sein. Grundlegende HTML-Kenntnisse sollten Anwender indes mitbringen und sich im Vorfeld die neuen HTML-5-Elemente und besonders das Tag »video« anschauen [3]. Außerdem schadet es nicht, sich ein wenig mit CSS zu beschäftigen, um das Layout später an eigene Wünsche anpassen zu können.
Vor Drehbeginn
Das Drehbuch für ein Popcorn-Projekt besteht aus einer gewöhnlichen Webseite mit HTML-5-Auszeichnungen. Im »head« -Bereich binden Anwender die Popcorn-Bibliothek ein, damit alle Funktionen des Media-Framework in der neuen Seite zur Verfügung stehen (siehe Listing 1). Zum Testen tritt am besten die komplette Datei mit allen Funktionen und Plugins (»popcorn-complete.js« ) in Aktion. Auf der Download-Seite des Projekts ist ebenfalls eine minimierte Releaseversion namens »popcorn-complete.min.js« im Angebot, die sich für den späteren Produktiveinsatz empfiehlt.
Listing 1
Kopf index.html
01 <html> 02 <head> 03 <title>Linux-Magazin 04/2012 -- Popcorn-Artikel</title> 04 <script type='text/javascript' src='popcorn-complete.js'></script> 05 <script type='text/javascript' src='mypopcorn.js'></script> 06 <link rel="stylesheet" type="text/css" media="all" href="styles.css" /> 07 </head>
Die Regie weist zudem der Datei mit den eigenen Javascript-Codeschnipseln (»mypopcorn.js« ) und dem Link zum Stylesheet (»styles.css« ) einen Platz im Header der HTML-Datei zu. Natürlich ist es möglich, die Formatanweisungen direkt über »<style type=”text/css”>« einzubinden, dann sorgt aber eine externe Datei für mehr Übersichtlichkeit.
Zum »body« -Abschnitt fügen Anwender in einen Div-Container das »video« -Tag mit einer eindeutigen ID hinzu (»myvideo« , siehe Listing 2). Zusätzlich binden sie die gewünschten Videoversionen ein. Derzeit sollten das mindestens die beiden Formate Ogg und MP4 sein, da sich die Browserhersteller noch nicht auf einen einheitlichen Standard für HTML-5-Videos einigen konnten. Mit Ogg und MP4 kommen aber die wichtigsten Plattformen und Programme zurecht. Bieten Anwender also mehrere Quellen an, sucht sich der jeweilige Browser das für ihn passende Format selbst aus.
Listing 2
Body der index.html (Auszug)
01 <div id="wrapper"> 02 <div id="main"> 03 <div id="container"> 04 <video id="myvideo" checked="true" controls="controls" poster="poster.png"> 05 <source src="sintel_trailer-480p.ogg" type="video/ogg"> 06 <source src="sintel_trailer-480p.mp4" type="video/mp4"> 07 </video> 08 <div id="map"></div> 09 </div> 10 <div id="footnotediv"></div> 11 <div id="attributiondiv"></div> 12 </div> 13 <div id="aside"> 14 <div id="wikihead"></div> 15 <div id="wikidiv"></div> 16 <div id="linkdiv"></div> 17 <div id="twitterdiv"></div> 18 </div> 19 </div>
Auch die weiteren Inhalte (Texte, Bilder, Social-Media-Links und so weiter) bekommen ihre eigenen Div-Container. Die deutschen Untertitel benötigen keinen eigenen, da sie innerhalb der Videofläche erscheinen sollen. Für die geplanten zwei Fußnoten reicht ein gemeinsamer Container, da der Browser sie nacheinander einblendet. Alle weiteren Inhalte nutzen ihren eigenen Container.
Bitte Ruhe am Set!
Die Popcorn-Aktionen in der Javascript-Datei »mypopcorn.js« benötigen nur wenige Zeilen Code (Listing 3). Als Erstes stellt ein Event-Listener sicher, dass das Skript erst startet, wenn der Browser die Webseite vollständig geladen hat. Alle Elemente des Projekts sind also in diese Funktion eingeschlossen.
Listing 3
mypopcorn.js (Auszüge)
01 document.addEventListener('DOMContentLoaded',function(){
02 var popcorn = Popcorn( '#myvideo' );
03 popcorn.subtitle({
04 start: 12,
05 end: 16,
06 text:"<p>Was führt dich ins Land der Torwächter?</p>"
07 });
08 ...
09 popcorn.footnote({
10 start: 12,
11 end: 30,
12 text: "Die deutschen Untertitel sind inspiriert von <a href='http://www.sintel... ",
13 target: "footnotediv"
14 });
15 ...
16 popcorn.wikipedia({
17 start: 0,
18 end: 48,
19 lang: "de",
20 numberofwords: 59,
21 src: "http://de.wikipedia.org/wiki/Blender_%28Software%29",
22 title: "Blender ...",
23 target: "wikidiv"
24 });
Die Variable »popcorn« erzeugt nun eine »Popcorn()« -Instanz. Dieser übergeben Anwender die ID des »video« -Tag (»myvideo« ), um den eigentlichen Aufruf des Zusatzmaterials zu ermöglichen. Danach folgen Elemente aus der Bibliothek, etwa ».subtitle« , um dem »Sintel« -Trailer deutsche Untertitel hinzuzufügen. In den Klammern stehen die Parameter: Der Untertitel startet bei Sekunde 12 und endet bei Sekunde 16. Eine Zielangabe über »target« ist in diesem Fall nicht nötig, da der Text im unteren Bereich des Films erscheinen soll und dies die Voreinstellung ist.
Anders sieht es für die nachfolgenden Fußnoten und die weiteren Elemente aus. Sie erhalten die Angabe des Zielcontainers; das »target« ist also »footnotediv« , was im HTML-Code direkt unter dem Videocontainer erscheint (siehe Listing 1). Gleiches gilt für die Einblendung des Wikipedia-Artikels, der Twitter-Zeitliste und der Google-Maps-Karte. Die Namen dieser Elemente sind fest vorgegeben und meist selbsterklärend: ».wikipedia« , ».twitter« und ».googlemap« (siehe Abbildung 1). Eine Liste aller Popcorn-Plugins zusammen mit anschaulichen Beispielen bietet die Projektseite.
Abbildung 1: Verschiedene Popcorn-Elemente in Aktion: Oben links erscheint das Video mit deutschen Untertiteln, darunter die Google-Maps-Karte mit dem Blick auf die Location. Rechts ist Platz für einen Wikipedia-Artikel und die Twitter-Timeline der Filmemacher.
Die Bibliothek streicht beim Einbinden externer Inhalte alle Formatvorgaben aus den Texten, zum Beispiel Absätze, Schriftauszeichnungen und Listenformatierungen. Außerdem entfernt sie Links und Text, der in Klammern steht. Für den im Beispiel eingeblendeten Wikipedia-Artikel heißt dies, dass Anwender am besten einen eigenen Titel setzen und die Anzahl der Wörter (»numberofwords« ) so reduzieren, dass das Inhaltsverzeichnis nicht mehr auftaucht. Da das Layout externer Seiten aber meist sowieso nicht zum eigenen Projekt passt, ist der Verlust der Formatierungen zu verschmerzen.
Kamera läuft
Schade ist allerdings, dass auch die Wikipedia-Sprungmarken, welche die Nutzer über das Inhaltsverzeichnis erreichen, verloren gehen. URLs wie beispielsweise »http://de.wikipedia.org/wiki/Sintel#Handlung« ignoriert Popcorn gänzlich und zeigt als Konsequenz gar nichts an. Ein solches Feature fehlt also noch, da Anwender dann bei langen Artikeln den Abschnitt mit dem besten Fließtext auswählen könnten.
Nutzer dürfen auch direkt Videos von Youtube oder Vimeo verwenden und die entsprechende URL zum Film einbinden. Ein »video« -Tag benötigen sie folglich nicht mehr. Es reicht ein einfacher »div« -Container mit der ID, denn Popcorn schreibt den Code für die Einbettung automatisch dort hinein. So bleibt das Media-Toolkit flexibel und erlaubt auch Flash-Inhalte, die nach wie vor dominieren.
Popcorn-Maschine
Anwendern, die lieber nicht mit Quellcode und Editor hantieren, will der Popcorn Maker [4] unter die Arme greifen. Die Webapplikation ist zwar im frühen Alphastadium, aber durchaus schon benutzbar. Sie läuft auf jedem Betriebssystem im Browser Firefox.
Zunächst gilt es, einen Titel für das neue Projekt auszuwählen und die URL zu einem Film einzutragen. Danach entscheidet sich der Anwender für eines der Templates, an das die jeweils verfügbaren Bibliothekselemente geknüpft sind. Die Zeitleiste unter dem Video zeigt die Länge des Films in Stunden, Minuten und Sekunden. Die Box rechts daneben enthält die verfügbaren Elemente. Per Drag & Drop zieht der Anwender sie auf die Zeitleiste und der Popcorn Maker erstellt eine neue Spur. Weitere Bausteine wandern entweder in dieselbe Spur oder in eine neue.
Ein Doppelklick auf ein Element öffnet einen Dialog, in dem Nutzer Feinjustierungen vornehmen, also etwa die Länge sekundengenau bestimmen, einen Link oder eine Quelle eintragen und den Target-Container festlegen.
Über das kleine Icon mit der Diskette oben rechts geben Anwender den Quellcode des eigenen Projekts in der Javascript Object Notation (Json) oder im HTML-Format aus (siehe Abbildung 2). Per Copy & Paste wandert dieser dann in den eigenen Lieblingseditor. Eine Möglichkeit, den Quellcode herunterzuladen, fehlt derzeit ebenso wie eine Funktion, um eigene Projekte online zu speichern.
Abbildung 2: Der Popcorn Maker ist ein Webtool, das die Arbeit mit der Javascript-Bibliothek Popcorn.js auch ohne Programmierkenntnisse ermöglicht.
Die Klappe fällt
Die Mozilla-Entwickler bieten mit dem Popcorn-Framework einen besonderen Filmgenuss und interessante Werkzeuge für Webdesigner und andere kreative Köpfe. Erfahrene Javascript-Entwickler erhalten eine Spielwiese, auf der sie sich nach Herzenslust mit Webvideos und multimedialen Inhalten austoben können, wie das Popcorn-Blog anschaulich [5] zeigt. Aber auch Anwender mit geringen Programmierkenntnissen finden sich schnell zurecht und erzielen mit wenig Aufwand gute Ergebnisse.
Als zusätzliches Bonbon liefern die Macher eine Art Baukasten, in dem Nutzer mit der Maus Elemente in ihre eigenen Projekte befördern können. Auch wenn der Popcorn Maker noch im Alphastadium ist, kann der exportierte Quellcode schon jetzt als Vorlage dienen und Anwender zu eigenen Experimenten im Lieblingseditor ermuntern.
Popcorn für alle!
Auf der DELUG-DVD dieses Magazins finden sich die Full-Debug-Version 1.1.2 der Javascript-Bibliothek (»popcorn-complete.js« ), der Sintel-Trailer im Ogg- und MP4-Format sowie ein Filmposter (»poster.png« ), das als Titelbild fungiert. Bei »Sintel« handelt es sich um einen computergenerierten Kurzfilm, der im Rahmen des Filmprojektes Durian entstand. Geldgeber war wie beim Vorgänger Big Buck Bunny die Blender Foundation, und zum Einsatz kam wiederum die freie 3-D-Grafiksoftware Blender.
Außerdem sind ein paar Eigenkreationen dabei, die im selben Verzeichnis wie die anderen Dateien auf dem Webserver liegen müssen: »index.html« (HTML-Datei mit HTML-5-Elementen), »mypopcorn.js« (ausgelagertes Javascript mit Event-Listener und Popcorn-Instanzen) und »styles.css« (CSS-Layout für die Webseite).
Infos
- Javascript-Bibliothek Popcorn.js: http://popcornjs.org
- Popcorn.js-Dokumentation: http://popcornjs.org/popcorn-docs/index.html
- HTML 5 und Videos: http://html5video.org
- Popcorn Maker: http://mozillapopcorn.org/popcorn-maker
- Popcorn-Blog: http://mozillapopcorn.org/blog
Der Autor
Renate Hermanns ist selbstständige Webentwicklerin. Sie plant und erstellt hauptsächlich Templates für Contentmanagement-Systeme nach modernen Standards. HTML 5 und CSS 3 sind ihre Werkzeuge, um Webseiten auch auf mobilen Endgeräten benutzerfreundlich auszugeben, und Javascript ermöglicht ihr den Spagat zwischen alten und neuen Browsergenerationen. Ihre Homepage ist http://www.css-manufaktur.de.
