Mit Reops gibt es einen ersten Videoplayer, der auf dem neuen Open Source Media Framework von Adobe aufsetzt. Eine einfache Integration in die Entwicklungsumgebung, solide technische Basis aufgrund des OSMF und umfangreiche Skinning-Möglichkeiten zeichnen den Player aus. Gründe genug, den Player hier im Blog in Verbindung mit Flash CS4 näher vorzustellen.

The Realeyes OSMF Player Sample (REOPS) offers an excellent base for creating a robust video player utilizing the Open Source Media Framework (OSMF) from Adobe. REOPS is meant to be a building block for developers as well as a visual representation to illustrate the capabilities and how to of the OSMF framework.

Flash CS4 Extension

Der einfachste Weg, um Reops zu nutzen, ist die Installation einer Flash CS4 Extension (.mxp). Diese lädt man einfach herunter und installiert sie per Doppelklick mithilfe des Extension Managers. Nach einem Neustart von Flash CS4 ist nun alles bereit.

Player einbinden

Anschließend steht die Komponente im Komponenten-Panel („Fenster > Komponenten”) von Flash CS4 zur Verfügung. Von dort zieht man sie einfach auf die Bühne. In den Veröffentlichungseinstellung muss man noch zwei Konstanten eintragen (siehe PDF-Anleitung von Reops) und schon kann es losgehen.

Klickt man die Reops-Komponente auf der Bühne an und öffnet den Komponenten-Inspektor („Fenster > Komponenteninspektor”), sieht man lediglich eine einzige Einstellungsmöglichkeit: configPath. Hier fügt man den Pfad zu einer XML-Datei ein, die sämtliche Einstellungen des Players beinhaltet.

Player-Konfiguration über XML

Die XML-Datei besteht (zurzeit) im Wesentlichen aus drei Blöcken: die Playereinstellungen, die abzuspielenden Inhalte und dem Skin. Hier exemplarisch ein gekürzter Auszug:

XML:
  1. <?xml version="1.0" encoding="UTF-8"?>
  2.     width="640" height="480" scaleMode="letterbox"  isLive="false" autoPlay="true" updateInterval="250" hasCaptions="false">
  3.     >
  4.         >
  5.                           […]   
  6.             url="http://mediapm.edgesuite.net/strobe/content/test/AFaerysTale_sylviaApostol_640_500_short.flv" />
  7.         >
  8.     >
  9.     path="Formula.swf">
  10.               […]
  11.     >
  12. >

Abgespielt können dank des OSMF natürlich jegliche Videos (z.B .flv oder .f4v), egal ob Progressive Download, Streaming oder Dynamic Streaming.

Skins

Aktuell liegen mehrere fertige Demonstrations-Skins dem Player bei. Möchte man ein neues Skin erstellen, findet diese man Playerskins als Vorlagen zum Modifizieren unter „Datei > Neu.. > Vorlagen”.

In Flash kann man nun im ersten Schritt alle Grafiken abändern. Danach modifiziert man einzelne Bedienelemente wie Buttons (z.B. der Playbutton), die einfache MovieClips sind. Auf deren Zeitleiste sind die verschiedenen Button-Zustände nacheinander angeordnet (z.B. Up, Down, Disabled, etc.). Dadurch sind auch animierte Übergänge zwischen den einzelnen Zuständen möglich.

Zum Schluss hat man komplette MovieClips (z.B. ControlBar), die alles zusammenfügen. Diese sind wiederum über den Klassennamen aus der XML-Datei erreichbar, wodurch auch zur Laufzeit diverse Konfigurationseinstellungen übertragen werden.

So lässt z.B. in der XML-Datei einstellen, ob die Bedienleiste oben oder unten angezeigt wird, ob sie „draggable” ist oder ob sie automatisch ausgeblendet wird (autoHide). Ein anderes Beispiel wäre der Preloader, der positioniert werden kann (z.B. center oder top).

XML:
  1. path="MySkin.swf">
  2.         id="controlBar"
  3.             elementClass="com.realeyes.osmfplayer.controls.ControlBar"
  4.             initMethod="initControlBarInstance"
  5.             scaleMode="NONE"
  6.             hAdjust="0" vAdjust="0"
  7.             vAlign="BOTTOM"
  8.             autoPosition="true"
  9.             draggable="true"
  10.             autoHide="true" />
  11.         id="loadingIndicator"
  12.             elementClass="com.realeyes.osmfplayer.controls.LoadingIndicator"
  13.             initMethod="initLoadingIndicatorInstance"
  14.             hAdjust="0" vAdjust="0"
  15.             vAlign="CENTER"
  16.             autoPosition="true" />
  17.     >

Fazit

Wie man sieht, scheint das Konzept des Open Source Media Frameworks aufzugehen. Wir können gespannt sein, wie sich die OSMF-Player und vor allem auch die Integration in die IDEs weiterentwickelt.

Das Skinning-Verfahren von Reops macht einen sehr guten ersten Eindruck, es scheint sehr mächtig und durchdacht zu sein. Genauere Information finden sich auch in einer PDF-Anleitung in der Download-Abteilung auf Google Code.

Also, selbst ausprobieren. Was meint ihr dazu?

Link: Reops (Google Code)
Link: Open Source Media Framework (OSMF) (Beiträge hier im Blog)