Homeport von Dieter Zinniker

Videos / Filme in Webseiten einbauen

Hier finden man eine Kurzanleitung für die Erstellung und Ein­bettung von Videos in Webseiten sowie gezielte Verweise auf weiter­führende Seiten zu diesem Thema.

So sieht zum Beispiel das Ergebnis dieses Tutorials aus:

Sollten hier kein Video dargestellt werden, so fehlt vermutlich das Adobe Flash Player Plugin (Erweiterung) in Ihrem Browser. Installieren kann man dieses durch Anklicken des obigen Links oder hier.

Einleitung

Anhand einfacher Beispiele wird hier aufgezeigt, wie Videos in eine Webseite eingebaut werden können. Schrittweise wird das Beispiel mit fortschrittlicheren Methoden ausgebaut.
Die Beispiele sind so gehalten, dass sie sofort in die eigene Webseite übernommen werden können!
Dieses Tutorial richtet sich an Einsteiger in die Thematik. Fortgeschrittene finden hier Verweise auf weiterführende Dokumentation zu den hier vorgestellten Implementierungsvarianten.

Wer mit dieser Anleitung Probleme hat, kontaktiere mich. So wurde auch die Seite von Saitenklang mit Flash angereichert. Herr Seibert hatte Probleme und wir haben die zusammen gelöst.

Welches ist das richtige Videoformat?

Als Standard für Videos in Webseiten hat sich zweifelslos Flash-Video von Adobe Systems (ehemals Macromedia) etabliert. Die meisten grossen Video-Portale, wie z.B. YouTube verwenden dieses Format.
Das Flash Video Format ermöglicht das Abspielen von Videos innerhalb einer Webseite, sofern der Benutzer das Adobe Flash Player Plugin im Webbrowser installiert hat. Der Vorteil des Adobe Flash Players gegenüber Alternativen von RealMedia und QuickTime ist seine sehr hohe Verbreitung: ca. 98% aller Webbrowser haben dieses Plugin bereits installiert. Besucher meiner Webpräsenz haben praktisch alle einen aktuellen Adobe Flash Player installiert (siehe hier).

Flash Video ist ein Streaming Media und wird somit gestreamt, was bedeutet, dass die Wiedergabe kurz nach dem Empfang des Filmanfangs beginnen kann. Der Rest des Filmes wird im Hintergrund nachgeladen und zwar auch dann, wenn der Benutzer die Wiedergabe stoppt oder den Player gar schliesst. Dazu muss eine ausreichende Datenübertragungsrate zur Verfügung stehen, anderfalls kommt es zu Rucklern oder gar Stockungen bei der Wiedergabe. Der grosse Vorteil ist, dass das Video nicht erst vollständig auf den Client-PC geladen werden muss, bevor es angesehen werden kann.

Anmerkungen:

Was ist Adobe Flash?

Zuerst sollten wir uns Klarheit über einige Begriffe verschaffen. Im Internet kursieren viele Halbwahrheiten, weil einige Begriffe nicht klar auseinandergehalten werden und es so zu Missverständnissen kommt.

Adobe Flash ist eine von der Firma Adobe geschaffene proprietäre integrierte Entwicklungsumgebung (IDE) zur Erstellung multimedialer Inhalte. Die mit Adobe Flash erstellten Quelldateien (FLA-Dateien) werden zum Einsatz auf einem Webserver in SWF-Dateien kompiliert (übersetzt) und oft auch komprimiert. Dieses SWF-Format (SWF: Shockwave Flash), ein auf Vektorgrafiken basierendes Grafik- und Animationsformat, bildet die Basis von Flash und benötigen zur Wiedergabe der Flash-Animationen eine Browser-spezifische Erweiterung: Den Adobe Flash Player.
Daneben hat Adobe auch ein proprietäres Flash Video (FLV) Format entwichelt, das vornehmlich für Internetübertragungen von Videoinhalten genutzt wird. Das Format unterstützt nur eine relativ geringe Anzahl an Video- und Audio-Codecs und ist je nach verwendetem Codec kompatibel zum Adobe Flash Player (ab Version 6).
Es besteht zusätzlich die Möglichkeit, derartige Flash-Video-Dateien in einer SWF-Datei eingebettet zu laden. Nebst der Adobe Flash IDE stehen dafür
Tools wie JW FLV Media Player, SWFObject 2.0, FLV2SWF u.a. zur Verfügung.

