Videos einbinden in Webseiten
zur übergeordneten Seite
 

zum Seitenanfang
Video vorbereiten
einen Abschnitt zurückeinen Abschnitt weiter
Ausgangsformat Dein Ausgangsmaterial wird meist von einer DigiCam kommen, das als AVI-Datei in einem Videoschnittprogramm bearbeitet wurde.
Beim Export des fertigen Projektes kannst du dann Format und Kodierung entsprechend den Angaben weiter unten festlegen.
Benutze als Ausgangsmaterial immer den Clip in höchstmöglicher Qualität, eine mehrfache Komprimierung führt zu unnötig starken Qualitätsverlusten.
Bildgröße im Web

Da im Internet die Datenübertragungsrate begrenzt ist, mußt du dein Video so komprimieren, dass es einerseits noch eine akzeptable Bildqualität hat, andererseits aber so klein ist, dass es in erträglichen Zeitspannen übertragen werden kann.

Für Videos, die in einem Extrafenster (Player) laufen und vom Betrachter auf volle Bildschirmgröße erweitert werden können, solltest du das VideoCD-Standardformat von 352x288, bzw. 50% vom DV-Format (360x288) nehmen.
In die Seite eingebettete Videos, die oft nur zur Vorschau des großen Videos dienen, sollten wesentlich kleiner sein. Größer als 180x144 (25% des DV-Formates)sollte das Video nicht sein; Videos ohne viel Details sind auch bei einer Größe von 100x80 oder sogar 90x72 noch gut zur Vorschau geeignet.
Gib bei einem Link auf eine Videodatei fairerweise immer mit an, wie groß der beabsichtigte Download werden wird.

Komprimierung Für die Komprimierung gibt es verschiedene Coder für die verschiedenen Formate. Da jede Komprimierung mit zum Teil deutlich sichtbaren Qualitätsverlusten verbunden ist, solltest du durch eigene Versuche den maximalen noch akzektablen Komprimierungsgrad herausfinden, der je nach Filmmaterial sehr unterschiedlich sein kann.
Kompatibilität

Bei der Wahl des Codecs für die Komprimierung solltest du beachten, dass nicht jeder, der auf deiner Seite surft den benötigten entsprechenden Decoder auf seinem Rechner installiert hat. Kaum jemand wird extra für deinen Film einen (evtl. mehrere MB großen) Download mit anschließender Installation und meist notwendigem Neustart durchführen wollen.
Angaben zur Verbreitung und Verfügbarkeit der Decoder findest du weiter unten bei den einzelnen Formaten.

AVI AVI-Dateien sind ein Windows-Format, können aber praktisch von jedem der angebotenen Player und auf jedem Betriebssystem abgespielt werden.
Allerdings ist Avi nicht gleich AVI,  z.B. erzeugt der DivX-Codec AVI-Dateien, die eine Videokompression nach den MPEG-4 Standard haben.
MPEG

MPEG- oder auch MPG-Dateien können praktisch von jedem der angebotenen Player abgespielt werden, sofern sie dem MPEG-1 Standard folgen.
Auch MPEG-2-Dateien (DVD-Standard) haben die gleiche Endung, können aber nur mit speziellen kostenflichtigen Codecs (DVD-Playersoftware) abgespielt werden.
MPEG-4-Dateien (*.MP4) spielen bisher noch keine Rolle, lediglich die bessere Komprimierungsqualität dieses neuen Formates hat Eingang in den DivX-Codec gefunden, der aber Dateien mit der Endung *.AVI erzeugt.

DivX

DivX-Dateien benötigen zum Abspielen den kostenlosen DivX-Player bzw. den DivX-Codec (4MB; win,linux,mac), die kleinste Version ohne Werbeeinblendungen ist völlig ausreichend. Diesen Player haben nicht viele Surfer installiert, er ist allerdings für Video-Fans momentan 1. Wahl. Die erzeugten Dateien haben die Endung AVI, können aber mit normalen AVI-Codecs nicht abgespielt werden
Zum Codieren brauchst du DivX-Pro (4,4MB), dass es mit Werbeeinblendung umsonst gibt, ohne Werbung kostet er etwa €20.- .

