Die ExternalInterface Klasse von Flash ist eine Programmier-Schnittstelle, die die Kommunikation zwischen ActionScript und der “Außenwelt” (z.B. einer HTML-Seite mit JavaScript) ermöglicht.

Ein kurzes Beispiel zeigt, wie die Kommunikation in beide Richtungen mithilfe des populären SWFObjects funktioniert.

(weiterlesen…)

Im Frühjahr hat YouTube eine Flash API herausgebracht, die zahlreiche Funktionen anbietet. Besonders interessant sind z.B. der “Chromeless Player”, der sich mit einem eigenen Skin versehen lässt. Aber auch das Integrieren des YouTube-Players in eigene Flashprojekte oder das Anpassen des YouTube-Players gehören dazu.

Grund genug, eine kleine Reihe an Beiträge zur YouTube API zu schreiben, die zeigt, wie die YouTube API genau funktioniert. Die verwendete Flash API (AS2) ist übrigens quasi identisch im Befehlsatz mit der JavaScript API.

Im ersten Teil geht es um die ersten Schritte: die grundsätzliche Einbettung in Flash und das Event für den Player-Zustand. Der Quellcodes (.fla) können am Ende des Beitrags heruntergeladen werden.

(weiterlesen…)

Ä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:

• Sources von 0.5 als ZIP-Archiv (.fla, .as)
• Link: Weitere Skins für die FLV Playback Komponente
• Link: Schlankes Skin für die FLV Playback Komponente
• Download: video-flash-de-skin2.swf (graues Skin mit Fullscreen-Button als ZIP-Archiv)
• Download: preloader_white.swf (ZIP-Archiv)

Demonstration (0.5)

• Demo (Vorschaubild vorhanden; schwarzes Skin)
• Demo (Autoplay; graues Skin) target="_blank"
• Demo (kein Vorschaubild vorhanden)
• Spanische Untertitel (nur die ersten 20 Sekunden sind untertitelt)

