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.

In diesem kurzen Tutorial wird beschrieben, wie Sie den Zanmantou Player in eine Website integrieren.

Generell gibt es 2 verschiedene Varianten Flash Objekte in eine Website zu integrieren. Für Zanmantou ist ausschließlich die W3C konforme Variante zu verwenden, da ansonsten die Javascript Unterstützung von Zanmantou nicht gegeben ist. Die W3C konforme Methode besteht aus einem object- Tag. Sowohl in dem Attribut data alsauch in dem Parameter movie muss die Adresse zu der .swf File des Players angegeben werden. Diese muss in beiden Tags identisch sein. Die Parameter scale, salign, quality und allowScriptAccess sollten nicht verändert werden, da ansonsten ggf. der Player nichtmehr Plattformunabhängig funktioniert.

Setup

HTML – Standart Integration

<object type="application/x-shockwave-flash" data="zanmantou.swf" height="60" width="320">
<param name="movie" value="zanmantou.swf"></param>
<param name="allowScriptAccess" value="sameDomain"></param>
<param name="quality" value="best"></param>
<param name="scale" value="noscale"></param>
<param name="salign" value="lt"></param>
</object>

Mit Hilfe der Attribute width und height wird die Größe des Players innerhalb des Dokuemntes festgelegt, diese sollte auf jedenfall der in der XML-Konfigurationsdatei Größe entsprechen.

HTML – Größe des Players

<object type="application/x-shockwave-flash" data="zanmantou.swf" height="60" width="320">

Des weiteren besteht die Möglichkeit die Hintergrundfarbe des Players festzulegen, falls kein Hintergrundbild verwendet wird. In diesem Beispiel wird als Farbe Weiss verwendet (#FFFFFF). Dazu einfach einen weiteren param – Tag hinzufügen und als value den gewünschten Farbwert angeben.

HTML – Hintergrundfarbe festlegen

<object type="application/x-shockwave-flash" data="zanmantou.swf" height="60" width="320">
<param name="allowScriptAccess" value="sameDomain"></param>
<param name="movie" value="zanmantou.swf"></param>
<param name="quality" value="best"></param>
<param name="scale" value="noscale"></param>
<param name="salign" value="lt"></param>
<param name="bgcolor" value="#FFFFFF"></param>
</object>

Ebenso ist es möglich einen individuellen Namen der XML Konfigurationsdatei anzugeben, z.B. um mehrern Playern auf eine Seite einzubinden und diesen jeweils individuelle Playlist zuzuweisen. Hierzu wird dem Player einfach der Name der Datei übergeben. Dieser kann mit einem relativem oder absolutem Pfad angegeben werden. Wichtig ist hierbei, dass in der Angabe value des Paramters FlashVars config="URL" steht, da Zanmantou die Angabe ansonsten nicht verarbeiten kann.

Konfigurations Dateien

HTML – Konfigurationsdateinamen angeben

<object type="application/x-shockwave-flash" data="zanmantou.swf" height="60" width="320">
<param name="allowScriptAccess" value="sameDomain"></param>
<param name="movie" value="zanmantou.swf"></param>
<param name="quality" value="best"></param>
<param name="scale" value="noscale"></param>
<param name="salign" value="lt"></param>
<param name="bgcolor" value="#FFFFFF"></param>
<param name="FlashVars" value="config=config.xml"></param>
</object>

Sollten Sie mehrere Player verwenden wollen, so reicht es mehrere object – Tags also Player einzufügen. Jedoch ist darauf zu achten, dass die Player bei Verwendung der JSI API unterschiedliche IDs besitzen.

HTML - Medialistdateinamen angeben

Im Gegensatz zu Zanmantou1 werden die Medien ausschliesslich in der medialist.xml angegeben. Folglich ist diese Datei neben der Konfiguration zwingend erforderlich. Bei Problemen mit der Darstellung des Players etc. empfiehlt es sich die beiden Pfade absolut anzugeben,

<object type="application/x-shockwave-flash" data="zanmantou.swf" height="60" width="320">
<param name="allowScriptAccess" value="sameDomain"></param>
<param name="movie" value="zanmantou.swf"></param>
<param name="quality" value="best"></param>
<param name="scale" value="noscale"></param>
<param name="salign" value="lt"></param>
<param name="bgcolor" value="#FFFFFF"></param>
<param name="FlashVars" value="config=config.xml&list=medialist.xml"></param>
</object>

Mediapath/Imagepath Overwrites

Um den Player besser in Content Management Systeme etc. integrieren zu können verfügt Zanmantou ab der Version 3.0.3 über die Möglichkeit den Mediapath sowie Imagepath aus der config.xml mit Hilfe der FlashVars überschreiben zu können. Dies ist besonderst praktisch, da somit die Konfiguration des Players unverändert bleiben kann. Die Overwrite können dabei sowohl gemeinsam alsauch getrennt verwendet werden.

Beispiel für die Overwrite

<object type="application/x-shockwave-flash" data="zanmantou.swf" height="60" width="320">
<param name="allowScriptAccess" value="sameDomain"></param>
<param name="movie" value="zanmantou.swf"></param>
<param name="quality" value="best"></param>
<param name="scale" value="noscale"></param>
<param name="salign" value="lt"></param>
<param name="bgcolor" value="#FFFFFF"></param>
<param name="FlashVars" value="config=config.xml&list=medialist.xml&mediapath=http://zanmantou.a3non.org/media/&imagepath=/themes/"></param>
</object>

HTML - Config Shortcuts

Um den Player auf. z.B. MySpace einzubinden muessen fuer die Konfiguration und die Medialist die Shortcuts c= (alias für config=) bzw. l= (alias für list=) verwendet werden, da der Quelltext von MySpace ansonsten fehlerhaft interpretiert wird. Für die Angaben des Mediapath (m=) sowie Imagepath (i=) existieren ebenfalls Shortcuts.

<object type="application/x-shockwave-flash" data="zanmantou.swf" height="60" width="320">
<param name="allowScriptAccess" value="sameDomain"></param>
<param name="movie" value="zanmantou.swf"></param>
<param name="quality" value="best"></param>
<param name="scale" value="noscale"></param>
<param name="salign" value="lt"></param>
<param name="bgcolor" value="#FFFFFF"></param>
<param name="FlashVars" value="c=config.xml&l=medialist.xml"></param>
</object>