Über mich

Startseite arrow Tipps & Tricks arrow Wie man Filme mit Flash auf Webseiten abspielt

Wie man Filme mit Flash auf Webseiten abspielt

Dienstag, 20. November 2007
Geschrieben von Armin Vieweg
Filme auf einer Website anzubieten klingt leichter als es tatsächlich ist. Um Euch das Suchen nach dem Besten Lösungsansatz zu ersparen habe ich hier ein kleines Tutorial angefertigt.

Um Filme ins Internet zu bekommen gibt es viele verschiedene Lösungsansätze, doch wie so oft sind viele davon umständlich und schlussendlich hat sich eines bis jetzt durchgesetzt.

Zwischen verschiedenen Formaten, wie Real Player, Windows Media Player und noch weiteren hat sich eines durchgesetzt und zwar die Flash-Variante.

Die beiden größten Vorteile der Flash-Variante sind, dass das Flash-Plugin sehr verbreitet ist und - dank OpenSource - man keinen Cent für diese Lösung bezahlen muss.

Wir gehen davon aus, dass wir einen AVI-Film den wir auf der Platte haben ins Internet stellen möchten. Dafür sind im wesentlichen zwei Schritte notwendig:

1. Umwandeln des Videos in FLV (Flash Video)
2. Verwenden eines FlashPlayers auf der Website



Aufbau der fertigen Lösung
Sind wir mit allen Schritten durch haben wir auf unserer Internetseite einen Player, der auf Flash basiert. Dieser Player lädt die Videos im FLV-Format und spielt sie dann ab.


Wie bekomme ich ein Video ins FLV-Format konvertiert?
xmediarecode Dafür gibt es spezielle Software. Adobe Flash hat einen Videokonverter mit an Bord mit dem die gängigsten Formate in FLV umgewandelt werden können. Wer sich die Lizenzkosten sparen möchte, dem lege ich folgende Software ans Herz: XMedia Recode

Damit können alle gängigen Formate umgewandelt werden. Darüber hinaus können noch Einstellungen an der Video- und Audioqualität vorgenommen werden.

Jetzt haben wir unsere Video-Dateien im FLV-Format umgewandelt und können die Flash-Videos auf den Webspace hochladen.

Flash ist zwar ein Streaming-Format (wird also häppchenweise geladen) doch so wie alle Videos ist die Dateigröße nicht unerheblich. Ich möchte zu bedenken geben, dass der anfallende Traffic nicht unterschätzt werden sollte.


Wie binde ich das FLV-Video in die Website ein?
Viele, die schon mit Flash gearbeitet haben wissen, dass das Format welches in den Browser eingebunden wird nicht FLV sondern SWF (Shockwave Flash) heißt. Hier ist es nicht anders. Die SWF-Datei ruft über HTML-Parameter die FLV-Datei auf. Dafür wird eine spezielle SWF-Datei benötigt, die dann die Elemente des Players beinhalten.

Einen solcher Player ist z.B. der FlowPlayer. Mit verschiedenen Skins und jede Menge Anpassungsmöglichkeiten ist er sehr einfach in eine Website zu integrieren.

Der beim FlowPlayer verwendete Quellcode ist übrigens nicht valide. Man kann aber ohne Probleme den Quellcode wie hier beschrieben umstellen.

Der Code für das Video schaut dann z.B. so aus:

<object width="400" height="300" data="FlowPlayer.swf" type="application/x-shockwave-flash">
    <param name="movie" value="FlowPlayer.swf">
    <param name="wmode" value="transparent">
    <param name="quality" value="high">
    <param name="menu" value="0">
    <param name="scale" value="noScale">
    <param name="quality" value="high">

    <param name="flashvars" value="config={
    splashImageFile:'startbild.jpg',
    videoFile:'video.flv',
    initialScale:'fit',
    showMenu:false,
    showFullScreenButton:false
    }" />
</object>



Die Parameter die die mit den "flashvars" übergeben werden sind in der Dokumentation vom FlowPlayer detailiert beschrieben.

Eine vergleichbare Lösung wird übrigens auch von den Großen, wie YouTube oder myVideo eingesetzt.
Wenn Ihr Fragen zu diesem Lösungsweg oder der Software habt, nur her damit - ich helfe Euch gerne.


Links
Konvertierungsprogramm für viele Videoformate

Zur XMedia Recode Website


Flash-Player für FLV-Dateien zum Einbetten in Websites

Zur FlowPlayer Website




  Kommentare (25)
 1 Geschrieben von: sunny, am 02.07.2008 um 21:03
