WARNUNG: Sie haben die Ausführung von Javascript in ihrem Browser deaktiviert. A3non.org benötigt zur korrekten Funktion jedoch Javascript - Bitte aktivieren Sie es um den vollen Funktionsumfang der Website nutzen zu können. Was ist Javascript.
Die Javascript API für Zanmantou3 bietet die Möglichkeit sämtliche Funktionen des Players über Javascript zu steuern. Dadurch ist es möglich ein vollständig javascript basiertes UserInterface zu realisieren oder den Player zum Beispiel um eine Playlist zu ergänzen. Im Gegensatz zu Zanmantou1 setzt die API, wie der Player auch, auf eine vollsändig Event-gestützte Architektur. Zur Realisierung baut die neue API auf einem Javascript Framework auf, welches diverse Möglichkeiten zur Verfügung stellt.
Eine Übersich sowie Beschreibung aller zur Verfügung stehenden Methoden und Events entnehmen Sie bitte der JSAPI Reference.
Die Zanmantou API ist zur Zeit für folgende Frameworks verfügbar (APIs sind im Zanmantou-Package enthalten) :
- MooTools
- Generic (Framework unabhängig)
Vorbereitung
Damit auf den Player über die API zugegriffen werden kann ist es notwendig dem Player eine id im object-tag zuzuweisen. Auf das so definierte Player-Object kann nun über die API zugegriffen werden.
<object id="zanmantou1" data="Zanmantou3.swf" type="application/x-shockwave-flash" height="400" width="600"> <param name="movie" value="Zanmantou3.swf" /> <param name="quality" value="best" /> <param name="scale" value="noscale" /> <param name="salign" value="lt" /> <param name="FlashVars" value="config=puregrey/puregrey.xml&list=medialist.xml" /> <param name="allowScriptAccess" value="sameDomain" /> <param name="allowFullScreen" value="true" /> </object>
MooTools
API Einbinden
Neben der eigentlichen API muss ebenfalls das Framework im head-bereich des HTML eingebunden werden. Hierbei ist es wichtig, dass zuerst das Framework eingebunden wird.<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"> <head> <!-- Meta !--> <title>A3non | Zanmantou3 JSAPI Test</title> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <!-- Mootools !--> <script type="text/javascript" src="js/mootools-1.2.4-core-yc.js"></script> <!-- Zanmantou JSAPI !--> <script type="text/javascript" src="js/ZanmantouJSAPI-1.0-mootools.js"></script> <!-- Startup !--> <script type="text/javascript"> </script> </head>
Initialisierung
Damit die API für eine Player-Instanz verwendet werden kann, muss diese zunächst über die ID des Players initialisiert werden. Wichtig hierbei ist, dass die Initialisierung durch das onload-Event(nicht domready) ausgelöst werden muss, da erst zu diesem Zeitpunkt das Flash Plugin aktiv ist und der Player geladen wurde.<!-- Startup !-->
<script type="text/javascript">
window.addEvent('load', function(){
var player1 = new Zanmantou('zanmantou1');
});
</script>
Nach dem Initialisieren kann die API nun endlich verwendet werden und der ganze Player per Javascript gesteuert werden. Hier nun ein paar kleine Beispiele zur Verwendung. Eine Übersicht über alle verfügbaren Methoden finden Sie in der JSAPI Reference.Basis Steuerungselemente
Javascript
window.addEvent('load', function(){
var player1 = new Zanmantou('zanmantou1');
$('start').addEvent('click', function(){
player1.start();
});
$('stop').addEvent('click', function(){
player1.stop();
});
$('prev').addEvent('click', function(){
player1.prev();
});
$('next').addEvent('click', function(){
player1.next();
});
});
HTML
<input type="button" id="start" value="start" /> <input type="button" id="stop" value="stop" /> <input type="button" id="prev" value="prev" /> <input type="button" id="next" value="next" />
Auf Events reagieren
Das besondere an der neuen API ist, dass quasi für jede Aktion des Players ein Event ausgelöst wird, wodrauf man reagieren kann. Dadurch wird es möglich zum Beispiel eine dynamische Playlist in Javascript zu erstellen, die den aktuellen Track samt Informationen anzeigt. Sämtliche zur Verfügung stehenden Events sind in der JSAPI Reference dokumentiert.Das "play" Event wird getriggert, sobald die Wiedergabe startet. In diesem Beispiel wird daraufhin eine Anzeige mit dem aktuellen Mediaindex aktualisiert.
Javscript
window.addEvent('load', function(){
var player1 = new Zanmantou('zanmantou1');
player1.addEvent('play', function(index){
$('status').set('text', index);
});
});
HTML
<p>Der aktuelle wiedergegebene Track/Video hat den Index <span id="status">-</span></p>
