26 Jul

Flash Videos erzeugen und in die eigene Webseite einblenden

\"*\"Ganz ohne im Besitz der Flash Entwicklungsumgebung zu sein und ohne den Umweg über Youtube, kann man eigene Filme in seine Webseite einbauen.

Schritt 1 – Die FLV-Datei erzeugen

Videokameras erzeugen alle möglichen Formate von MP4, WMV über Motion-Jpeg bis hin zu HD-Video. Dasmit der Player das Video streamen kann, müssen wir es in ein FLV umwandeln. Sowohl unter Linux, als auch unter Windows eignet sich dafür der mencoder aus dem mplayer-projekt. Der mencoder kann bei fast allen Distributionen nachinstalliert werden.

\".\" Beispielaufruf zum encodieren eines FLV-Videos

mencoder ausgangsfilm.wmv -ofps 15 -o meinvideo.flv -of lavf -oac mp3lame -lameopts abr:br=22 -srate 22050 -ovc lavc -lavcopts vcodec=flv:keyint=50:vbitrate=30:mbd=2:mv0:trell:v4mv:cbp:last_pred=3 -vf scale=320:240

Mit der Bitrate und den FPS kann man noch ein wenig experimentieren.\"*\" Insgesammt bietet der Mencoder viele Einstellmöglichkeiten bis hin zu  verschiedenen Filtern und dem automatischen Beschnitt des Videos.

Da die Arbeit auf der Shell nicht Jedermanns Sache ist, gibt es für Windows noch den MediaCoder (mediacoder.sourceforge.net). Mit dieser mächtigen OS-Gui lassen sich auch DVD-s und Audio-CDs umkodieren.

Schritt 2 – Der Player

Das FLV-Video kann man leider nicht direkt in die Webseite einblenden. Die Steuerung übernimmt wiederum ein Flash-Applet, das den Film bei Bedarf lädt und abspielt. Theoretisch kann man sich einen solchen Player mit Flash selber basteln. Allerdings ist das nicht trivial.

Wenn man mal den Player auf youtube brachtet, dann sieht man, dass es eine richtige kleine Anwendung mit Menü, Vorschau und Effekten ist.

Es gibt nur wenige freie Flashplayer. Leider sind die meisten nicht gut und viel zu groß. Nach langem Suchen habe ich den flv-player von neolao gefunden, der klein und flexibel zu konfigurieren ist.Auf der Webseite (flv-player.net) gibt es fünf verschiedene Varianten. Selbst die MAXi-Variante mit Fullscreen und vielen Einstellmöglichkeiten ist nur 12kb groß.

Schritt 3 – Online stellen

Der letzte Schritt besteht darin, das Ganze in die Webseite einzubauen. Das geschieht wie bei jeder Flash-Anwendung mit einem Object-Tag.

\".\"<object type=\“application/x-shockwave-flash\“ data=\“./medien/player.swf\“ width=\“320\“ height=\“240\“>
    <param name=\“movie\“ value=\“./medien/player.swf\“ />
    <param name=\“allowFullScreen\“ value=\“true\“ />
    <param name=\“FlashVars\“ value=\“flv=meinvideo.flv&title=Meintitel&width=320&height=240 />
</object>

Den Player und das Video sollte man in einen Ordner der Webseite kopieren. Im obigen Beispiel ist es der Ordner \“/medien\“. Das Video heißt \“meinvideo.flv\“. Neben Angaben zur Breite und der Höhe bietet der FLV-Player noch um die 100 weitere Einstellmöglichkeiten. Auf flv-player.net gibt es einen praktischen Konfigurator.

Es gibt sogar die Möglichkeit der externen Steuerung über Javascript und der Konfiguration mit XML-Dateien.

Ein Beispielvideo



Länge:18sek fps:15 Breite:320 Höhe:180 Dateigröße:450kb

Links