www.video-flash.de

Alles rund um Web & Mobile

Ältere Versionen des FLV Players

Ältere Versionen (2007)

Der Vorgänger gibt es hier:
Version 0.5 als ZIP-Archiv (Flash Player 8 und 9, ActionScript 2)
FLV Flash Fullscreen Video Player für den Flash Player 9 (erstes Release von 2007)

Weitere Links und Downloads für Vorgängerversionen:

Demonstration (0.5)

(Flash Player 8 oder 9 wird benötigt)

Dokumentation des FLV Player (0.5)

Features des FLV Flash Fullscreen Video Player

Fullscreen

Rechts unten ist ein Button für den Vollbildmodus. Der Hintergrund wird im Vollbildmodus schwarz. Das Video wird unter Berücksichtigung des Video- und Bildschirmseitenverhältnisses hochskaliert. Es wird im Vollbildmodus horizontal und vertikal zentriert. Der Fullscreen-Mode benötigt den Flash Player 9.

Hinweis für Flasher: 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.

Skin

Der Player kann mit allen gewöhnlichen Skins für die FLV Playback Komponente verwendet werden. Die beiden beiliegenden Skin (hellgrau und schwarz) haben folgende Vorteile:

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

FLV Flash Video Player v0.2 - black SkinFLV Flash Video Player - grey Skin

Weitere Skins zum Download siehe unter "Download".

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".

Vorschaubild

Es kann ein Vorschaubild als Platzhalter verwendet werden. Das Bild muss als JPG-Datei vorliegen und den gleichen Dateinamen wie das Video haben (z.B. demo.jpg, wenn das Video demo.flv heißt). Ist eine solche Datei vorhanden, wird diese automatisch eingebunden und angezeigt.

Ist die Bilddatei nicht vorhanden, wird stattdessen eine graue Box mit 400x300 Pixeln angezeigt.

Vorschaubilder aus Flashvideo können auf einfache Weise z.B. mit dem neusten VLC-Player erstellt werden. Das Flashvideo mit VLC laden. Unter "Einstellungen > Video > Schnappschussformat" das JPG-Format wählen. Dann mit der rechten Maustaste auf das Videobild klicken und "Schnappschuss" wählen. Es wird ein Standbild aus dem Video erstellt.

Soll das Video direkt (ohne Vorschaubild) gestartet werden, kann der Parameter "autoplay" verwendet werden (siehe "Steuerung").

Untertitel

Optional können die Flashvideos mit Untertiteln versehen werden. Dazu bedarf es einer XML-Datei mit den Untertiteln, die folgendermaßen aufgebaut sein sollte:

XML:
  1. <?xml version="1.0" encoding="utf-8"?>
  2.  
  3. >
  4.   second="6">Hola y bienvenidos a la final del Mundial de Fútbol 2006 en Alemania.  >
  5.   second="11">¡la élite mundial contra la nación anfitriona!  >
  6.   second="15"> esto promete, y ¡¡Ronaldihno marca!! ¡¡1:0!!|El Equipo de las Estrellas se adelanta.  >
  7.   second="20">  >
  8.  
  9. >

Die Zahl (second="6") gibt die Zeit in Sekunden an, wann der jeweilige Untertitel erscheinen soll. Zeile 7 zeigt ein Beispiel, wie man einen "leeren" Untertitel einfügen kann bzw. den vorigen Untertitel löscht. Die Untertitel werden natürlich im Fullscreen-Modus entsprechend mitskaliert.

Für eine bessere Lesbarkeit sind die Text schwarz mit einem leichten, weichgezeichneten weißen Hintergrund.

Preloader

Preloader (schwarz)Der Standard-Preloader ist schwarz und für helle Hintergrundfarben gedacht. Für dunkle Hintergrund nimmt man die Datei "preloader_white.swf" und benennt sie in "preloader.swf" um. Selbstverständlich kann man den Preloader auch mit einer eigenen Animation ersetzen.

Einbindung in die eigene Seite

Enthaltene Dateien

Folgende Datei müssen vorhanden sein (ab v0.5):

  • flvplayer.swf: Hauptdatei des Videoplayers
  • fp.swf: Hilfsdatei (wird nachgeladen)
  • preloader.swf Preloader-Animation
  • video-flash-de-skin.swf Skindatei mit den Steuerelemente (Play, Pause, ..)
  • swfobject.js: Javascript-Datei des SWFObjects; verantwortlich für die Einbindung und Flasherkennung

Steuerung per Parameter

Über folgende Parameter kann der Player gesteuert werden. Die Parameter werden einfach an die URL angehängt.

  • 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)
  • captionsfile=english.xml (Laden einer Untertiteldatei im XML-Format; optional)

Direkt nach der URL folgt ein Fragezeichen, mehre Parameter können durch das "&"-Zeichen aneinander gehängt werden, z.B.:

HTML:
  1. flashvideo-player.html?flashvideo=demo.flv&skinfile=video-flash-de-skin2.swf&autoplay=true&loop=true

Änderungen im SWFObject

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:

JavaScript:
  1. var so = new SWFObject("flvplayer.swf", "flv-viewer", "640", "500", "9", "#FFFFFF");

Man kann den Videopfad auch direkt im SWFObject ändern. Sieht dann z.B. so aus:

JavaScript:

Einbindung per iFrame

Auf sehr einfache Weise kann der Player mithilfe eines iFrame-Tag in eine HTML-Datei eingebunden werden. Dazu muss nur den Pfad zur Datei flashvideo-player.html und der Name der Videodatei angepasst werden.

HTML:
  1. src="http://www.meinedomain.de/flashvideo-player.html?flashvideo=http://www.meinedomain.de/meinvideo.flv" width="450" height="400" frameborder="0" scrolling="no">


Schreibe einen Kommentar


Quite impressive

The latest releases have been downloaded over 100,000 times.

Suche

Über diesen Blog

Florian Plag Dies ist ein Blog von Florian Plag. Autor des Buches „Interaktives Video im Internet mit Flash”

Alles rund um Web. | Flash, Video, HTML, HTML5, User Experience, Usability, etc.

Embed SWF

SWF Dateien einbetten leicht gemacht: embed-swf.org

HTML5 Mobile

Mein neuer Blog HTML5 Mobile html5-mobile.de. Außerdem: streaming-blog.com AirPlay und eBook Reader Kindle.