(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

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 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:

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

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

Änderungen im SWFObject

Zur Übergabe der Parameter kommt 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:

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

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.

ASTRA Components ist ein kostenloses Set an Komponenten von Yahoo!. Es beinhaltet fünf Elemente:

• Tree
• Menu
• TabBar
• AutoComplete
• Charts

(weiterlesen...)

You can find all the necessary files of the FLV Flash Fullscreen Video Player (including sources) in the download package.

(FLV Player 1.9.7, .zip, , )

Donations

I want to help: Please donate for this project. You can choose the amount by yourself.

Changelog

Änderungen (von 1.9.5 auf 1.9.6):

• Support für Livestreaming (neuer Parameter islive (bzw. isLive in ActionScript)

Änderungen (von 1.9.4 auf 1.9.5):

• Verbesserte API für Flash Developer (Neue Funktion updatePlayer, siehe Beispiel)
• Versionsnummer des Players wird im Debugmodus angezeigt

Änderungen (von 1.9.3 auf 1.9.4):

• Parameter Smoothing hinzugefügt (standardmäßig aktiviert)

Änderungen (von 1.9.2 auf 1.9.3):

• Neuer Parameter "debug" (Debugging mit Firefox + Firebug)
• Fehler mit IE7 korrigiert (Javascript-Fehler aufgrund des Debug-Codes)
• Alternativen Preloader hinzugefügt
• Alternatives "Button-Overlay" (Startbutton) hinzugefügt
• Systemanforderungen angepasst: mind. Flash Player 9.0.28 nötig
• Weitere Skins hinzugefügt

Änderungen (von 1.9.1 auf 1.9.2):

• Wordpress Plugin (1.9.2) hinzugefügt
• Parameter "loop" wurde korrigiert.
• Hinweis: Die Dateien buttonoverlay und preloader wurden umbenannt

Änderungen (von 1.9 auf 1.9.1):

• Neuer Parameter "preloader", um einen eigenen Preloader einzubieten
• "buttonOverlay" um einen eigenen Button in das Vorschaubild einzubauen
• "autoplay" spielt das Video ab, ohne das Vorschaubild anzuzeigen
• "loop" wiederholt das Video, wenn es am Ende angekommen ist
• Der Player kann nun sehr einfach in Flash über ActionScript instanziert werden (demo-dynamic-flvplayer-using-as3.fla)

Old versions

FLV Player 1.9.6 als ZIP ()
FLV Player 1.9.5 als ZIP ()
FLV Player 1.9.4 als ZIP ()
FLV Player 1.9.3. als ZIP ()
FLV Player 1.9.2 als ZIP ()
FLV Player 1.9.1 als ZIP ()
Version 1.9 als ZIP-Archiv ()

You can download the old release on

Version older than 1.9 can be found here (German): Ältere Versionen des FLV Players

Einbindung des FLV Players

Ansprache über die URL

Der einfachste Weg ist das Anhängen von Parametern an die URL. Dazu setzt man einen Link auf die Datei flashvideoplayer.html und fügt die Parameter nach folgendem Prinzip an:

Direkt nach der URL muss man ein Fragezeichen setzten. Weitere Parameter können durch das "kaufmännische Und"-Zeichen (&) angehängt werden, z.B.:

Vorteil: Diese Methode ist sehr einfach, da man nur einen Link setzen muss.
Nachteil: Player öffnet sich in einem neuen Fenster.

Einbetten über einen iFrame

Einbetten des Player über ein iFrame.

HTML Generator

Man nutzt den HTML Code Generator. Dieser erstellt den HTML Code für den HTML-Header und -Body.

Setzen der Parameter über JavaScript

Einbetten des FLV Player mithilfe von SWFObject in die HTML-Datei eingebettet.

Mit getQueryParamValue wird erwartet, dass der Parameter an die URL angehängt ist (siehe zuvor).

Man kann Werte bei der Einbettung jedoch auch direkt zuweisen:

Parameter

Hinweis: In ActionScript muss man die AS-typische Schreibweise verwenden (z.B. contentPath statt contentpath)

Pfad zu den Playerdateien (benötigt)

Mit diesem Parameter kann man einen Pfad zu den Dateien des FLV Players setzen. In diesem Verzeichnis müssen alle relevanten Dateien für den FLV Player wie z.B. die SWF-Dateien, das Default-Skin, weitere Skins und das Default-Vorschaubild (defaultpreview.jpg) liegen. Dies hat den Vorteil, dass man den Player zentral abgelegt hat und von überall aufrufen kann.

Beispiel: Setzt man den Parameter auf /stuff/flvplayer und kopiert ein Skin (myskin.swf) in dieses Verzeichnis, muss man den Parameter skin auf myskin.swf setzen. Der Player setzt sich den Pfad dann intern zusammen (/stuff/flvplayer/myskin.swf).

Hinweis: Der Pfad muss absolut angegeben werden, relativ ist nicht möglich. Ein Schrägstrich am Ende wird nicht benötigt.

Pfad zu den Contentdateien (benötigt)

Hier kann eine URL oder ein Pfad zu allen Contentelementen ablegen. Dies ist sinnvoll, wenn alle Videos einer Website zentral ablegen möchte. Der Parameter wirkt sich auf folgende anderen Parameter aus: video, preview, preroll, captions.

Beispiel: Setzt man den Parameter auf /stuff/videos und kopiert ein Vorschaubild (mypreview.jpg) in dieses Verzeichnis, muss man den Parameter preview auf mypreview.jpg setzen. Der Player setzt sich den Pfad dann intern zusammen (/stuff/videos/mypreview.jpg). Wäre contentpath nicht gesetzt, müsste man den vollen Pfad angeben (preview=/stuff/videos/mypreview.jpg).

Hinweis: Der Pfad muss absolut angegeben werden, relativ ist nicht möglich. Ein Schrägstrich am Ende wird nicht benötigt.

Wird der Parameter nicht angegeben, wird im aktuellen Verzeichnis der aufrufenden HTML-/PHP-Datei gesucht (contentpath ist dann "").

Videodatei

Name der Videodatei. Ist contentpath gesetzt, wird video an contentpath angehängt.

Skin (Bedienelemente)

Beim Skin kann eine beliebige Skindatei gewählt werden, die für die FLV Playback Komponente von Flash CS3 gedacht ist.

Wird der Parameter nicht gesetzt oder eine nicht vorhandene Datei angegeben, wird automatisch das Default-Skin verwendet. Das Default-Skin heißt defaultskin.swf und liegt dem Download bei. Liegt das Default-Skin nicht im gleichen Ordner wie die aufrufende HTML-/PHP-Datei, muss der Parameter playerpath gesetzt werden.

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

Skinfarbe

Farbe des Skins als Hexwert. Der Standardwert, wenn nichts angegeben wird, ist 0x555555 (grau).

Skingröße im Fullscreenmode

Dieser Wert bestimmt, wie groß die Bedienelemente des Skins im Fullscreen-Modus sind. Der Defaultwert ist 4.5. Möchte man es kleiner, sollten man z.B. 2 oder 1 wählen. Bei hochauflösenden Videos kann es evtl. zu Performanceneinbußen kommen, siehe auch Flash CS3 9.0.2: Update für FLV Playback Komponente.

Preview (Vorschaubild)

Mit diesem Parameter kann man ein Vorschaubild angeben.

Wird kein Vorschaubild angegeben oder die Datei nicht gefunden, wird das Default-Vorschaubild verwendet. Es heißt defaultpreview.jpg und liegt im Playerverzeichnis.

Vorschaubilder aus Flashvideo können auf einfache Weise z.B. mit dem neusten 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.

Automatische Skalierung

Aktiviert bzw. deaktiviert die automatische Skalierung. Bei true skaliert der Player das Vorschaubild auf seine native Größe. Ebenso wird das Video auf seine native Auflösung skaliert. Beispiel: Ein 400x300 Pixel großes Bild oder Video wird dann also auch auf einer Fläche von 400x300 Pixeln angezeigt.

Bei false lässt sich die Größe des Players über videowidth und videoheight selbst bestimmen.
Default: true.

Breite und Höhe des Videos

Diese Parameter sind nur relevant, wenn autoscale auf false gesetzt ist. Das Vorschaubild und das Video werden dann auf die angegeben Breite und Höhe skaliert.

Beispiel: Ein 400x300 Pixel großes Video wird bei videowidth=640 und videoheight=480 in der Größe 640x480 angezeigt.

Setzt man autoscale auf false und vergisst, die beiden Parameter zu setzen, ist der Defaultwert 320 (Breite) und 240 (Höhe).

Untertitel (subtitles / captions)

Name der Untertiteldatei. Optional können die Flashvideos mit Untertiteln versehen werden. Unterstützt wird z.B. das Timed Text Format, siehe auch Flash CS3: Video-Untertitel im Timed Text Format

Eine Timed Text Datei sollte folgendermaßen aufgebaut sein sollte:

Der FLV Player unterstützt auch , womit komfortabel Untertitel erstellt werden können.

Preroll

Das Preroll-Video wird vor dem eigentlichen Video gezeigt. Somit kann man z.B. Werbung oder einen Teaser einbinden. Während des Preroll-Videos werden die Steuerelemente ausgeblendet, damit man das Prerollvideo nicht überspringen kann.

preloader

Mit diesem Parameter lässt sich eine beliebige SWF-Datei als Preloader verwenden. Sie muss in dem Verzeichnis mit den Playerdateien liegen (playerpath).

Default: Es wird die Datei mitgelieferte Datei "preloader.swf" verwendet.

loop

Ist das Ende des Videos erreicht, wird es erneut von vorne abgespielt. Das Video wird also (endlos) geloopt.

Default ist false.

autoplay

Das Video wird sofort abgespielt. Das Vorschaubild (preview) wird also übersprungen.

Default ist false.

buttonoverlay

Mit diesem Parameter lässt sich eine beliebige SWF-Datei einbinden, die den "PlayButton" für den Anfangsscreen enthält. Sie muss in dem Verzeichnis mit den Playerdateien liegen (playerpath).

Default: Es wird die Datei mitgelieferte Datei "buttonOverlay.swf" verwendet.

debug

(ab Version 1.9.3)
Der Debug-Modus erleichtert die Fehlersuche. Der Parameter debug aktiviert die Log-Engine, die zahlreiche Informationen und Variablen über das Firefox-Plugin Firebug anzeigt (siehe auch ThunderBolt AS3).

Default: false

smoothing

(ab Version 1.9.4)
Das Smoothing glättet Blockartefakte. Nähere Information, siehe Smoothing

Default: true

islive

(ab Version 1.9.6)
Der Parameter ermöglicht das Livestreaming in Verbindung mit einem Flash Media Server.

Default: false

Nachdem vor kurzem mein Flex-Bundle für Textmate plötzlich nicht mehr funktionierte, machte ich mich auf die Suche nach einem Update oder einer Alternative. Dabei bin ich auf ein hervorragende Doppel aus ActionScript 3- und Flex- Bundle gestoßen.

(weiterlesen...)

(weiterlesen...)