Texte, Projekte und Fundsachen rund um Medien, Bildung und Computer
www.dirk-hoeschen.de
Flash Videos erzeugen und in die eigene Webseite einblenden
Erstellt am: 26 Jul. 2008

*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

Artikel Bookmarken bei...
Mister-Wong Webnews Yigg Alltagz Infopirat Delicious Furl Linkarena Yahoo Google

12 Kommentar(e)

mardy schrieb am 29 Jul. 2010 um 13:55 Uhr
hey genau das was ich gesucht hab, werde das mal so versuchen unter Ubuntu.
vielen Dank für diesen Beitrag!!!
Aleks schrieb am 07 Jul. 2010 um 06:43 Uhr Bild...
Cool es antwortet jemand, danke. Ich habe es gemacht mit dem start image aber es klappt nicht. Die Pfade stimmen eigentlich, hier mein code:












Was könnte falsch sein, oder wieso lädt er startimage nicht. Danke vorab.
rubbel schrieb am 06 Jul. 2010 um 14:59 Uhr
Geht nur wenn du ein Startbild als JPEG in der Größe des
Bildes erstellst und mit "startimage" am Anfang lädst.
bsp:

Auf den richtigen Pfad zum Bild bitte achten!!!
Aleks schrieb am 06 Jul. 2010 um 14:35 Uhr Bild...
Hallo, ich hoffe jemand antwortet überhaupt, ist ja ne weile her der beitrag:)
Ich würde gerne wissen kann man das video/code so einstellen das man am anfang kein schwarzes bild sieht sondern den anfang vom film? Danke vorab!
Dirk schrieb am 03 Apr. 2009 um 13:22 Uhr
Vorab ein paar allgemeine Infos die man auch auf der Seite vom
FLV-Player findet.

* Der Player player.swf lädt das Video .flv und spielt es ab.
* Dafür muss er zumindest den Namen des Videos mitgeteilt bekommen.
* Es gibt 3 unterschiedliche Möglichkeiten den Player Parameter/Infos zukommen zu lassen.
* Der einfachste Weg ist über flashvars.

Also einfach den Player wie gewohnt als Flash-Objekt einbinden und über Flashvars den Parameter "flv=xxx.flv" übergeben.

Schau dir mal genau an wie ich das Video auf der Seite eingebunden habe.
Mac_Molish schrieb am 03 Apr. 2009 um 12:42 Uhr
Hm...
Mac_Molish schrieb am 01 Apr. 2009 um 12:54 Uhr
Habe ein Problem: Wenn ich das swf-Objekt von dem Player lokal aufrufe, oder ein Video von meiner Festplatte apspielen will, zeigt er mir nur ein weißen Bildschirm an oder das Video startet nicht.
Wenn ich aber die Verlinkung über das Internet vornehme (link: http://flv-player.net/medias/player_flv_multi.swf & bsp. http://flv-player.net/medias/KyodaiNoGilga.flv) gehts. Es soll aber lokal gehen.
Was mache ich falsch?
Captain schrieb am 03 März 2009 um 11:34 Uhr
Danke

Dirk schrieb am 03 März 2009 um 11:08 Uhr
Schau doch ein auf die webseite des FLV Players.
http://flv-player.net/players/maxi/documentation/
Da siehst du alle möglichen Konfigurationsoptionen.
In deinem Fall "showplayer=never;loop=1;autoplay=1;"
Eventuell brauchst du noch ein margin=0 damit der Rahmen verschwindet.
Captain schrieb am 03 März 2009 um 10:54 Uhr
Hallo, Danke für deine tolle Anleitung.
Ich wollte wissen
- wie man den clip in endlosschleife abspielen kann
- die navigaionsleiste verbergen kann

vielleicht kann mir jemand weiterhelfen.
Danke
Hagen schrieb am 27 Nov. 2008 um 17:35 Uhr
Hallo, muß dem Kommentar von Jupp zustimmen. Leider komme ich damit nicht so ganz zu recht. Habe HD Videos im Format Filmname.mts, diese möchte ich in Filmaname.swf wandeln und auf meiner Webseite anzeigen.
Mit dem MEncoder Befehlsparameter kann ich nicht anfangen.
Könnte einen Film per Mail zusenden und mir erklären wie der gewandelt und auf meiner Internetseite angezeigt wird.
Kurzes Mail und Ich sende den Film.
Im vorraus vielen Danke
Jupp schrieb am 01 Nov. 2008 um 12:51 Uhr
Hallo, das hier ist genau das, was ich gesucht habe.
Sehr gut: Kurz und präzise dargestellt - und es funktioniert.
Vielen Dank!
Jupp

Beitrag kommentieren

Ich freue mich jederzeit über Fragen, Anmerkungen und Kritik. Also gebt euch einen Ruck und kommentiert diesen Artikel.

Name
eMail optional für Antworten: wird nicht veröffentlicht!
Webseite optional
Kommentar
Kontrollcode
Spamvermeidung: bitte den Code im Bild eingeben
 

* zur Übersicht

Aktuelle Projekte

MBE Druckprofis Altgold-Kauf Lehranstalt für Gartenbau und Floristik Großbeeren Kunstleihhaus computer-daten-netze : feenders.de