www.video-flash.de

Alles rund um Web & Mobile

Documentation

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:

HTML:
  1. flashvideoplayer.html?video=myvideo.flv

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

HTML:
  1. flashvideoplayer.html?video=myvideo.flv&skin=myskin.swf
  2. flashvideoplayer.html?video=myvideo.flv&skin=myskin.swf&skincolor=0x00FF00

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:
  1. src="/pfadzumflvplayer/flashvideoplayer.html?video=content/demo-video.flv" width="450" height="400" frameborder="0" scrolling="no">

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

HTML:
  1. flashvars.video = swfobject.getQueryParamValue("video");

Man kann Werte bei der Einbettung jedoch auch direkt zuweisen:

HTML:
  1. flashvars.video = "myvideo.flv";
  2. flashvars.playerpath = "/stuff/videoplayer";

Parameter

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

Pfad zu den Playerdateien (benötigt)

HTML:
  1. playerpath=/stuff/flvplayer
  2. playerpath=http://www.video-flash.de/stuff/flvplayer

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)

HTML:
  1. contentpath=/stuff/videos
  2. contentpath=http://www.video-flash.de/stuff/content

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

HTML:
  1. video=myflashvideo.flv
  2. video=http://www.video-flash.de/myvideo.flv

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

Skin (Bedienelemente)

HTML:
  1. skin=myskin.swf
  2. skin=http://www.video-flash.de/myskin.swf

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

HTML:
  1. skincolor=0xFF0000

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

Skingröße im Fullscreenmode

HTML:
  1. skinscalemaximum=2

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)

HTML:
  1. preview=mypreview.jpg
  2. preview=http://www.video-flash.de/mypreview.jpg

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

Automatische Skalierung

HTML:
  1. autoscale=true
  2. autoscale=false

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

HTML:
  1. videowidth=640
  2. videoheight=480

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)

HTML:
  1. captions=mycaptionsfile.xml

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:

XML:
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <?xml version="1.0" encoding="UTF-8"?>
  3.   xml:lang="en" xmlns="http://www.w3.org/2006/04/ttaf1"  xmlns:tts="http://www.w3.org/2006/04/ttaf1#styling">
  4.   >
  5.    >
  6.         id="basics" tts:fontSize="16" tts:backgroundColor="#BBBBBB" tts:color="#000000" tts:fontFamily="Verdana"/>
  7.         id="main" style="basics" tts:textAlign="center"/>
  8.         id="hinweis" style="basics" tts:backgroundColor="red"/>
  9.    >
  10.   >
  11.  
  12.   >
  13.     xml:lang="en">
  14.     begin="00:00:01.00" style="main">FLV Flash Fullscreen Player> 
  15.      begin="00:00:03.00" style="hinweis">www.video-flash.de>
  16.    >
  17.   >
  18. >

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

Preroll

HTML:
  1. preroll=ad.flv

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.

CODE:
  1. preloader=mycustompreloader.swf

loop

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

Default ist false.

CODE:
  1. loop=true

autoplay

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

Default ist false.

CODE:
  1. autoplay=true

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.

CODE:
  1. preloader=mycustombuttonoverlay.swf

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

CODE:
  1. debug=true

smoothing

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

Default: true

CODE:
  1. smoothing=true
  2. smoothing=false

islive

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

Default: false

CODE:
  1. islive=true

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.