WMV WMV-Dateien benötigen zum Abspielen den Windows Media Player (Update: 9-13MB; win), der auf neueren Windows-Rechners automatisch in einer allerdings nicht mehr aktuellen Version installiert ist. Die neue Version betätigt sich in den Grundeinstellungen als "Spionagetool". WMV-Dateien können mit einem Digital-Right-Managment (DRM) versehen und für das Internet-Streaming vorgesehen werden.
MOV MOV-Dateien benötigen zum Abspielen den Quicktime-Player (9MB; win, mac), er ist für Windows ab Win95 und für Mac-OS ab v.8.1 kostenlos erhältlich; etwa 50% aller Surfer haben ihn installiert. Mit Quicktime kann man auch Streaming-Media erzeugen.
RM RM-Dateien benötigen zum Abspielen den RealPlayer (~15MB; win,linux,mac). Der Download dauert ziemlich lange, man muss aufpassen, dass man wirklich die kostenfreie Version erwischt und muss während der Installation persönliche Angaben machen. Etwa 60% aller Surfer haben einen RealPlayer installiert.
RealMedia ist für das Internet-Streaming optimiert und zum Archivieren von Videos auf Datenträgern wenig geeignet.

zum Seitenanfang
Video einbinden mt Dreamweaver
einen Abschnitt zurückeinen Abschnitt weiter
Vorbemerkung Du benötigst eine Version von Dreamweaver MX oder neuer.
Du kannst Videos in einem neuen Fenster abspielen lassen oder direkt in deine Internet-Seite einbinden.
Über den Extension-Manager kannst du Ergänzungen downloaden und in Dreamweaver integrieren, die ein kompfortables Einbinden von Multimedia-Dateien stark vereinfachen.
Video im Extra-Fenster abspielen Soll das Video vom aktuellen Player des Systems in einem eigenen Fenster abgespielt werden, so reicht es einen Link auf die Video-Datei zu setzen. Der Film kann dann dort vom Benutzer wie gewohnt gesteuert werden. (siehe auch weiter unten bei Video einbinden über HTML-Code)

einfaches Einfügen

 

Klicke auf die Stelle deiner Seite, wo das Video eingefügt werden soll, klicke dann Einfügen - Medien - PlugIn oder auf den Puzzlestein oben in der Einfügen-Leiste unter Medien. In dem sich öffnenden Dateifenster wählst du dann das einzufügende Video aus.
Dreamweaver zeigt an der Einfügestelle einen kleinen Puzzlestein an und hat folgenden Quellcode eingefügt.

<embed src="VideoDatei.mpg" width="32" height="32"></embed>

