Videos einbinden in Webseiten

Transkript

1 Seite 1 von 6 Videos einbinden in Webseiten Video vorbereiten Einbinden mit Dreamweaver Einbinden als Flash-Video Einbinden über HTML-Code weitere Möglichkeiten Video vorbereiten Ausgangsformat Bildgröße im Web Komprimierung Kompatibilität AVI MPEG DivX WMV 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. 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. 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. 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-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- 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-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 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.

2 Seite 2 von 6 MOV RM 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-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 Video im Extra- Fenster abspielen einfaches Einfügen Quicktime- Video einbinden 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. 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) 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). 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. 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 ist von allen Plug-Ins am weitesten verbreitet (~90%) und z.b. im Internet-Explorer

3 Seite 3 von 6 Import MX 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 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 Import 2004 Import-Qualität 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 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.) 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- Unter Erweiterte Einstellungen kannst du das Video skalieren und

4 Seite 4 von 6 Einstellungen beschneiden, die Bildqualität ändern und speziellere Importmethoden wählen. Außer der Skalierung solltest du in der Regel hier nichts ändern. Bühne anpassen Export Steuerelemente hinzufügen Nach den abschließenden Bestätigungen ist der Encoder je nach Videolänge einige Zeit beschäftigt. Flash MX und MX 2004 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.) 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: 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 Einbindung 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. 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.

5 Seite 5 von 6 Video einbinden über HTML-Code 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 Media Player 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) 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 Real Player <embed src="videodatei.mpg" width="192" height="160" type="video/quicktime" autostart="true" controller="true" loop="true" border="0" pluginspage=" 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. <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 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. <object classid="clsid:02bf25d5-8c17-4b23-bc80-d3488abddc6b" width="192" height="144" codebase=" <param name="autoplay" value="true" /> <param name="controller" value="true" /> <param name="pluginspage" value=" /> <param name="target" value="myself" /> <param name="type" value="video/quicktime" />

6 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=" target="myself"></embed> </object></td> Media Player als Objekt <object width="192" height="189" classid="clsid:05589fa1-c356-11ce-bf01-00aa a" codebase=" "> <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 Übersichtsseite Video weiterführende Literatur und Links zum Thema letzte Aktualisierung: :52 zusammengestellt von Peter Lepke ; lepke@nils.nibis.de