Hallo ich würde gerne mehrer Videos auf meiner Website einbetten.... 
Wie...? 
Mit einem Player?? 
 
Wohin kommt der Code?
 2 Geschrieben von: Armin Vieweg, am 02.07.2008 um 21:53
Hallo, 
natürlich kannst Du den Player so oft einbinden, wie Du möchtest. Dafür musst Du lediglich den Code der oben im Artikel steht so oft kopieren, wie Du Player positionieren möchtest. 
 
Dieser Code kommt dorthin, wo sich das Video befinden soll. 
 
Gruß 
Professor Web
 3 Geschrieben von: Oliver, am 11.09.2008 um 00:18
Hallo, 
 
habe folgenden Code in meine Seite eingefügt: 
 
 
 
 
 
 
 
 
ich versuche schon seit Stunden ein .swf bzw. flv in diesen code ein zu binden, so dass das video zu abspielen bereit steht, doch leider habe ich keinen erfolg. 
 
können sie mir einen tipp geben 
 
danke
 4 Geschrieben von: Armin Vieweg, am 11.09.2008 um 09:59
Hi Oliver, 
 
schick mir doch einfach mal Deinen Code per E-Mail. Das ist besser als über die Kommentare. 
 
info [at] professorweb.de 
 
Gruß 
Armin
 5 Geschrieben von: yusuf, am 09.10.2008 um 17:00
ich füge videocode in html kode seite ein. aber wenn ich es speichere verschwindet alle codedateien. was soll ich machen 
danke
 6 Geschrieben von: Armin Vieweg, am 13.10.2008 um 21:31
Hallo, 
Deine Angaben sind etwas sehr wage. Schick mir einfach eine [URL=/kontakt/index.html]ausführliche E-Mail[/URL] mit Deinem Problem, dann helfe ich gerne weiter. 
 
Gruß 
Armin
 7 Geschrieben von: E. Fäh, am 02.11.2009 um 14:29
http://flowplayer.org/config/variables 
 
Ist toter Link 
 
Gruss, E. Fäh
 8 Geschrieben von: Armin Vieweg, am 02.11.2009 um 16:13
Vielen Dank für den Hinweis. Der gesamte Artikel ist mehr oder weniger etwas veraltet, da Flowplayer ein richtiges, auf JavaScript basierendes Framework geschaffen hat, mit dem die Videos jetzt eingebunden werden. Das ist hier in dem Artikel nicht berücksichtigt, da er nun fast ein Jahr alt ist :)
 9 Geschrieben von: Hartmut Fischer, am 21.02.2010 um 17:17
ich habe einen Film mit ca. 94 MB eigebettet. Leider stoppt der Film immer wieder auf Grund seiner Größe. 
Gibt es eine Möglichkeit den Film zu komprimieren ohne das die Qualität stark eingeschränkt wird. 
 
Viele Grüße 
 
Hartmut
 10 Geschrieben von: Armin Vieweg, am 22.02.2010 um 00:15
Hallo Hartmut, 
 
Komprimierung bedeutet man nimmt etwas weg oder legt etwas zusammen um Speicherplatz zu sparen. Es gibt mittlerweile sehr gute Codecs (z.B. Xvid oder DivX) aber je mehr Bandbreite man rausnimmt, desto größer ist der Qualitätsverlust. 
 
Mit XMedia Recode kannst Du versuchen den Film weiter zu komprimieren in dem Du die Bit-Rate runterstellst. Und den Ton kannst Du ebenfalls auf z.B. 96kbps stellen. Der Unterschied ist fast nicht hörbar. Du willst ja kein Full-HD Film ausstrahlen, hoffe ich ;-) 
 
Alternativ kannst Du den Film in zwei Teile splitten und dann in zwei Playern unterbringen. Das würde kein Qualitätsverlust des Bildes und des Tones bedeuten. 
 
Das stoppen, was Du beschreibst, damit meinst Du glaube ich "Buffering" oder? Wenn der Film bei einer mittleren bis guten DSL-Leitung buffert, solltest Du aber tatsächlich darüber nachdenken die Bitrate zu senken. 
 
Gruß 
Armin
 11 Geschrieben von: Lucas, am 27.02.2010 um 17:59
Hallo zusammen. Ich versuche schon seit einigen Tagen einen flashfilm auf meiner Website einzubinden, der auch Steuerelemente hat. Das heißt der user soll start, pause, mute usw. wählen können. Ich habe darum mit der FLVPlayback komponente die Steuerelemente hinzugefügt. Jetzt habe ich in meinem Ordner zwei .swf Dateien liegen. Einmal die, die ich exportiert habe und eine, die so heißt, wie das skin der FLVPlayback Komponente. Wenn ich die Datei, die ich exportiert habe, im Flash Player öffne, sind die Steuerelemente auch vorhanden. Wenn ich diese Datei aber in meine Website einbinde, wird zwar der Film abgespielt, aber ohne Steuerelemente. 
Wahrscheinlich muss ich die skin-Datei noch irgendwie einbinden oder? Aber wie? 
 
