FLV Flash Video Player mit Fullscreen-Mode / Version 0.2

Infos

Nach der Version 0.1 gibt’s nun eine verbesserte Variante des Flashvideo Players. Zum Einbinden von .flv-Videos wird nun Flash (also das Authoring Tool) nicht mehr benötigt.

Das Verknüpfen des Videos mit dem Player geschieht durch einen einfachen Parameter in der Pfadangabe (z.B. …/flashvideo-player.html?flashvideo=demo.flv). Zusätzliche können weitere Parameter angegeben werden (Loop, Autoplay, Skin).

Die Videos werden im „normalen“ Modus automatisch pixelgenau dargestellt. Der Player skaliert also selbst auf die Größe des Videos.

Fullscreen

Die modifizierte FLV Playback Komponente enthält rechts unten einen Button für den Fullscreen-Modus. Der ursprünglich im Skin enthaltene „forwardButton“ wurde für den Fullscreen-Modus zweckentfremdet. Nach dem Laden der Skin-Datei wird dem forwardButton die neue Fullscreen-Funktionalität zugewiesen wird.

Der Hintergrund wird im Vollbildmodus schwarz, dazu wurde ein Codefragment von Brajeshwar.com verwendet. Außerdem wird das Video horizontal zentriert und unter Berücksichtigung des Videoseitenverhältnisses und des Bildschirmseitenverhältnis hochskaliert.

Skin

Zusätzlich wurde einiges an der ursprünglichen Skin-Datei („SteelExternalAll.swf“ von Adobe) verändert:

• alle Symbole wurden durch geglättete (Vektor-)Symbole ersetzt, die auch im Vollbild-Modus „scharf“ sind
• „forwardButton“-Symbol durch ein „Fullscreen“-Symbol ersetzt

Es sind zwei Skins enthalten:

• Skin von Version 0.1: helleres Grau in Kombination mit dunklen Symbolen
• Skin von Version 0.2: schwarz

Hinweis in eigener Sache: Die Grundlagen für die Verwendung der FLV Playback Komponente und die Modifikation von FLV Playback Skins finden sich in Kapitel 13 und den dazugehörigen Workshops von „Interaktives Video im Internet mit Flash“.

Steuerung

Über folgende Parameter kann der Player gesteuert werden.

• flashvideo=demo.flv (Name der Videodatei)
• loop=true (Video läuft im Loop;optional)
• autoplay=true (Video startet automatisch beim Laden der Seite; optional)
• skinfile=skin.swf (Laden eines anderen Player-Aussehens; optional)

Mehre Parameter können durch das „&“-Zeichen aneinander gehängt werden, z.B.:
[as]flashvideo-player.html?flashvideo=demo.flv&skinfile=video-flash-de-skin2.swf&autoplay=true&loop=true[/as]

Zur Übergabe der Parameter kommt SWFObject von Geoff Stearns zum Einsatz. Mithilfe von SWFObject kann auch der sichtbare Flashbereich und die Flashversions-Abfrage geändert werden. Die relevante Zeile in der HTML-Datei lautet:
[as]
var so = new SWFObject(„flvplayer.swf“, „flv-viewer“, „640“, „500“, „9“, „#FFFFFF“);
[/as]

Demo:

Demo (schwarzes Skin)
Demo (graues Skin)
(neuster Flash Player 9 wird benötigt, siehe auch vorigen Beitrag)

[ad]

Download:

FLV Flashvideoplayer 0.2 (.html & .swf)
Source Files als ZIP-Archiv (.fla-files)

Update: Eine neue Version des Players gibt es im Beitrag FLV Flash Video Player Version 0.2