www.BuntesWeb.de
www.BuntesWeb.de - Computer & Internet
 
 

Das Homepage-Handbuch speziell für blutige Anfänger

Spezielle Elemente einer Webseite - Multimedia

Adobe Flash-Video

Flash-Videos ohne YouTube auf der Webseite einbauen

Über die Einbindung von Flash-Videos von YouTube habe ich ja bereits etwas bei Multimedia im Kapitel "Kintop" geschrieben. Solche Videoportale nutzen sehr gern das Flash-Video-Format. Der Film wird in eine Datei mit der Endung .FLV gespeichert und diese auf der Webseite mittels eines in Flash programmierten Players abgespielt. Die nötigen Codecs werden in den Player eingebunden und müssen daher nicht auf dem System des Betrachters installiert sein. Dort genügt es, wenn lediglich eine einigermaßen aktuelle Fassung des Adobe Flash-Plugins installiert ist.

Will man eigene Filme auf der eigenen Webseite ohne YouTube-Unterstützung anbieten, dann benötigt man:

  1. Den Film im Flash-Videoformat *.FLV
  2. Einen in Flash programmierten Player "flvplay.swf" für die Webseite.
Zu 1.: Film in FLV umwandeln

Im einfachsten Falle speichern Sie Ihr Video einfach im Flash-Video Format. Das können derzeit aber nur ganz neue und entsprechend modern ausgerüstete Videobearbeitungsprogramme. Ich verwende z.B. schon seit Jahren Ulead VideoStudio für meine Hobbyfilmerei. Erst mit der aktuellen Fassung VideoStudio Pro X3 (jetzt von Corel) ist nun auch die direkte Ausgabe in eine FLV-Datei möglich.

Haben Sie einen Film z.B. als MPEG-Datei (*.MPG) vorliegen, dann benötigen Sie ein Konvertierungsprogramm. Ein Download-Dauerbrenner im Web und daher leicht zu finden sind Programme zur Umwandlung von FLV in übliche Filmformate. Damit lassen sich die Filmchen von YouTube und Co.prima in ein anderes Format umwandeln. Wir hingegen benötigen aber ein Programm, das aus 'herkömmlichen' Filmchen ein Flash-Video produziert. Im Web finden sich zu diesem Zweck beispielsweise folgende Programme:

Übrigens: Der VLC Mediaplayer von VideoLAN kann nicht nur eine ganze Reihe Filmformate einschließlich FLV abspielen. Er beinhaltet auch einen Konverter, der Videos vom und zum FLV-Format konvertiert.

Zu 2.: Einen Flash-Player einbauen

Na klar, wir fügen einfach einen FLV-Player in Form einer Flash-Animation (*.SWF) auf der Webseite ein.
Aber ... woher nehmen wir einen solchen Player? Den müsste man eigentlich selbst erstellen (mit Adobe Flash). Oder man sucht nach einem universell einsetzbaren Player im Web. Und tatsächlich - so etwas gibt es. Folgende Quellen fallen mir dazu ganz spontan ein:

  • www.video-flash.de
    Sie finden hier eine Liste mit aktuellen FLV Playern. Allen voran der
    - FLV Flash Fullscreen Video Player, den der Autor der obigen Webseite (Florian Plag) stolz präsentiert.
    Auf der Webseite von Florian Plag können Sie sich auch eingehend über die technischen Hintergründe informieren.
     
  • Außerdem gibt es noch den FlexVideoPlayer -
    Eine Video-Jukebox, mit der Sie gleich Ihre ganze FLV-Filmsammlung präsentieren können.

Die gelisteten FLV-Player sind vorzugsweise Freeware bzw. Open Source. Einige davon haben einen erstaunlichen Funktionsumfang. Es bleibt Ihrem Geschmack überlassen, welchen dieser Player sie für Ihr Vorhaben auswählen.

Praktisch, wenn man beides in einer Software hat:

Der Free Video to Flash Converter aus dem Freewarepaket von DVDVideoSoft.com hat einiges mehr zu bieten, als die reine Videoumwandlung. Nach der Umwandlung stellt dieses praktische Tool nämlich auch gleich noch einen Player zur Verfügung. Dabei stehen verschiedene Designs und Farben zur Auswahl. Letztlich wird auch noch eine Beispiel-HTML-Datei erzeugt, damit man den Film gleich ausprobieren kann. Dort findet man auch den Code für den Einbau des Players auf der eigenen Homepage.

Das folgende Beispiel basiert auf dem kleinen Film, den Sie vielleicht schon aus dem Kapitel "Kintop" kennen:

Nach der Umwandlung mit dem Free Video to Flash Converter finden sich im Ausgabeverzeichnis diverse Dateien.

  • mpeg1clip.flv - Der Film im FLV-Format.
  • player_flv_classic.swf - Der Player, der die FLV-Datei abspielt.
  • mpeg1clip.xml - Eine XML-Konfigurationsdatei, die das Aussehen des Players bestimmt.
  • HowToUseFlash_Example.htm - Die Beispiel-HTML-Seite.
  • style.css - Das Stylesheet zur Beispielseite

Wenn Sie nach dem Umwandlungsvorgang die Beispielseite und alle zugehörigen Dateien haben, können Sie den Videoconverter schließen. Daraufhin werden Sie mit der nebenstehenden Meldung belästigt. Diese hartnäckige Abfrage, ob man die DVDVideoSoft-Toolbar installieren will, und die DVDVideoSoft Web-Suche zur Standardsuchmaschine oder zur Startseite machen will, ist der kleine Tribut, den Sie für die kostenlose Verwendung der Software zahlen müssen.