Folgender Maßen habe ich bis jetzt das Video eingebunden: 
 
 
 
 
 
 
 
 
 
 
 
 
Irgendwo da muss noch die skin-datei rein - denke ich mal... 
 
Kann mir jemand helfen? 
 
Danke, 
 
lg 
Lucas
 12 Geschrieben von: Lucas, am 27.02.2010 um 18:05
Mist der Quellcode wird in meinem oben stehenden Beitrag nicht angezeigt. 
Ich versuche es nochmal 
 
Folgender Maßen habe ich bis jetzt das Video eingebunden: 
 
object classid=\"CLSID:D27CDB6E-AE6D-11cf-96B8-444553540000\" width=\"0\" height=\"0\" 
codebase=\"http://active.macromedia.com/flash2/cabs/swflash.cab#version=8,0,0,0\"> 
 
 
 
 
 
 
embed src=\"../img/swf/düsseldorf-video.swf\" quality=\"high\" loop=\"true\" scale=\"exactfit\" menu=\"false\" 
bgcolor=\"#285094\" width=\"0\" height=\"0\" swLiveConnect=\"false\" 
type=\"application/x-shockwave-flash\" 
pluginspage=\"http://www.macromedia.com/shockwave/download/download.cgi?P1_Prod_Version=ShockwaveFlash\"> 
embed> 
object> 
 
Also ich mache es mit den html-tags object und embed. Den Code habe ich aus dem Internet und weiß daher nicht genau was die einzelnen Bestandteile bewirken. ber ich habe insgesamt zwei mal den Pfad zur .swf-Datei angegeben. Einmal im object-tag und einmal im embed-tag. Aber vielleicht seht ihr das ja jetzt auch oben. 
 
lg 
 
Lucas
 13 Geschrieben von: Chrischan, am 10.05.2010 um 09:38
Also, danke für die o.g. Tipps, leider klappt es bei mir gar nicht. 
Habe den o.g. Code in die Website eingefügt, die Dateinamen korrekt eingegeben, abr der Film wird nicht gestartet... 
 
Was gibt es noch zu beachten? 
 
Gruß 
CF
 14 Geschrieben von: Armin Vieweg, am 10.05.2010 um 10:32
Hi Chrischan, 
 
wenn Du die neuste Version vom FlowPlayer nutzt, musst auch einen neuen Code benutzen. Auf der FlowPlayer-Seite selbst ist das ganz gut beschrieben. Dort kann man sich auch ein Beispiel runterladen und sieht dann wie das umgesetzt wurde. 
 
Ich werde den Artikel irgendwann mal überarbeiten :) 
 
Gruß 
Armin
 15 Geschrieben von: qwe, am 05.06.2010 um 12:28
du weißt schon was der unterschied zwischen opensource & freeware ist?
 16 Geschrieben von: Armin Vieweg, am 05.06.2010 um 13:06
Als ich den Artikel verfasst habe, war es Open Source. Erst später gab es ein Lizenzmodell für kommerziellen und privaten Gebrauch.
 17 Geschrieben von: Florian, am 10.06.2010 um 23:01
Hi, 
ich habe den FlowPlayer die GPL license (Free) heruntergeladen, entpackt und zusammen mit den flv.Dateien auf mein webspace hochgeladen. Dann habe ich den hier etwas weiter oben aufgeführten Code für das Video in meine HTML seite, wo das Video erscheinen soll, eingefügt und ebenfalls hochgeladen. Leider sehe ich da kein Video und auch keinen Player. ich muss da sicher was falsch gemacht haben, sorry bin erst 13 und kenn mich halt noch nicht so gut aus. Wäre schön wenn mir jemand dabei helfen könnte wie ich das alles hinbekomme. Vielleicht kann mir ja auch jemand das installieren. Danke erstmal für eure Hiolfe. 
 
lg. Florian
 18 Geschrieben von: Armin Vieweg, am 11.06.2010 um 13:15
Hallo Florian, 
 
der Artikel ist schon älter und mittlerweile benutzt Flowplayer andere Methoden. Aber schau Dir doch mal hier dieses Setup an: 
 
http://flowplayer.org/setup/index.html 
 
