FunkyPlayer - Ist ein voll ausgereifter, mächtiger und vollständig anpassbarer Flash Videoplayer
und Flash Video Player bzw. Flash Video-Player geschrieben in Actionscript 3.

• FunkyPlayer in Webseite einbetten
• Embed Optionen
• FunkyPlayer stylen und anpassen

FunkyPlayer stylen und anpassen

Das gesamte Layout dieses Videoplayers ist konfigurierbar. Nehmen sie die Anpassungen in der XML-Datei vor, die im "skins" Verzeichnis enthalten ist. Alles was sie brauchen ist ein einfacher HTML-Editor. Achtung verwenden sie unter keinen Umständen ein Textverarbeitungsprogramm wie z.B. Word um die Konfigurationsdatei zu bearbeiten. Die beste Methode um das Verhalten der einzelnen Elemente zu erforschen ist mit ihnen herumzuspielen. Die meisten Elemente und Optionen sollten allein durch ihren Namen selbsterklärend sein. Es wird empfohlen die Standard XML-Datei vor dem Bearbeiten separat zu sichern, dann kann diese als Backup dienen, falls sie etwas falsch konfiguriert haben und nicht weiter wissen.

Anpassbare Elemente

Es gibt einige gemeinsame Optionen, die für alle Elemente gültig sind und einige spezielle die nur bei einzelnen Elementen funktionieren. In jedem Fall dürfen keine Elemente ganz aus der Konfigurationsdatei entfernt werden, auch wenn sie glauben, sie brauchen sie nicht. Bearbeiten sie daher immer nur die Werte der Elemente und niemals die Elementnamen. Entfernen sie keinen Elemente oder Optionen aus der Datei! Sie können Elemente anhand der "enable"-Option ein und ausschalten. Wenn sie sich nicht sicher sind, was die eine oder andere Option zu bedeuten hat, behalten sie die Sandardwerte.

Beispiel Skin

Die Standard Konfigurationsdatei:

<videoPlayer>
  <videoPlayerContainer           
    posX="0"                      
    posY="0"
    width="580"                   
    height="440"                 
    backgroundFile=""            
    backgroundColor1="0x000000"  
    backgroundColor2="0x000000"   
    backgroundAlpha="1"           
    borderWidth="5"               
    borderRadius="0"              
    borderColor="0x33cc33"        
    borderAlpha="0.8">            
  </videoPlayerContainer>
 
  <video                          
    posX="10"                     
    posY="10"                     
    maxWidth="560"               
    maxHeight="390"
    startImageFile="funkyplayer/images/video-preview.jpg">             
  </video>
 
  <videoControllBar
    posX="3"                      
    posY="398"
    width="575"
    height="40"
    backgroundFile=""
    backgroundColor1="0x000000"
    backgroundColor2="0x000000"
    backgroundAlpha="1"
    borderWidth="0"
    borderRadius="0"
    borderColor="0xFFFFFFFF"
    borderAlpha="0"
    fullScreenAlign="bottom"
    fullScreenPosY="10">
  </videoControllBar>
 
  <timeDisplay
    enabled="true"
    posX="430"
    posY="10"
    width="78"
    height="20"
    backgroundColor="0x999999"
    backgroundAlpha="0.2"
    borderWidth="0"
    borderRadius="8"
    borderColor="0xCCCCCC"
    borderAlpha="0.5"
    paddingTop="4"
    fontSize="9"
    fontColor="0xeeeeee"
    fontWeight="normal">
  </timeDisplay>
 
  <pauseButton
    enabled="true"
    posX="5"
    posY="5"
    playButtonFile="funkyplayer/skins/default/images/play.png"
    playButtonHoverFile="funkyplayer/skins/default/images/play_hover.png"
    pauseButtonFile="funkyplayer/skins/default/images/pause.png"
    pauseButtonHoverFile="funkyplayer/skins/default/images/pause_hover.png">
  </pauseButton>
 
  <replayButton
    enabled="true"
    replayButtonFile="funkyplayer/skins/default/images/replay.png"
    replayButtonHoverFile="funkyplayer/skins/default/images/replay_hover.png">
  </replayButton>
 
  <stopButton
    enabled="true"
    posX="60"
    posY="5"
    stopButtonFile="funkyplayer/skins/default/images/stop.png"
    stopButtonHoverFile="funkyplayer/skins/default/images/stop_hover.png">
  </stopButton>
 
  <fullscreenButton
    enabled="true"
    posX="115"
    posY="5"
    fullscreenButtonFile="funkyplayer/skins/default/images/fullscreen.png"
    fullscreenButtonHoverFile="funkyplayer/skins/default/images/fullscreen_hover.png">
  </fullscreenButton>
 
  <backwardButton
    enabled="true"
    posX="170"
    posY="5"
    backwardButtonFile="funkyplayer/skins/default/images/backward.png"
    backwardButtonHoverFile="funkyplayer/skins/default/images/backward_hover.png">
  </backwardButton>
 
  <forwardButton
    enabled="true"
    posX="225"
    posY="5"
    forwardButtonFile="funkyplayer/skins/default/images/forward.png"
    forwardButtonHoverFile="funkyplayer/skins/default/images/forward_hover.png">
  </forwardButton>
 
  <volumeControll 
    enabled="true" 
    volumeButtonFile="funkyplayer/skins/default/images/volume.png"
    posX="518"
    posY="5">
    <trackBg
      posX="15"
      posY="80"
      width="20"
      height="80"
      backgroundColor="0x000000"
      backgroundAlpha="0.3"
      borderWidth="0"
      borderRadius="5"
      borderColor="0xFFFFFF"
      borderAlpha="0.5">
    </trackBg>
 
    <track
      posX="6"
      posY="5"
      width="8"
      height="76"
      backgroundColor1="0x3399cc"
      backgroundColor2="0x3399cc"
      backgroundAlpha="0.8"
      borderWidth="0"
      borderRadius="3"
      borderColor="0x999999"
      borderAlpha="0.5"
      sliderButtonFile="funkyplayer/skins/default/images/slider.png"
      sliderButtonAlpha="1">
    </track>
  </volumeControll>
 
  <windTrack enabled="true">
    <trackBg
      posX="280"
      posY="10"
      width="145"
      height="20"
      backgroundColor="0x999999"
      backgroundAlpha="0.2"
      borderWidth="0"
      borderRadius="8"
      borderColor="0xFFFFFF"
      borderAlpha="0.5">
    </trackBg>
 
    <track
      posX="5"
      posY="6"
      width="135"
      height="8"
      backgroundColor1="0x84CEFD"
      backgroundColor2="0x003366"
      loadProgressColor1="0x3399cc"
      loadProgressColor2="0x003366"
      backgroundAlpha="1"
      borderWidth="0"
      borderRadius="3"
      borderColor="0x999999"
      borderAlpha="0.5"
      sliderButtonFile="funkyplayer/skins/default/images/slider.png"
      sliderButtonAlpha="1">
    </track>
  </windTrack>
 
  <watermark
    enabled="true"
    posX="440"
    posY="20"
    fullScreenAlign="top_right"
    fullScreenPosX="60"
    fullScreenPosY="60"
    watermarkFile="funkyplayer/skins/default/images/watermark.png">
  </watermark>