Die Toolbar enthält einige nette Gimmicks. Wenn Sie die Toolbar gebrauchen können, dann akzeptieren Sie diese und haben fortan Ihre Ruhe. Notfalls können Sie die Add-Ons im Browser einfach deaktivieren.

Ansonsten müssen Sie mit dieser Abfrage leben und klicken nicht auf   Weiter  , sondern auf   X  .

Bedenken Sie, dass man im Leben nichts geschenkt bekommt. Eine Hand wäscht die andere. Die Toolbar hilft bei der Finanzierung der für sie kostenlosen Software durch Partnerwebseiten und deren Werbung.
 
Im nächsten Arbeitsschritt öffnen Sie die Beispiel-HTML-Seite HowToUseFlash_Example.htm. Dies ist zugleich eine Testseite, auf der Sie sehen, ob die Umwandlung erfolgreich war, aber auch die Bedienungsanleitung für Ihr weiteres Vorgehen. - Leider nur in englisch. Daher übersetze ich Ihnen mal kurz:

1. Upload files

Laden Sie die folgenden Dateien von Ihrem Ordner C:\Homepages\Homepage Sowieso\ggf. Unterordner\ zu Ihrem Webserver hoch: player_flv_classic.swf, start_frame.jpg, mpeg1clip.flv, mpeg1clip.xml. All diese Dateien mussen zusammen in den selben Ordner platziert werden.

2. Copy the code from the box below to your web page

Im Anschluss folgt der HTML-Code, den Sie in den HTML-Quelltext Ihres eigenes HTML-Dokuments kopieren können. Die Dateiverknüpfungen in diesem Code gehen davon aus, dass Ihre HTML-Datei sich im selben Ordner befindet, wie FLV-Datei und die anderen zugehörigen Dateien. Ist dies nicht der Falle, dann erweitern Sie bitte die Datein im Code durch entsprechende Pfadangaben. Beachten Sie übrigens auch den folgenden Abschnitt:
<noscript><a href="http://www.dvdvideosoft.com/products/dvd/Free-YouTube-Download.htm">youtube video</a></noscript>
Dies macht an dieser Stelle überhaupt keinen Sinn! Sie sollten diesen Abschnitt daher aus Ihrem dem HTML-Code entfernen.

Please note:

Some html editing software may change the pasted code according their standards...

Namo WebEditor lässt den nachträglich eingefügten (fremden) Code normalerweise in Ruhe. Manche WYSIWYG-Webseiten Webseiteneditoren verändern/korrigieren den HTML-Code aber. Im Extremfall funktioniert das Video deshalb nicht. Daher sollten Sie vor dem Upload Ihre Seite in einem Browser anschauen. Und falls etwas nicht funktioniert, dann überprüfen Sie den HTML-Code. Notfalls müssten Sie die Seite mit einem anderen Programm bearbeiten. Der Autor des Free Video to Flash Converter schlägt Ihnen einen einfachen Texteditor vor, z.B. Windows-Notepad.

Um nicht zukünftig die ganze Webseite mit Notepad weiterpflegen zu müssen, rate ich Ihnen aber, dass Sie einfach die Beispielseite in Notepad kürzen, bis nur noch das Video übrig ist. Dann binden Sie die Seite mittel IFRAME auf Ihrer Webseite ein.

There are some parameters in the upper code and in the file mpeg1clip.xml. You can change them and the player will be changed. Click here to learn more

Hier werden Sie auf eine Webseite hingewiesen, die Ihnen die Classic Flash Player Einstellungen in der Konfigurationsdatei mpeg1clip.xml erklärt. Sie können damit das Aussehen und das Verhalten des Players beeinflussen. Die Seite gibt es aber auch in deutsch: Klicken Sie hier, um mehr zu erfahren. Es gibt weitere Seiten für jeden Player-Typ und wertvolle Hinweise, z.B. wie man den Player per JavaScript fernsteuert.

If you host your site or blog on a Windows Server, this guide may be interesting for you:
Configure MIME types on Windows Server to recognize FLV files.

Die DVD VideoSoft-FAQ hilft bei Problemchen. Beispielsweise könnte Sie das folgende Thema interessieren:
MIME-Typen auf Windows-Servern einrichten, damit FLV-Dateien erkannt werden.

Damit sind wir am Ende des Artikels "Flash-Video" angelangt und gleichzeitig auch am Ende des Abschnitts "Multimedia" und des Komplexes "Spezielle Webseitenelemente". Vielleicht kehren Sie nun erstmal zurück zum Hauptinhaltsverzeichnis und lassen das ganze sacken. Oder da Sie nun das notwendige Grundwissen aufgenommen haben, und alles über die Elemente der Webseitengestaltung wissen, blättern Sie weiter und gelangen zum nächsten Komplex:

Webdesign - Wir erstellen eine Beispielwebseite - Schritt für Schritt - Sie lernen etwas über grundsätzliche Überlegungen zum Webseitenlayout und die Planung einer mehrseitigen Webpräsenz, dabei üben Sie die Anwendung einiger Webseitenelemente in der Praxis.
Copyright by Jörg Wischnewski - Logos, Warenzeichen, Schutzmarken etc. stehen im jeweiligen Recht und Eigentum der eingetragenen Inhaber, auch wenn dies nicht ausdrücklich einzeln angegeben ist.