zur « Themenübersicht Webmaster-Tricks
HTML_CSS - Sparte Multimedia
Videos in Homepage einbinden
Eingetragen am 13.07.2008
Manch kleines Video bereichert eine Homepage und sind auch von den Besuchern recht begehrt. Bloß weiß kaum jemand, wie man ein Video für den Besucher attraktiv in seine Homepage einbauen kann.
Für das Einbinden von Videos in die eigene Homepage bieten sich mehrere Möglichkeiten an...
mit genügend Speicherplatz
kein Speicherplatz vorhanden
Speicherplatz ist auf dem Server ist vorhanden:
Grundsätzlich:
Schritt 1:
Erstellung des Videos:
Videos beanspruchen viel Speicherplatz, entsprechend lange sind auch die Downloadzeiten, selbst bei DSL. Die Videos sollten also möglichst klein sein. Speichert eure Videos in einer Breite von maximal 320 Pixel und nicht länger als ca. 5 Minuten.
Wählt Dateien und Codecs, die auch durch gängige Software verarbeitet werden kann. Z.B. .mov für QuickTime von Apple, welches auch auch mit Windows-Rechnern kompatibel ist. Dann hätten wir noch .mpeg und .avi.
AVIs gehören mittlerweile zum Standard, aber .avi ist nicht gleich .avi. Hier werden unterschiedliche Codecs eingesetzt, ein .avi kann unsäglich schwer, aber auch leicht sein. AVIs (gleich mit mpg4) mit dem H.264-Codec sind bei hoher Qualität relativ leicht, nur hat nicht jeder den H.264-Codec installiert. Ein .avi kann nur abgespielt werden, wenn der entsprechende Codec auch auf dem lokalen Rechner installiert ist.
Tipp:
Videos in der Software Flash von Macromedia einbinden oder eigene FLV-Dateien erstellen (s.u.), da der Flash-Player auf fast allen Systemen installiert ist und Codecs keine Rolle spielen.
Ansonsten .mov, da QuickTime auf vielen Rechnern installiert ist oder .avi mit dem Mikrodoof- oder fdshow-Codec.
Schritt 2 :
Video auf den Webserver laden:
Schritt 3:
Das Einbetten in die Hompage, bzw, Website:
Je nach Dateiendung werden unterschiedliche Player angesprochen. Es erscheint ein kleines Fenster mit dem Fenster und zugleich Steuerelemente für Start und Stop...
Grundsätzlich wird ein Video so aufgerufen, der entsprechende Player wird geladen:
<embed src="video/video.avi" width="400" height="300"></embed>
Width und height erklären sich von alleine...
WMV-Dateien:
<embed type="video/x-ms-wmv" src=....
AVI-MS:
<embed type="video/x-msvideo"....
Steuerelemente:
<embed src="videodatei.mpg" width="192" height="189" type="application/x-mplayer2" name=MediaPlayer autostart=1 showcontrols=0 showstatusbar=0 autorewind=1 showdisplay=0>
Der Nachteil hier sind lange Ladezeiten und das Video ist erst zu sehen, wenn die gesamte Datei geladen ist.
Der moderne Weg:
Flash:
Dieses Format setzt sich auf Grund der Bedienerfreundlichkeit und dem sparsamen Umgang mit Speicherplatz zunehmend durch. Weitere Vorteil ist der, dass man sich um Codecs nicht kümmern muss, da der Flash-Player fast überall installiert ist und im Gegensatz zu den anderen Verfahren das Video nicht erst geladen werden muss. Hier wird das Video dank dem Streaming-Verfahren unmittelbar angezeigt. Beispiele sind hier YouTube u.s.w...
Der einfachste Weg führt über die ADOBE-Software Flash. Nur ist es fraglich, ob sich die Anschaffung zu diesem Preis lohnt, es sei denn, man hat damit vielleicht beruflich zu tun, oder die Kasse ist gut gefüllt.
Mit ca. 60 Euronen, ältere Versionen auch deutlich günstiger ist MAGIX Video de Luxe. Neben dem Erstellen von DVDs kann man seine Filme auch in das Flash-Format umwandeln, der Player wird gleich mitgeliefert. Diese Software ist ein Tipp!
Die kostenlose Lösung:br />
... führt über die Software SUPER 2009, Download: (chip.de/downloads/SUPER-2009). Hiermit konvertiert Ihr alle gängigen Video-Formate in das FLV oder SWF-Format um.
Nützlich ist die Software auch, da Ihr auch in andere Formate konvertieren könnt. Lest dazu auch: Videos_in_FLV_umwandeln_mit_SUPER_2008.html
Liegen eure Videos bereits als .mpg vor, empfehle ich eher den Riva FLV Encoder (http://riva-flv-encoder.softonic.de/. Das ist ein kleines feines Tool, das zwar nicht all zu viele Möglichkeiten bietet, aber die Ergebnisse sind m.E. besser als bei SUPER 2009.
Die Einbindung:
Ihr habt nun euer Video ins Flash SWF oder FLV-Format konvertiert und wollt es nun in eure Homepage einbinden. Hier gibt es wiederrum zwei Möglichkeiten. Entweder per HTML oder per JavaScript.
Per HTML:
<object height="240" align="middle" width="320" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" id="banner">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="Videoname.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#000033" />
<param name="screenmode" value="default" /> <embed height="240" align="middle" width="320" src="File/Produce_1.swf" quality="high" screenmode="default" bgcolor="#000033" showdisplay="1" autorewind="0" showstatusbar="1" showcontrols="1" name="banner" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed> </object><br /><br /><br />
Der Nachteil besteht darin, dass das Video erst vollständig geladen werden muss. Ich sehe als die beste Möglichkeit das Streaming-Verfahren per JavaScript.
Streaming
Natürlich können hier Besucher ausgeschlossen werden, wer sich jedoch Videos betrachten möchte, hat m.E. aber JavaScript und Flash installiert, bzw. aktiviert.
Der große Vorteil ist hier, dass das Video bereits betrachtet werden kann, obwohl das Video noch nicht ganz geladen worden ist. Beispiel YouTube und Konsorten...
Dazu muss ein Player auf eurem Server instaliert werden, ist aber kein Problem. Hier handelt es sich meist um eine Flash .swf-Datei i.V. mit einem JavaScript.
Für mich gibt es hier zwei Lösungen mit unterschiedlichen Zielsetzungen:
1.) woosterwebdesign.com/flvplayer/
Hiermit ist es möglich, sich ein eigenes kleines Videoportal bzw. Videogalerie aufzubauen. In einer Leiste werden mehrere Videos eingebunden.
2.) Der JW FLV-Player, (Download und Info: www.longtailvideo.com/.../jw-flv-player/)
Der ist eher für das einzelne Video auf einer Seite gedacht, obwohl man hier auch hiermit mehrere Videos auf eine Seite darstellen kann. Lese dazu auch JW_FLV_Player_und_mehrere_Videos.html
Wer kein oder wenig Platz auf seinem Server hat:
Richtet euch ein Konto z.B. bei YouTube ein, YouTube bietet Möglichkeiten, eure Videos über eine Schnittstelle in Eure Homepage einzubauen.
Bisherige Kommentare: Kommentar schreiben»
vielen Dank
sehr informativ und hilfreich.
Sehr informativ und sehr gut erklärt. Dadurch leicht anwendbar!!
Ich benötige dies zwar noch nicht , aber vielleicht später.