Das sieht ganz nett aus und sehr einfach. Über "Get embed code" bekommst Du dann den fertigen Quellcode. 
 
Gruß 
Armin
 19 Geschrieben von: Florian, am 12.06.2010 um 19:25
Hallo Armin, 
das war ja eine super schnelle Antwort, vielen Dank dafür. Also ich habe die von dir gesagte Seite aufgerufen, naja alles wie sollte es auch sein in englisch. Ok hab mich da bissel durchgewuselt, aber bin trotzdem zu keinem Ergebnis gekommen. Denn wenn ich meine Einstellungen gemacht habe und dann auf "Get embed code" klicke, passiert absolut nichts. Da zeigt es mir auch keinen Code an. Und selbst wenn , wüsste ich im Moment nicht, wass ich dann mit diesem Code machen muss. Langsam verzweifel ich und trag mich mit dem Gedanken mich von meinem Vorhaben einige Videos auf meine Website zu setzen, zu verabschieden. 
Hogffe jedoch das ich das mit deiner / Ezrer Hilfe noch hinbekomme. 
Danke erstmal für die schnelle antwort
 20 Geschrieben von: Armin Vieweg, am 12.06.2010 um 09:40
Hi Florian, 
 
schick mir doch mal ne Mail mit Link zur Seite. Dann schaue ich mir das gerne an :) 
 
Gruß 
Armin
 21 Geschrieben von: Florian, am 12.06.2010 um 19:40
Hi Armin 
Danke für die Mail, muss mich davon erstmal erholen. Ob ich das alles hinbekommen, daran zweifel ich. Ich hab leider nichjt so viel ahnung von sowas. 
Ich werds aber mal versuchen. 
 
Hatte ja anfangs den JW Player 4.6 drauf, da konnte ich videos abspielen, aber das blöde war eben, ich konnte nur 1 Video auf der seite zeigen und nicht mehrere. Ich möchte ja die V ideos in den text einbauen, als folge meiner Urlaubsschilderungen, da nützt mir ja kein Player der eine Playlist hat. Deswegen brauch ich einen Player den ich an verschiednen stellen auf einer seite einbauen kann. Und da bin ich auf diesen Flowplayer ggestossen und jetzt das. Ich dreh bald ab. Na ich versich das mal heute und morgen. 
Wenn ich nichts peile, meld ich mich nochmal bei dir. 
Hab erstmal ganz vielen dank, sowas wie dich findet man selten der einen so schnell aund ausdauernd hilft. 
schönes weekend dir. 
lg Flo
 22 Geschrieben von: Florian, am 14.06.2010 um 14:12
Hallo Armin 
Ich schreibe mal hier, das ihr beiden mail die sie mir geschickt haben ohne Inhalt waren. 
Ich denke mal, dass sie meine Mails lesen konnten. 
Also vielen dank für alles. 
 
lg Flo
 23 Geschrieben von: Bastler, am 06.10.2011 um 23:48
Hi, 
Ich habe nach Lektüre dieser Seite versucht, mit Hilfe des Flowplayers ein Video auf meiner Webseite einzubetten. 
Das Beispiel von Flowplayer selbst lief problemlos. Die Webseite hatte ich soweit, dass ich auf den vorgesehenen Videobereich klicken konnte. Damit konnte ich das Video jedoch nur in einen beliebigen externen Player laden und anschauen. 
Woran könnte es noch hängen, dass das Video nicht auf der Seite selbst angezeigt wird? 
 
Ratlose Grüße 
Bastler
 24 Geschrieben von: Axel, am 12.01.2012 um 10:01
Hallo Armin Vieweg, 
 
ich möchte auch einen Fashplayer in meine Seite einbauen. 
Ich habe mehrere Filme die ich gerne über einen Player abspielen möchte. 
 
Also ein Player irgendwo eingebaut und rechts oder links eine Liste von Filmen. Nachdem ich auf einen Film klicke wird dieser im Player abgespielt. 
 
Ist die möglich? 
 
Danke und Gruß, Axel
 25 Geschrieben von: Armin, am 15.06.2012 um 09:23
Hi Axel, 
der Artikel ist schon ziemlich alt und in der Zeit hat sich beim Flowplayer einiges getan! Ich glaube, die hier beschriebene Einbindungsweise ist nicht mehr so ganz "state of the art". 
 
Hier ist eigentlich ganz gut erklärt, wie man den Flowplayer zum laufen bekommt: http://goo.gl/A08P8 
 
Beste Grüße 
Armin Vieweg
Letzte Aktualisierung ( Dienstag, 20. November 2007 )
 
< Zurück   Weiter >