Videos einbinden in Webseiten Seite 1 von 6 Video einbinden in

Video einbinden in Webseiten
Seite 1 von 6
Videos einbinden in Webseiten
z
z
z
z
z
Video vorbereiten
Einbinden mit Dreamweaver
Einbinden als Flash-Video
Einbinden über HTML-Code
weitere Möglichkeiten
Video vorbereiten
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.
http://www.nibis.de/~lepke/video/webvideo/webvideo.html
26.04.2007
Video einbinden in Webseiten
Seite 2 von 6
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.
Video einbinden mt Dreamweaver
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- Soll das Video vom aktuellen Player des Systems in einem eigenen Fenster abgespielt werden,
Fenster abspielen 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).
QuicktimeVideo
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 QuickTimeSymbol jederzeit auf deine Seite ziehen (einfügen) und unten im Eigenschaften-Inspektor die
Eigenschaften deines Filmes festlegen.
Video einbinden als Flash-Film
Vorbemerkung
Zur Codierung brauchst du Flash MX oder eine neuere Version.
Zum Ansehen im Internet benötigt man den Flash-Player.
Der Flash-Player
z
ist von allen Plug-Ins am weitesten verbreitet (~90%) und z.B. im Internet-Explorer
http://www.nibis.de/~lepke/video/webvideo/webvideo.html
26.04.2007
Video einbinden in Webseiten
z
z
z
Seite 3 von 6
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:
z
z
z
z
z
weitere Import-
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.
Unter Erweiterte Einstellungen kannst du das Video skalieren und
http://www.nibis.de/~lepke/video/webvideo/webvideo.html
26.04.2007
Video einbinden in Webseiten
Einstellungen
Seite 4 von 6
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 FlashSymbol in der Einfügen-Leiste.
http://www.nibis.de/~lepke/video/webvideo/webvideo.html
26.04.2007
Video einbinden in Webseiten
Seite 5 von 6
Video einbinden über HTML-Code
Video im ExtraFenster 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.
weitere Möglichkeiten
embed - object
QuickTime
als Objekt
Obwohl das embed-Tag mit allen Browsern funktioniert, gehört es doch nicht zum HTMLStandard. 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.
<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" />
http://www.nibis.de/~lepke/video/webvideo/webvideo.html
26.04.2007
Video einbinden in Webseiten
Seite 6 von 6
<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>
Verwandte Themen
z
z
Übersichtsseite Video
weiterführende Literatur und Links zum Thema
letzte Aktualisierung: 29.09.2004 17:52
zusammengestellt von Peter Lepke ;
lepke@nils.nibis.de
http://www.nibis.de/~lepke/video/webvideo/webvideo.html
26.04.2007