Um Flash-Videos ausserhalb des Webbrowsers abzuspielen, ist die Installation eines entsprechenden Videoplayers erforderlich, wie z.B. FLV Player, JW Desktop Player.

Weiterführende Tutorials:

• Embedding Flash

Wie baut man einen Flash Film in eine Webseite ein?

1. Das Video befindet sich auf einem andern Server als Flash-Film, z.B. bei YouTube


2. Das Flash-Video soll von einem andern Server auf den eigenen Server kopiert werden, um dann vom eigenen Server präsentiert zu werden.


3. Eigenproduktion: Ein vorhandener Film soll ins Flash-Format konvertiert werden, um ihn im Web zu präsentieren.


4. Fortschritliche Techniken: Hier wird gezeigt, wie die Beispiele optimiert werden können.

	
<object width="425" height="344">
  <param name="movie" value="http://www.youtube.com/v/M9BON5nd8Fg&hl=en&fs=1"></param>
  <param name="wmode" value="transparent"></param>
  <embed src="http://www.youtube.com/v/M9BON5nd8Fg&hl=en&fs=1" 
    type="application/x-shockwave-flash" wmode="transparent" 
    width="425" height="344">
  </embed>
</object>

Der Code besteht im wesentlichen aus zwei Fragmenten: Einem Internet Explorer spezifischen Teil (grüne Schrift) und einem Teil für die Browser Firefox, Opera, Safari, Chrome und Netscape (blaue Schrift).

Das <embed>-Tag wird vom Netscape, Firefox, Opera, Chrome und Safari-Browser erkannt, der Internet Explorer ignoriert diesen Tag und führt nur das grün gekennzeichnete <object>-Tag aus.
Dieser HTML-Code liegt auch dem in der Einleitung gezeigten Video zugrunde.

Für Neueinsteiger in das hier besprochene Thema ist dies sicher die einfachste Methode:

1. Video auf YouTube hochladen. Das Video wird automatisch in Flash Video konvertiert.
2. Den Code zum Einbetten kopieren und in die eigene Webseiten einbauen.

Fertig und es funktioniert auf Anhieb!

Sie haben ein Flash Video auf einer andern Webseite gesehen und wollen nun dieses kopieren und dann in der eigenen Webseite verwenden (ACHTUNG: Urheberrechte beachten!).

	
<object width="160%" height="120">
  <param name="movie" value="videos/file-845898611.flv" />
  <param name="wmode" value="transparent" />
  <embed width="160" height="120" wmode="transparent"  
    src="videos/file-845898611.flv"/></embed>
</object>

Mit diesem Ergebnis:

Das Video wird von keinem Browser mehr angezeigt!
Über die Gründe kann ich nur spekulieren und da das <embed>-Tag vom W3C ohnehin missbilligt wird (ist unter XHTML ungültig), habe ich mich nach einer andern Möglichkeit umgeschaut und war dabei erfolgreich, wie das nachstehende nun funktionierende Video zeigt (nicht im Internet Explorer):

Der entsprechene HTML-Code sieht wie folgt aus:

		 
<div width="50%" align="center">         
<!-- Objekt für den Internet Explorer -->
  <object id="demo_flv" width="160" height="140" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
    <param name="movie" value="videos/file-845898611.flv" />
    <param name="allowfullscreen" value="true" />
    <param name="play" value="true" />
    <param name="loop" value="false" />
    <!--[if !IE]>-->
<!-- Objekt für alle andern Browser -->	
      <object width="160" height="140" data="mediaplayer.swf" type="application/x-shockwave-flash">
	    <param name="flashvars" value="file=videos/file-845898611.flv" />
	    <param name="allowfullscreen" value="true" />
	    <param name="play" value="true" />
	    <param name="loop" value="false" />
    <!--<![endif]-->
      <p>
        <a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" 
          alt="Get Adobe Flash player" /><br />Zur Anzeige dieses Videos bitte den Adobe Flash Flayer installieren.
        </a>
      </p>
    <!--[if !IE]>-->
      </object>
    <!--<![endif]-->
  </object>		 
</div> 