Markiere den Puzzlestein und stelle dann unten bei Eigenschaften die Größe deines Videos ein. (Anders als beim Quicktime-Player werden beim Media Player bei zu kleiner Videogröße nicht alle Steuerelemente dargestellt (erst ab 275px Breite erscheint die Lautstärkereglung vollständig.).

Das Video wird mit dem im Computer eingestellten Standardplayer (meist MS-MedienPlayer) abgespielt. Du kannst die Erscheinungsform und das Verhalten ( Sofortstart, Endlos-Schleife) im Quelltext modifizieren (siehe weiter unten bei Video einbinden über HTML-Code).

Quicktime-
Video
einbinden

 

Wenn dein Video mit dem QuickTime-Player abgespielt werden soll, kannst du über den Macromedia Extension Manager das Plug-In QuickTime Movie aus dem Internet holen, in Dreamweaver einbinden und dann als Komponente auf deiner Seite einfügen:

Starte den Macromedia Extension Manager und wähle im mittleren Auswahlfenster die Anwendung Dreamweaver aus.
Gehe zur Macromedia-Internetseite und suche in der Rubrik Dreamweaver - Multimedia nach dem Plug-In QuickTime Movie und lade es in einen Ordner deiner Wahl.
Installiere das Plug-In.
Ziehe in Dreamweaver das QuickTime-Symbol auf deine Seite.
Nachdem die QuickTime Movie - Extension einmal installiert ist, kannst du das QuickTime-Symbol jederzeit auf deine Seite ziehen (einfügen) und unten im Eigenschaften-Inspektor die Eigenschaften deines Filmes festlegen.

zum Seitenanfang
Video einbinden als Flash-Film
einen Abschnitt zurückeinen Abschnitt weiter
Vorbemerkung

Zur Codierung brauchst du Flash MX oder eine neuere Version.
( Mit Flash CS3 und Dreamweaver CS3 hat sich das Einbinden von Videos wesentlich vereinfacht - eine Extra-Anleitung findest du weiter unten. )
Zum Ansehen im Internet benötigt man den Flash-Player.

Der Flash-Player

  • ist von allen Plug-Ins am weitesten verbreitet (~90%) und z.B. im Internet-Explorer standardmäßig in einer älteren Version schon installiert.
  • ist vergleichsweise klein (V.7 : 0.48MB)
  • ist für Windows, Mac und Linux frei erhältlich
  • installiert sich nach Knopfdruck automatisch, ein Neustart ist nicht erforderlich. Es werden keine persönlichen Daten abgefragt.

Das Flash-Video kann nur innerhalb des Flash-Programms komprimiert werden, Ausgangsmaterial sollte möglichst die Original-AVI-Datei vom CamCorder sein.

Flash MX
Import MX

Starte Flash, klicke dann auf Datei - Importieren und wähle das zu komprimierende Video aus. Es erscheint ein Fenster, in dem du einige Einstellungen für die Komprimierung vornehmen kannst.

Komprimierung Wähle eine Qualität im Bereich 70-80%, lasse das Schlüsselbildintervall zunächst bei 24 und skaliere das Video auf 42% (genauer läßt sich 300x240 leider nicht einstellen). Aktiviere die Häkchen bei Bildrate synchronisieren und bei Audio importieren. Das Bild zu Bild Verhältnis kann bei 1:1 bleiben, es spielt bei aktivierter Synchronisation keine Rolle.
Nach einem Klick auf OK ist der Encoder je nach Videolänge einige Zeit beschäftigt.
Flash MX 2004
Import 2004

Starte Flash, klicke dann auf Datei - Importieren - In Bühne importieren und wähle das zu komprimierende Video aus. Im erscheinenden Fenster wählst du dann gesamtes Video importieren.
(Sollte dein Video noch nicht bearbeitet sein, kannst du das hier mit eingeschtänkten Möglichkeiten nachholen.)

Import-Qualität

Im folgenden Fenster kannst du die Übertragungs-Bandbreite und damit den Komprimierungsfaktor einstellen.
Klickst du rechts auf Bearbeiten, kannst du einige Anpassungen vornehmen:

  • Bandbreite führt zu einer konstanten Bitrate, evtl. zu Lasten einer gleichbleibenden Qualität.
  • Qualität führt zu konstanter Qualität zu Lasten der Bitrate.
  • Ein kürzeres Schlüsselbildintervall und hochwertige Schlüsselbilder bringt mehr Qualität zu Lasten der Dateigröße.
  • Schnellkomprimierung spart Zeit zu Lasten der Qualität stark bewegter Inhalte.
  • Ausschalten der Bildraten-Synchronisation und gleichzeitiges Ändern des Bild : Bild Verhältnisses auf 1:8 (bei gleichzeitigem Setzen der Bühnenbildrate auf 3 BpS) führt bei entsprechender Bildgröße zu sehr kompakten, aber abgehackten Vorschau-Filmchen.

weitere Import-Einstellungen

Unter Erweiterte Einstellungen kannst du das Video skalieren und beschneiden, die Bildqualität ändern und speziellere Importmethoden wählen. Außer der Skalierung solltest du in der Regel hier nichts ändern.

Nach den abschließenden Bestätigungen ist der Encoder je nach Videolänge einige Zeit beschäftigt.

Flash MX und MX 2004
Bühne anpassen

Vor dem Export sollte das Video richtig auf der Flash-Bühne positioniert werden und die Bühnengröße angepasst werden:

Bühnengröße: Modifizieren - Dokument ...
Ausrichtung: Modifizieren - Ausrichten ... (An Bühne ausrichten muss aktiviert sein.)

Export

Wenn alles fertig ist, kannst du den Film mit Datei - Film exportieren als SWF-Datei auf deiner Festplatte speichern.

Eventuell willst du deinen Film aber vor dem Export noch mit Steuerelementen versehen:

Steuerelemente

hinzufügen

Wenn dein Video Steuerelemente enthalten soll, kannst du über den Macromedia Extension Manager das Plug-In VideoControl aus dem Internet holen, in Flash einbinden und dann als Komponente auf deinen Film ziehen:

Starte den Macromedia Extension Manager und wähle im mittleren Auswahlfenster die Anwendung Flash aus.
Gehe zur Macromedia-Internetseite und suche in der Rubrik Flash - Multimedia nach dem Plug-In VideoControl und lade es in einen Ordner deiner Wahl.
Installiere das Plug-In.
Ziehe in Flash das VideoControl-Symbol auf deinen Videofilm. (Größenanpassung des Controls und Positionierung am unteren Rand, regeln sich automatisch.Die Bühnengröße muss allerdings von Hand nachgeregelt werden werden (+15px nach unten).
Optimierung

Du solltest dein Video immer mindestens mit zwei verschiedenen Qualitätsstufen komprimieren, um die kleinste Filmgröße zu ermitteln, die deinen Qualitätsanforderungen noch genügt.

Einbindung
Die Einbindung in eine Internetseite erfolgt am leichtesten mit Dreamweaver:
Wähle die Einfügestelle aus und klicke auf Einfügen - Medien - Flash oder auf das Flash-Symbol in der Einfügen-Leiste.
Flash-Video einbinden mit Flash CS3professionel und Dreamweaver CS3
Video umwandeln
flash-icon

Zu Flash wird ein Extraprogramm Flash-Video-Encoder mitgeliefert, mit dem du mehrere Filme automatisch nacheinander ins Flash-Format (.flv) umwandeln kannst. Klicke nach dem Start des Programms einfach auf Hinzufügen. Hast du alle Videos ausgewählt, klickst du auf Warteschlange starten und schon werden alle Videos umgewandelt.

Flash-Video-Encoder

Einstellungen

Unter Einstellungen kannst du zwischen zwei Encodern wählen, dem alten SorensonSpark und dem neueren On2VP6. Außerdem findest du hier einige Einstellungen zu Videoqualität und Videogröße.

Videoeinstellungen

Videogröße

Video einfügen
Dreamweaver-Icon

DW-Video einfügenWähle in Dreamweaver CS3 Einfügen - Medien - Flash-Video... . Im erscheinenden Fenster gibst du den Videotyp (normal immer Progressiver Video Download) und die Adresse (URL) der Videodatei an. Dann kannst du das Aussehen der Steuerelemente bestimmen, die beim MouseOver unten innerhalb des Videos halbtransparent erscheinen. Über Größe erkennen bekommt das Videofenster automatisch genau die richtige Größe. Zum Schluss kannst du noch wählen, ob das Video beim Seitenaufruf automatisch starten soll und ob es am Ende automatisch ' zurückspulen' soll.


Wenn du dann OK klickst, bekommst du noch eine Mitteilung, dass eine Zusatzdatei (mit JavaScript) zur Verfügung gestellt wird, die auch mit auf den Server hochgeladen werden muss, damit alles funktioniert.
Eine Vorschau deines Videos kannst du dir nur im Browser ansehen.

Upload zum Server

ZU deiner HTML-Datei gehören jetzt noch folgende Dateien und Ordner, die alle mit auf den Server übertragen werden müssen:

  • <Der Film>.flv - der Film im Flash-Format
  • FLVPlayer_Progressive.swf - der Flash-Player
  • Clear_Skin_3.swf (oä.) - die Steuerelemente
  • Ordner: Scripts - mit der Datei AC_RunActiveContent.js

zum Seitenanfang
Video einbinden über HTML-Code
einen Abschnitt zurückeinen Abschnitt weiter
Video im Extra-Fenster abspielen
 
 
 

Soll das Video vom aktuellen Player des Systems in einem eigenen Fenster abgespielt werden, so reicht es einen Link auf die Video-Datei zu setzen.

<a href="videos/video1.mpg">Video im Extrafenster </a>

Der Film kann dann dort vom Benutzer wie gewohnt gesteuert werden.

Der Internet-Explorer fragt evtl. nach, ob das Medium (Video/Audio) im Medienfenster des Browsers oder im großen Player-Fenster wiedergegeben werden soll.
Einmal gewählte Einstellungen werden gespeichert, können aber über Medien (Ansicht - Explorerleiste - Medien) über Medienoptionen jederzeit wieder geändert werden.
Empfehlenswert ist die Einstellung 'Webmedien in der Leiste wiedergeben', da die kleine Darstellung unten links das weitere Surfen nicht behindert, andererseits aber jederzeit vergrößert werden kann (rechts oben).

Video einbinden

Zum Einbinden von Videos (und auch Audios) benutzt du das embed-Tag; es ist browserunabhängig und ruft einfach ein entsprechendes Plug-In zum Abspielen auf.

<embed src="videodatei.mpg" width="192" height="189"></embed>

Neben dem Namen der Videodatei mußt du noch die Breite und die Höhe des Videos angeben; bei einigen Plug-Ins muss die Höhe der Kontroll-Leiste noch zur Videohöhe addiert werden (Media Player 9 : +45px)

Media Player

Willst du, dass dein Video auf jeden Fall vom Media Player gestartet wird, kannst du das explizit im HTML-Tag mit angeben:

<embed ... type="application/x-mplayer2" ...> (für neuere Player, versch. Formate)

<embed ... type="video/x-ms-wmv" ...> (für Videos im neuen WMV-Format)
<embed ... type="video/x-msvideo" ...> (für das AVI-Format,Video for Windows)

Mit einigen weiteren optionalen Parametern, die jeweils den Wert 0 oder 1 haben müssen, kannst du das Verhalten und Erscheinungsbild das Players verändern:

<embed src="videodatei.mpg" width="192" height="189" type="application/x-mplayer2" name=MediaPlayer autostart=1 showcontrols=0 showstatusbar=0 autorewind=1 showdisplay=0></embed>

QuickTime -Player

<embed src="videodatei.mpg" width="192" height="160" type="video/quicktime" autostart="true" controller="true" loop="true" border="0" pluginspage="http://www.apple.com/quicktime/
download/indext.html">
</embed>

(pluginspace nennt die Adresse, wo das Plug-In heruntergeladen werden soll, falls es auf dem Rechner nicht installiert ist.) Die Controllerleiste hat eine Höhe von 16px, die zur Videohöhe addiert werden muss.

Real Player

<embed src="videodatei.rm" width="192" height="144" autostart="true" loop="true" type="audio/x-pn-realaudio-plugin" console="video1" controls="ImageWindow, ControlPanel, StatusBar"></embed>

console="video1" muss stehen (1.Video einer eventuellen Liste); mit den 3 Parametern bei controls kannst du experimentieren.


zum Seitenanfang
weitere Möglichkeiten
einen Abschnitt zurückeinen Abschnitt weiter
embed - object
Obwohl das embed-Tag mit allen Browsern funktioniert, gehört es doch nicht zum HTML-Standard. Nach dem Standard sollte zum Einbinden das object-Tag benutzt werden. Um zu älteren Browsern kompatibel zu bleiben, ist es sinnvoll, innerhalb der object-Definition zusätzlich mit dem embed-Tag zu operieren. Durch das object-Tag wird ein ActiveX-Element in die Seite eingebunden.
QuickTime
als Objekt


<object classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" width="192" height="144" codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<param name="autoplay" value="true" />
<param name="controller" value="true" />
<param name="pluginspage" value="http://www.apple.com/quicktime/download/indext.html" />
<param name="target" value="myself" />
<param name="type" value="video/quicktime" />
<param name="src" value="video.mpg" />
<embed src="video.mpg" width="192" height="144" autoplay="true" controller="true" border="0" pluginspage="http://www.apple.com/quicktime/download/indext.html" target="myself"></embed>
</object></td>
Media Player
als Objekt


<object width="192" height="189"
classid="CLSID:05589FA1-C356-11CE-BF01-00AA0055595A"
codebase="http:// ">
<param name="typ" value="video/x-ms-wmv">
<param name="src" value="video.wmv">
<param name="autostart" value="0">
<param name="showcontrols" value="1">
</object>


zum Seitenanfang
Verwandte Themen
einen Abschnitt zurück
 

 


 
  letzte Aktualisierung:  26.08.2007 13:54


zusammengestellt von Peter Lepke ;    lepke@nils.nibis.de