FLV- und Audio-Player in Weblica einbinden

FLV- und Audio-Player in Weblica einbinden
Einbinden des FLV- und des Audio-Players in Weblica
1/8
®
Gegenstand dieses Dokuments ist das Einbinden der beiden Gratis-Player
"FLV-Player" für die Wiedergabe von Video-Dateien, und
"WP Audio-Player" für die Wiedergabe von Audio-Dateien
1
in das Desktop-CMS Weblica .
Inhaltsübersicht
1
2
Vorbereiten und Durchführen der Player-Einbindung in Weblica................................................................... 1
Der FLV-Player ......................................................................................................................................... 2
2.1
HTML-Beispielcode für den FLV-Player................................................................................................ 2
2.2
Die Parameter des FLV-Players ........................................................................................................... 3
2.3
Tabelle der Parameter des FLV-Players ............................................................................................... 4
2.4
Tastatursteuerung des FLV-Players ..................................................................................................... 5
3 Der WP Audio-Player.................................................................................................................................. 6
3.1
HTML-Beispielcode für den Audio-Player ............................................................................................. 6
3.2
Die Parameter des Audio-Players......................................................................................................... 6
4 Referenzen auf andere Dokumente............................................................................................................. 8
5 Autor und Haftungsausschluss.................................................................................................................... 8
1
Vorbereiten und Durchführen der Player-Einbindung in Weblica
Generell: alle Multimedia-Dateien:
Player,
Javascript-Datei(en) für den Player, und
die Multimedia-Dateien (Video und Audio)
werden in die Weblica-Dateiablage importiert.
Vorgehen:
1.
Multimedia-Dateien ggf. kürzen und ins passende Format konvertieren.
"passendes Format" = das Format, das der jeweilige Player verarbeiten kann.
Hinweis: Das swf-Format kann bei Video-Dateien u. U. zu Wiedergabeproblemen führen, Konversion ins flvFormat ist empfohlen.
2.
Player von der Website des Herstellers herunterladen, falls noch nicht geschehen.
3.
FLV-Player: passenden Player auswählen (mini, normal, maxi, multi).
4.
Player, ggf. Javascript und Multimedia-Dateien in die Weblica-Dateiablage importieren (der Upload auf den
Server erfolgt automatisch durch Weblica beim Publizieren der Webseiten).
5.
Den Code für die Player- und Multimedia-Datei-Einbindung in einen Weblica-HTML-Absatz laden, Beispiele
siehe nachfolgende Kapitel. Referenzen im HTML-Code auf die Dateien in der Dateiablage mittels Weblica2
Ressourcen-Feldern .
Zu beachten: Wird der HTML-Code mit dem Online-Konfigurator des Player-Herstellers erzeugt, sind alle
Dateipfade im Code durch Weblica-Ressourcen-Felder zu ersetzen.
Die beiden Code-Beispiele unten sind valide.
1
2
®
Weblica
ist ein Desktop-CMS der empros GmbH in Gipf-Oberfrick: www.weblica.ch
siehe http://www.weblica.ch/hilfe/inhalte_verwalten/die_absatztypen/html/index.html
© MINOS CONSULTING AG
FLV- und Audio-Player in Weblica einbinden
2
2/8
Der FLV-Player
Der FLV-Player ist ein französisches Produkt (vive la France!) und demzufolge (!) schlank und elegant.
Website: http://flv-player.net/
Der Player kann frei verwendet werden, auch in "kommerziellen" Websites.
Er steht in vier Varianten zur Verfügung:
mini: mit ganz wenigen Bedienelementen (Grösse: 5 KB)
normal: mit vielen Bedienelementen (Grösse: 9 KB)
maxi: mit noch mehr Bedienelementen (Grösse 13 KB)
multi: für die Wiedergabe mehrerer Multimediadateien nacheinander (Grösse 16 KB)
der Vollständigkeit halber: js: ohne graphisches Interface, Steuerung mit Javascript (5 KB).
Mit dem FLV-Player können Video-Dateien im swf- und im flv-Format wiedergegeben werden. Wir empfehlen,
immer das flv-Format zu verwenden. Alle Bedienelemente sind individuell konfigurierbar.
Im Vorbereitungsschritt wird der geeignete Player ausgewählt und in die Weblica-Dateiablage importiert.
Wir empfehlen für die Wiedergabe einzelner Video-Dateien den Maxi-Player.
2.1
HTML-Beispielcode für den FLV-Player
für das Einbinden von Player und Video-Datei mittels des Weblica-HTML-Absatzes in eine Webseite:
<center>
<object type="application/x-shockwave-flash"
data="$(res.4711.flv_player_maxi_swf.path)" width="480" height="295" >
<param name="movie" value="$(res.4711.flv_player_maxi_swf.path)" />
<param name="allowFullScreen" value="true" />
<param name="allowScriptAccess" value="sameDomain" />
<param name="menu" value="true" />
<param name="autoplay" value="false" />
<param name="autoload" value="false" />
<param name="FlashVars" value="flv=$(res.4712.Bergseeli_flv.path)&width=480&heig
ht=295&startimage=$(res.4713.Bergseeli_Startbild_jpg.path)&bgcolor1=0E3F8D&show
stop=1&showfullscreen=1&showtime=1&showplayer=always&showvolume=1&showiconplay=1
&buffer=10&buffershowbg=0&buffermessage=" />
<p style="color:red; font-size:80%; background-color: #FFFFCF;">
Sie benötigen den Adobe Shockwave Flash Player, um das Video wiedergeben zu
können.<br />
Bitte laden Sie hier den <a href="http://get.adobe.com/de/shockwave/"
target="_blank">Adobe Shockwave Player</a> herunter.<br />
Ausserdem muss JavaScript in Ihrem Browser aktiviert sein.</p>
</object>
</center>
Code-Anpassungen (Anpassung der Ressourcenfelder):
$(res.4711.flv_player_maxi_swf.path)
durch eigenen Playerpfad (und Player) ersetzen
width=... height=...
Breite und Höhe - zweimal - anpassen
$(res.4712.Bergseeli_flv.path)
durch eigenen Multimediadateipfad ersetzen
$(res.4713.Bergseeli_Startbild_jpg.path)
durch eigenen Startbildpfad ersetzen
Die Meldung zum fehlenden Shockwave-Player kann individuell gestaltet werden.
© MINOS CONSULTING AG
FLV- und Audio-Player in Weblica einbinden
3/8
Die "value"-Klausel enthält die Parameter (Optionen) für die Gestaltung der Bedienelemente
(Benutzeroberfläche) und die Steuerung (durch den Benutzer) des Players.
Der HTM-Code kann auch mit dem Code-Konfigurator http://flv-player.net/players/maxi/generator/ des Players
online generiert werden. Der Konfigurator umfasst 11 Konfigurationskategorien ("Category"), Hilfe ist für jeden
Parameter verfügbar.
Die Parameter (Optionen) werden im nächsten Kapitel dokumentiert.
Screenshot:
Quelle des Beispiels: http://www.babox.ch/box/videos/Video001.html
2.2
Die Parameter des FLV-Players
Format der Parameter in der "value"-Klausel (siehe Beispielcode oben):
parametername=wert&
& ist der Delimiter und schliesst jeden Parameter ab.
Alle Werte, z. B. die Breite oder der Titel, werden ohne Hochkommata eingegeben. Einheiten wie z. B. px (Pixel)
werden nicht angegeben. Texte, z. B. der Titel eines Videos, können Blanks und Umlaute enthalten.
Alle Farbangaben erfolgen mit sechsstelligem Hex-Farbcode (ohne vorangestelltes #).
Die Tabelle der Parameter befindet sich auf der nächsten Seite.
Farbkennung der Parameter in der Tabelle:
grüner Hintergrund: wichtige Parameter
gelber Hintergrund: weitere nützliche Individualisierungsoptionen
ohne Hintergrund: wird selten benötigt
© MINOS CONSULTING AG
FLV- und Audio-Player in Weblica einbinden
2.3
4/8
Tabelle der Parameter des FLV-Players
Parametername
flv
width
height
title
startimage
showtitleandstartimage
autoplay
buffermessage
showstop
showvolume
showtime
showplayer
showloading
showfullscreen
loop
showiconplay
iconplaycolor
iconplaybgcolor
iconplaybgalpha
loadingcolor
margin
bgcolor
bgcolor1
bgcolor2
buttoncolor
buttonovercolor
slidercolor1
slidercolor2
sliderovercolor
volume
playertimeout
autoload
buffer
buffercolor
bufferbgcolor
buffershowbg
config
configxml
Beschreibung
URL des wiederzugebenden Videos
Video-Breite (in Px, ohne Angabe der Einheit)
die width-Grösse in der value-Klausel und die width-Grösse im width-Attribut (nach
dem data-Attribut) müssen übereinstimmen, massgebend ist die Angabe im widthAttribut
Videohöhe (in Pixel, ohne Einheit)
die Grösse des heigth-Parameters muss mit der Grösse im height-Attribut
übereinstimmen
Höhenberechnung, wenn der Bedienbalken dauerhaft angezeigt wird (siehe unten:
showplayer=always): Video-Höhe + Bedienbalken 20 Px + Margin-Höhe
Videotitel
Startbild: URL einer jpg-Datei; wird bis zum Start des Videos angezeigt
=1 für die Anzeige des Video-Titels und des Startbilds
=1 für automatische Wiedergabe, Default: 0
Puffermessage, Default: "Buffering _n_" mit "_n_" in Prozent.
Leerstring unterdrückt Puffermessage.
=1 für Anzeige des Stop-Buttons
=1 für Anzeige des Regelbuttons für die Lautstärke
=1 für Anzeige der Wiedergabe-Zeit (Default), =2 für Anzeige der Restzeit
Anzeige des Bedienbalkens: =autohide (Default) , =always oder =never
Anzeige des Ladebalkens: autohide, always oder never
=1 für Anzeige des Fullscreen-Buttons
=1 für Endlossschleife (Endloswiedergabe) (0: Video wird nur einmal
wiedergegeben, Default)
=1 für die Anzeige des PLAY-Icons in der Mitte
Farbe des PLAY-Icons
Hintergrundfarbe des PLAY-Icons
Transparenz des PLAY-Icons
Farbe des Ladebalkens
Rahmenbreite des Player in Pixel, Default: 5
bei Änderung der Rahmenbreite auch width und heigth anpassen
Hintergrundfarbe des Rahmens
Verlauf-Hintergrundfarbe Rahmen oben (Verlauf gibt schönen Effekt)
Verlauf-Hintergrundfarbe Rahmen unten
Farbe der Buttons
Hover-Farbe der Buttons
erste Verlaufsfarbe des Sliders (Fortschrittsanzeige, Schieber)
zweite Verlaufsfarbe des Sliders
Hover-Farbe des Sliders
Anfangslautstärke, zwischen 0 und 200. Default: 100
Timeout in Millisekunden für das Verbergen des Players, wenn Parameter
showplayer der Wert "autohide" zugewiesen wurde. Default: 1500
=1 für das automatische Laden
Pufferung in Sekunden, Default: 5
Farbe der Puffermessage
Hintergrundfarbe der Puffermessage
=0 verbirgt Hintergrundfarbe der Puffermessage
URL des Konfigurationsfiles im txt-Format
URL des Konfigurationsfiles im xml-Format
© MINOS CONSULTING AG
FLV- und Audio-Player in Weblica einbinden
Parametername
titlesize
titlecolor
srt
srtcolor
srtbgcolor
srtsize
srturl
showswitchsubtitles
showmouse
skin
playercolor
loadonstop
onclick
onclicktarget
ondoubleclick
ondoubleclicktarget
videobgcolor
shortcut
playeralpha
phpstream
top1
netconnection
Beschreibung
Fontgrösse des Videotitels, Default: 20 Px
Farbe des Videotitels, Default: ffffff
=1 Untertiteldatei (im srt-Format) soll verwendet werden, Default: 0
Farbe der Untertitel
Farbe des Untertitel-Hintergrunds
Fontgrösse der Untertitel, Default: 11 Px
URL des Untertitel-Files (wenn automatische Erkennung unerwünscht)
=1 für Anzeige des Buttons für die Anzeige bzw. das Ausblenden der Untertitel
Anzeige des Mauszeigers: always, autohide oder never
URL einer jpg-Datei (für die Player-Oberfläche)
Hintergrundfarbe des Player-Bars (Bediener-Balken)
=0 steuert das Stoppen des Ladens des Videos, wenn der Stop-Button geklickt
wird
Ziel-URL beim Klick aufs Video
Ziel-Fenster beim Klick auf das Video. Default: _self, für neues Fenster / neuen
Tab auf _blank setzen.
Aktion bei Doppelklick: none, fullscreen, playpause, oder URL
analog onclicktarget
Hintergrundfarbe, wenn kein Video angezeigt (abgespielt) wird
=0 um Tastatur-Shortcuts zu deaktivieren (siehe unten)
Transparenz des Player-Bars (Bediener-Balkens), zwischen 0 und 100
=1 um php-Stream zu nutzen
=url|x|y für die Überlagerung des Videos mit einem Bild (URL) mit
Startkoordinaten x und y
URL des RMTP-Servers (Real Time Messaging Protocol)
Weitere Angaben zu den Parametern finden sich auf der Website des Herstellers:
http://flv-player.net/players/maxi/documentation/
2.4
Tastatursteuerung des FLV-Players
Taste
Leertaste
P
S
C
F
Pfeil links
Pfeil rechts
Pfeil nach oben
Pfeil nach unten
+
-
5/8
Beschreibung
Play / Pause
Play / Pause
Stop
Untertitel zeigen / verbergen
Fullscreen-Modus
5 Sekunden zurück
5 Sekunden vor
Lautstärke grösser
Lautstärke niedriger
Lautstärke grösser
Lautstärke niedriger
© MINOS CONSULTING AG
FLV- und Audio-Player in Weblica einbinden
3
6/8
Der WP Audio-Player
Der WordPress Audio-Player ist ein Gratis-Player für die Wiedergabe von Audio-Dateien im mp3-Format.
Website: http://wordpress.org/extend/plugins/audio-player/download/ ( Standalone version)
Aus dem zip-File die beiden Dateien audio-player.js und player.swf extrahieren und in die Weblica-Dateiablage
importieren. Wir haben den Player in audio-player.swf umbenannt, siehe Codebeispiel unten.
Der Player kann frei verwendet werden, auch in "kommerziellen" Websites.
Der Player hat eine konfigurierbare bedienerfreundliche Benutzeroberfläche.
Mit ihm können auch mehrere Audio-Dateien in einem Player wiedergegeben werden (einfache Playlist).
3.1
HTML-Beispielcode für den Audio-Player
für das Einbinden von Javascript, Player und Audio-Datei mittels des Weblica-HTML-Absatzes in eine Webseite:
<script language="JavaScript" src="$(res.49.audio_player_js.path)"></script>
<object type="application/x-shockwave-flash" data="$(res.48.audio_player_swf.path)"
id="audio1" height="24" width="300">
<param name="movie" value="$(res.48.audio_player_swf.path)">
<param name="FlashVars"
value="playerID=audio1&soundFile=$(res.52.Telemann_Triosonate_A_Dur_mp3.path)
&animation=no&loader=0xECBA88&tracker=0xFAE8CC&righticon=0xFF0000&rightbghove
r=0xECBA88&titles=Telemann: Triosonate A-Dur - Vivace">
<param name="quality" value="high">
<param name="menu" value="true">
<param name="name" value="Telemann Triosoante">
<param name="wmode" value="transparent">
<p style="color:red; font-size:80%; background-color:#FFFFCF;">
Sie benötigen den Adobe Shockwave Flash Player, um die Audiodatei wiedergeben zu
können.<br />
Bitte laden Sie hier den <a href="http://get.adobe.com/de/shockwave/"
target="_blank">Adobe Shockwave Player</a> herunter.<br />
Ausserdem muss JavaScript in Ihrem Browser aktiviert sein.</p>
</object>
Code-Anpassungen analog FLV-Player oben.
Beim Einbinden mehrerer Audio-Dateien in eine Webseite unbedingt die id-Namen ("audio1") anpassen (siehe
auch die Instruktionen des Herstellers). Unser Vorgehen: durchnummerieren (audio1, audio2, usw.).
Tutorial für die Konfiguration: http://www.macloo.com/examples/audio_player/
Konfigurationsanleitung: http://wpaudioplayer.com/standalone/ (nicht ganz fehlerfrei)
Screenshot:
Quelle des Beispiels: http://www.renate-steiner.ch/kontakt/bestellung_cd/index.php
3.2
Die Parameter des Audio-Players
Format der Parameter in der "value"-Klausel (siehe Beispielcode):
parametername=wert&
& ist der Delimiter und schliesst jeden Parameter ab.
© MINOS CONSULTING AG
FLV- und Audio-Player in Weblica einbinden
7/8
Alle Werte, z. B. der Wert von "animation" oder der Titel, werden ohne Hochkommata eingegeben. Einheiten wie
z. B. px (Pixel) werden nicht angegeben. Texte, z. B. der Titel eines Audios, können Blanks und Umlaute
enthalten, aber keine Kommata.
Zu beachten: Kommata werden im Titel als Trennzeichen zwischen mehreren Titeln verwendet.
Alle Farbangaben erfolgen mit sechsstelligem Hex-Farbcode mit vorangestelltem "0x".
Farbkennung der Parameter in der Tabelle: wie oben beim FLV-Player.
Parametername
Beschreibung
soundFile
URL(s) der Audiodatei(en), mehrere URLs durch Komma getrennt
width
Breite des Players in Pixel, Default: 290 (in schmalen Spalten reduzieren)
titles
Tracktitel, Titel mehrerer Tracks durch Komma getrennt
loop
=yes oder no, Endloswiedergabe; Default: no
animation
=no für dauerhaft vollständige Anzeige des Players (ausgeklappt)
initialvolume
Anfangslautstärke, zwischen 0 und 100, Default: 60
remaining
=yes zeigt Restzeit statt Wiedergabezeit
authors
Namen der Künstler, Interpreten usw, durch Komma getrennt
Farben der Bedienelemente, siehe Abbildung unten: (Default-Farben: auf der nächsten Seite)
skip
siehe Abbildung: 0 - nur bei Wiedergabe Playlist (mehrere Audios)
leftbg
siehe Abbildung: 1
lefticon
siehe Abbildung: 2
bg
siehe Abbildung: 3
righticon
siehe Abbildung: 4
rightbg
siehe Abbildung: 5
text
siehe Abbildung: 6
tracker
siehe Abbildung: 7
loader
siehe Abbildung: 8
track
siehe Abbildung: 9
border
siehe Abbildung: 10
bgcolor
siehe Abbildung: 11
volslider
siehe Abbildung: 12
voltrack
siehe Abbildung: 13
righticonhover
Hoverfarbe für Nr. 4
rightbghover
Hoverfarbe für Nr. 5
Bedienelemente des Audio-Players:
Bildquelle: http://wpbtips.wordpress.com/2009/05/10/customizing-the-audio-player/
© MINOS CONSULTING AG
FLV- und Audio-Player in Weblica einbinden
8/8
Default-Farben des Audio-Players:
bg=0xF8F8F8
leftbg=0xEEEEEE
lefticon=0×666666
rightbg=0xCCCCCC
rightbghover=0×999999
righticon=0×666666
righticonhover=0xFFFFFF
text=0×666666
slider=0×666666
track=0xFFFFFF
border=0×666666
loader=0x9FFFB8
bgcolor=0xFFFFFF
4
Referenzen auf andere Dokumente
Die Ergebnisse unserer Evaluation verschiedener Multimedia-Player und verschiedener Methoden des
Einbindens externer Player in Weblica sind in "Video und Audio in Weblica einbinden" dokumentiert (sowohl im
Word- als auch im PDF-Format verfügbar).
Ein Dokument mit der Beschreibung der Player-Architektur ist zur Zeit im Entstehen.
5
Autor und Haftungsausschluss
BaBox
Minos Consulting AG
Steinwiesstrasse 34
8330 Pfäffikon ZH
Schweiz
www.babox.ch
Alle Angaben ohne Gewähr.
Die hier publizierten Code-Beispiele sind praxiserprobt und funktionstüchtig. Eine Gewähr für eine allgemeine
Funktionstüchtigkeit kann nicht übernommen werden.
Stand: November 2011
© 2011 BaBox - Minos Consulting AG - 8330 Pfäffikon ZH - Schweiz / Switzerland
© MINOS CONSULTING AG