Wie man den Kommentaren entnehmen kann, ist auch hier ein Internet-Explorer spezifischer Teil und ein Teil für alle andern Browser zu finden. Für diese wird noch der mediaplayer.swf (mit Rechtsklick 'Ziel speichern unter:') verwendet.
Über die Browser-Weiche [if !IE] wird gesteuert, welchen Code die verschiedenen Browser ausführen (vgl. auch den Kommentar im Code).

Für den Internet Explorer hat sich gezeigt, dass er mit .flv-Dateien nicht (mehr?) umgehen kann. Demnächst werde ich die Files in .wmv wandeln und weitere Versuche starten.

3. Eigenproduktion

1. Free FLV Converter (kostenlos)
   Konvertiert divx, xvid, mpeg, dvd, wmv, avi... in FLV Videos (Webseite in en/fr, Programm auch in deutsch). Erstellt auch den HTML-Code!
   Durchsuchen von Videoportalen wie YouTube uva. und Verlinkung sowie Download von Flash-Videos.
2. Riva FLV Encoder (kostenlos)
   Konvertiert AVI-, MPEG-, Quicktime und WMV-Videoclips ins Flash-Format. WMV9 wird nicht unterstützt! Weitere Infos hier»»
   Sehr einfach zu handhaben! Geringe Anzahl unterstützter Formate.
3. MediaCoder (kostenlos)
   Konvertiert von / in viele(n) Formate(n), auch im Batch-Mode.
   Universeller Konverter für Video-Experten!
4. Movavi Video Converter (ab US$30.-)
   Beherrscht auch Handy-Videoformate (u.a. 3GP, 3GP2).

Bei den heute meist zur Verfügung stehenden hohen Bandbreiten für den Internetzugang und dem niedrigen Preis pro GB Speicher bei den Hostern wird es natürlich schnell interessant auch Videos / Filme in die eigene Webseite einzubauen.
Doch längst nicht alle Internet-Surfer haben eine schnelle Internet-Anbindung. Darum sollten Videos eine möglichst niedrige Datenrate und Datenmenge aufweisen und auch nicht automatisch gestartet werden!

Reduzieren Sie bei der Konvertierung des Films auch seine Grösse. In der Regel ist es nicht notwendig ein MPEG-Video in seiner vollen Grösse von 720x576 Bildpunkten ins Web zu streamen. Der Original-Film des in der Einleitung gezeigten Clips von knapp 2 Minuten Dauer wurde erstellt aus einem .mpg-Film mit eine Bitrate von 7.06Mb/s und einer Auflösung von 720x576. Das Original umfasst ca. 100MB. Nach der Reduktion auf 160x120 betrug die Dateigrösse noch immer 5.4 MB! Für viele Internet-Benutzer hart an der Schmerzgrenze. Würde der Flash-Film mit 320x240 erstellt, so wäre die Dateigrösse 4 mal grösser, also rund 20 MB.
Um die Datenmenge weiter zu reduzieren, setzt man die Datenrate herunter. MPEG-Filme haben eine typische Bitrate von mehreren Mb/s. Probieren Sie eine Bitrate von einigen hundert Kilobit. Bei Diashows mit wenigen Szenenwechseln geht man allenfalls tiefer, bei aktionsgeladenen Filmen muss man allenfalls höher gehen, um eine befriedigende Bildqualität zu erzielen. Hier hilft nur probieren und viel Erfahrung.
Zu bedenken ist, dass eine Bitrate von 1 Mb/s bereits einen DSL-Anschluss voraussetzt!

Nachstehend ein Video, das ich vom .mpg-Format ins Flash-Format konvertierte:

Nachdem nun der Flash-Film vorliegt, kann man diesen wie im 2. Beispiel in die Webseite integrieren.
Damit hat man eine gut funktionierende Lösung zur Einbindung von Flash-Videos in Webseiten!

Fortschrittliche Methoden

Die folgenden Abschnitte werden zur Zeit intensiv überarbeitet. Wie bei jeder Umstellung zu befürchten ist, kann es dabei zu Problemen kommen: Mit dem Internet Explorer wird noch nicht alles wie gewünscht dargestellt und ausgeführt! Korrekt funktioniert alles mit Firefox, Opera und Safari.