</videoPlayer>

Embed Optionen

Die Optionen zum Einbetten sind die Optionen, die sie direkt in das <object> and <embedd> tag schreiben wie hier beschrieben. Dies sind nicht die Syling-Optionen für das Erscheinungsbild des Players. Diese sind hier beschrieben. Sie müssen die Embed-Optionen (mit Ausnahme von width und height) in einer bestimmten Art und Weise notieren, nämlich als FlshVars-String. Hier ein Beispiel für eine solche Notation: attribute1=value1&attribute2=value2
Wie sie sehen, müssen sie "schlüssel=wert" Paare notieren, die durch ein Kaufmannsund "&" verbunden sind. Benutzen sie keine Sonderzeichen wie: ?,ß,ü,$,", ', & und keine Leerzeichen...
Erlaubte Zeichen sind: a-z, A-Z, 0-9, _, -, ., /, :.

Optionen:

• skin

Der Pfad zur Konfigurationsdatei für das Erscheinungsbild (Skin).
Beispiel: skin=funkyplayer/skins/default/default.xml

• autostart

Mögliche Werte: true | false
Wenn sie true verwenden startet der Player mit dem Abspielen automatisch.
Beispiel: autostart=true

• buffertime

Nummer in Sekunden die die Vorladezeit definiert.
Example: buffertime=1

• streamingType

Mögliche Werte: progressiveDownload | streamingServer
Verwenden sie progressiveDownload um Video-Dateien abzuspielen, die direkt auf ihrem Server liegen.
Verwenden sie streamingServer wenn sie einen StreamingServer betreiben oder ihre Videos auf einem entfernten StreamingServer liegen..
Beispiel: streamingType=progressiveDownload

• progressiveDownloadFile

Der Pfad zur FLV Videodatei. Lassen sie den Wert frei, wenn sie streamingServer als streamingType spezifizieren.
Beispiel: progressiveDownloadFile=funkyplayer/videos/video.flv

• streamingServer

Die URL zum StreamingServer. Lassen sie den Wert frei, wenn sie progressiveDownload als streamingType spezifizieren.
Beispiel: streamingServer=rtmp://myserver.com/

• streamName

Der Name des Streams. Lassen sie den Wert frei, wenn sie progressiveDownload als streamingType spezifizieren.
Beispiel: streamName=video1

• width

Breite des Players in Pixel.
Note: Dies muss der gleiche Wert sein wie <videoPlayerContainer width> in der Skin-Konfiguration.

• height

Höhe des Players in Pixel.
Note: Dies muss der gleiche Wert sein wie <videoPlayerContainer height> in der Skin-Konfiguration.

FunkyPlayer in die Webseite einbetten

Entpacken sie den Download in ihr Webverzeichnis.
Öffnen sie eine beliebige Datei ihrer Webseite und fügen sie das unten zu sehende HTML-Snippet ein. Speichern sie und öffenen das Dokument dann im Browser. FunkyPlayer ist somit eingebettet.

 
<object>
  <embed bgcolor="#000000" width="580" height="440" name="FunkyPlayer" align="middle" 
    allowfullscreen="true" pluginspage="http://www.adobe.com/go/getflashplayer" 
    src="/funkyplayer/FunkyPlayer.swf?skin=/funkyplayer/skins/default/default.xml&streamingType=progre
ssiveDownload&progressiveDownloadFile=/funkyplayer/videos/ice-age.flv&streamingServer=&streamNa
me=&autostart=true" type="application/x-shockwave-flash">
  </embed>
</object>