Videos online

Teil 2: Kurzfilme für die Website

  1. Kurzfilme für die Website
  2. 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.

Kurzfilme für die Website

© Archiv

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.

Kurzfilme für die Website

© Archiv

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= 
."http://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.

Kurzfilme für die Website

© Archiv

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 http://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.

Kurzfilme für die Website

© Archiv

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.

LINKS ZUM THEMA

Riva FLV Encoder: http://rivavx.de

JW FLV Player: http://tinyurl.com/coogd

FLV MetaData Injector: www.buraks.com/flvmdi

UFO JavaScript-Bibliothek: http://tinyurl.com/s2fza

RichMedia24 www.richmedia24.de

Strato: www.strato.de

Tripod: www.tripod.de

Clipfish: www.clipfish.de

YouTube: www.youtube.com

MyVideo: www.myvideo.de

Mehr zum Thema

HTML5: Quick Reference Guide
Ratgeber: "HTML5"

Die wichtigsten Tags auf einen Blick: In unserem praktischen Arbeitsblatt finden Sie einen wertvollen Begleiter für die Umstellung Ihrer Webprojekte…
internet, webdesign, google, content, ranking, seo, suchmaschine
Ratgeber: Urheberrecht

Einzigartige Inhalte bieten Lesern Mehrwert und sind ein wichtiges Qualitätsmerkmal. Ärgerlich, wenn sich jemand durch Kopieren an fremden Ergebnissen…
Die besten HTML5-Tipps
Neue Tipps & Tricks für blitz.io

Wer die Leistung einer Applikation ermitteln möchte, braucht keine Skripte zu schreiben, sondern kann einen der zahlreichen Online-Dienste einspannen.…
image.jpg
Ratgeber: Webentwicklung

Die clientseitige Javascript-Entwicklung bietet fast keine Entwicklungsumgebungen und auch keine vernünftigen Werkzeuge zur Fehlersuche. Eine der…
internet, webdesign, meteor, webapplikationen
Ratgeber

Mit Meteor sollen Entwickler in kurzer Zeit Umgebungen für Webapplikationen erstellen können, ohne sich um lästige Details kümmern zu müssen. Wir…