Wie oben bereits erwähnt, wird das <embed>-Tag nicht von allen Browsern erkannt und es ist gemäss dem HTML-Standard ein missbilligtes Tag und sein Einsatz sollte somit vermieden werden.
Im Internet findet man daher viele unterschiedliche Ansätze, wie man dies umgehen kann und dennoch nur HTML-gebilligte Tags zu verwenden. Eine weitere Schwierigkeit ist, dass es keinen standard Videoplayer gibt, welcher in allen Browser funktioniert. Zudem wird auch ein lizenzfreier Video-Codec für alle Plattformen benötigt. Schlussendlich soll die Lösung noch konform zum kommenden HTML 5 Standard sein.

Bis anhin hatte SWFObjects 1.5 in Verbindung mit dem mediaplayer verwendet. Ersteres wurde durch SWFObject 2.0 ersetzt, was nun der Grund für die Überarbeitung dieses Bereich ist.

Eine mögliche standard-konforme Einbettung von Flash-Videos

ACHTUNG: Das Folgende ist noch in Ausarbeitung und kann also noch Fehler enthalten!

Dieses JavaScript deklariert man im <head>-Bereich der Webseite wie folgt:

	
<script type="text/javascript" src="swfobject.js"></script>

Als nächstes fügt man den nachstehenden HTML-Code in den <body>-Bereich an der gewünschten Stelle der Webseite ein:

		 
<div width="50%" align="center">         
<!-- Objekt für den Internet Explorer -->
  <object id="demo_flv" width="160" height="140" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
    <param value="video.flv" name="movie"/>
    <param value="true" name="allowfullscreen"/>
    <param value="true" name="play"/>
    <param value="false" name="loop"/>
    <param value="bild.jpg" name="image"/>
    <!--[if !IE]>-->
<!-- Objekt für alle andern Browser -->	
      <object width="160" height="140" data="mediaplayer.swf" type="application/x-shockwave-flash">
	    <param value="file=video.flv" name="flashvars"/>
	    <param value="true" name="allowfullscreen"/>
	    <param value="true" name="play"/>
	    <param value="false" name="loop"/>
	    <param value="bild.jpg" name="image"/>
    <!--<![endif]-->
      <p>
        <a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" 
          alt="Get Adobe Flash player" /><br />Zur Anzeige dieses Videos bitte den Adobe Flash Flayer installieren.
        </a>
      </p>
    <!--[if !IE]>-->
      </object>
    <!--<![endif]-->
  </object>		 
</div> 

Das Video-Object ist hier zweimal aufgeführt: Zuerst einmal für den Internet Explorer und danach für alle andern Browser (Firefox, Opera). Für diese wird noch der mediaplayer.swf (mit Rechtsklick 'Ziel speichern unter:') verwendet.
Über die Browser-Weiche [if !IE] wird gesteuert, welchen Code die verschiedenen Browser ausführen (vgl. auch den Kommentar im Code).

Modifizieren Sie die rot markierten Angaben so, dass sie Ihrem Flash-Clip entsprechen.
In diesem Beispiel wird der Flash-Film video.flv abgespielt. Er hat eine Breite von 160px und eine Höhe von 120px plus stets 20px für die Player-Kontrollleiste (=140px). Achten Sie darauf, dass Breite und Höhe je zweimal in obigem Code vorkommen.

Bild wird nicht angezeigt!!!

Soweit ist der Code komplett und funktioniert auch, vorausgesetzt der User hat den Adobe Flash Player installiert. Wenn nicht, wird dieses Codesegment ausgeführt:

<p>
  <a href="http://www.adobe.com/go/getflashplayer">
    <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" 
      alt="Get Adobe Flash player" ><br />
      Zur Anzeige dieses Videos bitte den Adobe Flash Player installieren.
  </a>
</p>

Das dem Betrachter folgenden Hinweis zeigt:

Durch Anklicken des Links kann der Benutzer den Adobe Flash Player sofort installieren ohne die Webseite verlassen zu müssen!

Jetzt muss nur noch alles auf Ihren Webserver geladen werden, im Einzelnen:

Ihre_video_webpage.html
video.flv
bild.jpg
swfobject.js
mediaplayer.swf

Kopieren Sie zum Abschluss die Dateien auf Ihren Webserver. Einem erfolgreichen Test steht nun nichts mehr im Wege.

Weiterführende Literatur:

• SWFObject 1.5 von Geoff Stearns (osolete)
• Players von Jeroen Wijering (obsolete ?)
• swfobject 2.0
• dito deutsch
• Flash W3C konform und suchmaschinen­freundlich einbinden
• Attributbeschreibung