Videos online

Teil 2: Kurzfilme für die Website

Autoren: Redaktion pcmagazin und Tim Kaufmann • 23.10.2007 • ca. 5:40 Min

Inhalt

Kurzfilme für die Website
Teil 2: Kurzfilme für die Website

Als Nächstes statten Sie Ihr Video mit dem FLV MetaData Injector mit Metadaten aus. Darüber freuen sich nicht nur Suchmaschinen, die Metadaten sind auch die Grundlage dafür, dass das Vor- und Zurückspulen im Video funktioniert. Starten Sie das Programm mit einem Doppelklick auf "flvmdigui.exe". Hinter dem Feld "Input FLV file" klicken Sie auf die Schaltfläche mit den drei Punkten und wählen Ihren Flash-Videoclip aus. Standardmäßig ersetzt das Programm die Originaldatei durch ein Exemplar mit Metadaten.

Möchten Sie die frisch codierte Datei lieber noch aufheben, sollten Sie den Ausgabepfad bei "Output FLV file" ändern. Unter "Extra Data Data String" geben Sie einen aussagekräftigen Titel für Ihr Video ein und verbessern damit die Auffindbarkeit Ihres Videos in Suchmaschinen. Wer sich mit Adobes ActionScript auskennt, greift darüber später auf dieses Feld zu, um den Titel automatisch in der Website anzuzeigen. Klicken Sie auf "Run FLVMDI", um den Injector zu starten. Es erscheint dann ein Bestätigungsfenster, das das Wort "Completed" enthält. Klicken Sie auf "Close" und beenden Sie den Injector.

Video im Web

Im Web fließt buchstäblich zusammen, was zusammengehört. Die Wiedergabe des Videos übernimmt JW FLV Player 3.99, der für nicht-kommerzielle Verwendung kostenlos ist und anderenfalls 15 Euro kostet. Er wird per JavaScript in die Website integriert.

Dafür verwenden wir im Beispiel allerdings nicht den vom Autor vorgegebenen Code, sondern eine Eigenentwicklung auf Basis einer UFO ("Unobtrusive Flash Objects", unaufdringliche Flash-Objekte) genannten JavaScript-Bibliothek. Sie sorgt unter anderem dafür, dass Nutzer des Internet Explorers das Flash-Video nicht erst über einen Mausklick aktivieren müssen, bevor es sich mit einem weiteren Klick starten lässt.

Außerdem lässt sich unser Script auf dieser Basis so erweitern, dass ein ggf. fehlender oder veralteter Flash-Player über Adobes "Express Install"-Funktion automatisch installiert wird - ein Schritt, der den Rahmen dieses Artikels aber genauso sprengen würde, wie das Ausloten der zahlreichen Optionen, über die sich Erscheinungsbild und Funktion von JW FLV Player anpassen lassen. Stattdessen erscheint bei fehlendem oder veraltetem Flash-Player einfach ein Hinweistext samt Link auf die Adobe-Website, eine ebenfalls ordentliche Lösung.

Webcode

Aus dem FLV-Player-Download (auch auf der Heft-CD) benötigen Sie lediglich die Datei "flvplayer.swf", die Sie in einen leeren Ordner auf Ihrer Festplatte kopieren. Dort hinein gehören auch das FLV-Video, in unserem Beispiel "mein_film.flv", das Vorschaubild im JPG-Format und die Datei "ufo.js", die Sie über den Link "JavaScript file" auf der UFOWebsite herunterladen.

Legen Sie im Projektordner ein HTML-Dokument an, welches das übliche Codegerüst aus Doctype, Head und Body enthält. Dann fügen Sie im <head>-Bereich folgenden Code ein:

1: <script type="text/javascript" 
.src="ufo.js"></script>
2: <script type="text/javascript">
3: var FO = { movie:"flvplayer.swf", 
.width:"320", height:"240", major 
.version:"7", build:"40", allow 
.fullscreen:"true", flashvars: 
."file=mein_film.flv&display 
.height=240&image=vorschau.jpg 
.&overstretch=false&fullscreen 
.page=true&fsreturnpage=true" }; 
4: UFO.create(FO, "video1"); 
5: </script>

Und der Abschnitt <body> enthält an der Stelle, an der das Video erscheinen soll:

6: <div id="video1">
7: <p> Tipp: Installieren Sie eine 
.aktuelle Version des <a href= 
."https://tinyurl.com/2sq8br"<Flash 
.-Players</a>, um das Video sehen 
.zu können.</p>
8: </div>

Die Zeile 1 sorgt dafür, dass die Funktionen aus der UFO-Javascript-Bibliothek für die Webseite zur Verfügung stehen. In Zeile 2 beginnt ein JavaScript, welches das <div>-Element mit der ID "video" (ab Zeile 6) gegen den FLV Player austauscht, sofern das Flash- Plug-in in Version 7 oder höher im Browser installiert ist. Ist das nicht der Fall, erscheint der Hinweistext aus Zeile 7 im Browser.

Zeile 3 enthält alle wichtigen Parameter für den FLV Player. Die Bezeichnungen für die Video-Datei und das Vorschaubild (mein_film.flv" und "vorschau.jpg") ersetzen Sie durch die Dateinamen Ihres Projektes. Für "width", "height" und "displayhight" setzen Sie die Auflösungswerte Ihres Videos ein.

Wer mit den Einstellungen des FLV Players experimentieren und z.B. Funktionen wie die Wiedergabeliste im XML-Format nutzen will, kann die Variable "flashvars" um zusätzliche Parameter ergänzen. Die Dokumentation zum Player und der Beispiel-Code-Generator, die Sie auf der angegebenen Website finden, helfen dabei.

Speichern Sie die HTML-Datei und öffnen Sie sie im Browser. Nach einem Klick auf das Video beginnt die Wiedergabe und sogar eine Vollbild-Ansicht ist möglich. Hat alles geklappt, veröffentlichen Sie die Dateien aus dem Projekt-Ordner auf Ihrem Webspace und Ihr erstes Video steht für Freunde und Bekannte zum Anschauen bereit. Möchten Sie mehrere Videos in die gleiche Seite integrieren?

Für ein zweites Video kopieren Sie im <head> der Seite die Zeilen 3 und 4 und fügen sie unterhalb von Zeile 4 ein. Ersetzen Sie dabei "video1" durch "video2" und passen Sie die Namen der Video- und Vorschaubild-Dateien an. Im <body> legen Sie ein weiteres <div> an, dessen ID Sie ebenfalls durch "video2" ersetzen.

Dienstleister für Video-Hosting

Um die Videos aus dem Workshop online zu präsentieren, benötigen Sie Speicherplatz auf einem Webserver. Tripod stellt Ihnen gleich ein ganzes Gigabyte davon kostenlos und ohne Trafficbegrenzung zur Verfügung. Alternativ laden Sie Videoclips zu Videodiensten wie YouTube, Clipfish und MyVideo hoch, wo sie automatisch ins Flash-Format umgewandelt werden. Nachteil: Das Einbinden solcher Videos in die eigene Website ist oft nur mit Einschränkungen möglich. Anders bei den Angeboten RichMedia24 und EasyVideo, die wir Ihnen nachfolgend vorstellen.

RichMedia24

An professionelle Web-Video-Nutzer richtet sich das RichMedia24 getaufte Angebot der InterMedia Solutions GmbH. Mit i-Control, Design-Control und Live-Control 24 stehen Ihnen hier drei verschiedene Softwaretools zur Verfügung, mit deren Hilfe Sie Videos ohne nennenswerte technische Vorkenntnisse in eine Weboberfläche einfügen. Das Besondere dabei: Die Videos lassen sich auf elegante Weise mit anderen Medien verknüpfen.

Der Finanzdienstleister maxblue nutzt RichMedia24 z.B. für Reportagen vom Börsenparkett und blendet dabei passend zum im Video gezeigten Vortrag des Moderators Grafiken mit Kursverläufen in die Webseite ein. Auch Texte, PowerPoint-Folien, Flash-Animationen, Links und beliebige andere Web-taugliche Medien lassen sich auf diese Weise passgenau mit der Videopräsentation verknüpfen. Das Ergebnis binden Sie entweder in Ihre vorhanden Website ein oder öffnen es in einem Pop-up-Fenster.

Ausgeliefert werden die Videos über die hauseigenen Streaming-Server. Im Vergleich zum Download von einem Webserver ist diese Lösung komfortabler und effizienter. So lässt sich bspw. die Videobitrate automatisch an die individuelle Geschwindigkeit der Onlineverbindungen der Zuschauer anpassen, Videos starten schneller und per DRM (Digitales Rechte-Management) sind Zugriffskontrolle und Kopierschutz möglich. RichMedia24 steht zu monatlichen Preisen ab 39 Euro zur Verfügung. Einführungen in die drei Softwaretools finden Sie unter https://tinyurl.com/3d4mhb.

STRATO EASYVIDEO

Mit EasyVideo bietet Strato eine einfache Möglichkeit zur Veröffentlichung von Videos auf der eigenen Website. Über das Online-Kundencenter können hier beliebig viele Videos hochgeladen werden. Unter den zahlreichen unterstützten Videoformaten finden sich MPG, AVI, WMV, MOV und 3GP sowie das MP3-Audioformat.

Strato wandelt die Dateien nach dem Upload in Flash-Videos um, wobei Sie per Weboberfläche Einfluss auf die Bitrate nehmen können. Zwischen Upload und der Verfügbarkeit des fertigen Videos im Web vergehen nur wenige Minuten. Zum Einbinden der Videos in die eigene Website generiert Strato automatisch etwas HTML-Code. Player in unterschiedlicher Optik stehen ebenfalls zur Verfügung.