Universität zu Köln

ZAIK - Zentrum für Angewandte Informatik

  RRZK - Regionales Rechenzentrum
Suche |  A-Z |  Sitemap |  FAQ |  Kontakt |  PDA-Version |  Druckversion |  Glossar |  English   |  Impressum 
 
    
Sie sind hier: Uni Köln > RRZK > Multimedia > Dokumentation > Streaming: Video und Audio im Internet

Streaming: Video und Audio im Internet

5. Player einbinden in eine Webseite

Vorweg: Die hier aufgeführten Beispiele sind für den Real Player geschrieben worden, da dieser für die meisten Betriebsysteme erhältlich ist. Bei Verwendung mit anderen Playern, z.B. mit dem Windows Media Player, kann der Quellcode sich ändern, da sie unterschiedliche Anforderungen an das <OBJECT> bzw. <EMBED> Tag stellen. Eine einführende Dokumentation bieten die SDK's der Encoder bzw. Player des jeweiligen Anbieters oder dessen Supportdatenbank bzw. Hilfe Seiten. Links hierzu finden Sie im Literaturverzeichnis.
Auch eine entsprechende Dokumentation des RRZK's ist geplant.

Achtung: Die meisten Hersteller beziehen sich bei der Beschreibung des <OBJECT> Tags nur auf die ActiveX Kontrollen. Über die Einbindung des Players mit dem MIME-Type wird nur in Bezug auf das <EMBED> Tag hingewiesen. Dies hat sich leider durch die Einführung eigener Standards, wie z.B. das <EMBED> Tag, welches von Netscape stammt, oder ActiveX von Microsoft, im Browserkampf so eingebürgert.

Sie benötigen also den Real One Player, welchen Sie hier herunterladen können, um sich die Beispiele anschauen zu können.

Es gibt 3 Möglichkeiten einen Stream über eine Webseite aufzurufen: Das einfache Einbinden per Link, das Einbetten per <OBJECT> Tag, welches am häufigsten verwendet wird, oder das Einbetten per <EMBED> Tag, wovon Netscape Navigator und Opera Gebrauch machen. Am Ende dieses Kapitels ist eine Möglichkeit aufgeführt <OBJECT> und <EMBED> Tag miteinander zu verknüpfen.


5.1 Einbinden per Link

Die einfachste Methode eine Multimedia Datei in eine Webseite einzubinden, die bereits im vorangegangenen Kapitel gezeigt wurde, ist ein gewöhnlicher Link. Obwohl einfach, ist dies nicht sehr elegant, da sich der Player separat in einem Fenster öffnet.
Anmerkung: Laut Konvention sollten Tags klein geschrieben werden, zur Verdeutlichung sind sie hier aber in GROSSBUCHSTABEN gehalten.

	
   Syntax:
	 
   <A HREF="URL">Link</A>

Erläuterung:

  • HREF="URL" - Die URL über die der Clip angesprochen werden kann.

Beispiele mit einer WindowsMedia Datei

	
    <A HREF="http://ZAIK-WM.RRZ.UNI-KOELN.DE/rrzk/streaming/dokumentation/kleinesvideo.wmv">
          Mit einer WindowsMedia Datei</A>

und einer Realmedia Datei

    <A HREF="rtsp://zaik-rm.rrz.uni-koeln.de/rrzk/streaming/dokumentation/kleinesvideo.rm">
          Realmedia Datei</A>

Top

5.2 Einbinden per <OBJECT> Tag

Die Alternative zum Link ist das <OBJECT> Tag, mit dem jede Datei oder Datenquelle, die sich außerhalb der HTML Datei befindet, in eine Seite eingebunden werden kann. Dazu gehört auch ein Media Player. Das <OBJECT> Tag bettet den Player und seine Steuerelemente direkt in die Seite ein und kann von dort aus gesteuert werden. Das Tag kann in 2 Varianten eingesetzt werden: Mit Angabe des MIME-Types oder der ClassID. Die Angabe des MIME-Types ist W3C Standard wird aber nicht vom Internet Explorer interpretiert.
Je nach Player sind unterschiedliche Angaben erforderlich, die genauen Anforderungen können Sie beim Hersteller finden (siehe Literatur).

5.2.1 MIME-Type

Die <PARAM> Tags geben Möglichkeiten zur Parameterübergabe, wobei der Aufbau immer das Muster NAME="Parameter Name" VALUE="Parameter Inhalt" hat.
Die MIME-Types der wichtigsten Player (Plug-Ins):

Real Player audio/x-pn-realaudio-plugin
Windows Media Player video/x-ms-wmv
Quicktime video/quicktime
   OBJECT Syntax I:

   <OBJECT DATA="URL" TYPE="MIME-Type" WIDTH="Breite" HEIGTH="Höhe">
          Alternativer Inhalt
   </OBJECT>

Erläuterung:

  • TYPE="mime-type" - Die genaue Angabe des MIME-Types
  • DATA="URL" - Die URL über die der Clip angesprochen werden kann.
  • WIDTH="Breite" - Die Breite des gesamten eingebundenen Objektes inklusive Steuerelementen.
  • HEIGTH="Höhe" - Die Höhe des gesamten eingebundenen Objektes inklusive Steuerelementen.
    • Alternativer Inhalt - Hier können weitere Tags stehen, falls das <OBJECT> Tag vom Browser nicht interpretiert wird.

Hier ein Beispiel für die Verwendung des MIME-Types mit dem Real Player:

Einbinden des Real Players per MIME-Type.
Wenn Sie diesen Text sehen, kann Ihr Browser das <OBJECT> Tag mit MIME-Type nicht richtig darstellen oder versteht das <OBJECT> Tag nicht. 

  Syntax des Beispieles:

   <OBJECT TYPE="audio/x-pn-realaudio-plugin" DATA="playerinfo/kleinesvideo.rpm"
   CONTROLS="ImageWindow,ControlPanel,StatusBar" HEIGTH="228" WIDTH="236">
     <b>Einbinden des Real Players per MIME-Type. Wenn Sie diesen Text sehen,
        kann Ihr Browser das <OBJECT> Tag mit MIME-Type nicht richtig darstellen
        oder versteht das <OBJECT> Tag nicht.</b>
   </OBJECT>

Erläuterung:

  • TYPE="audio/x-pn-realaudio-plugin" - Der MIME Type für das Real Media Player Plug-In.
  • DATA="playerinfo/kleinesvideo.rpm" - Die URL über die der Clip angesprochen werden kann.
  • CONTROLS="ImageWindow,ControlPanel,StatusBar" - Angabe von Steuerelementen für den Realplayer. Dieses Attribut ist nur für den Real Player möglich. Andere Player nutzen andere Möglichkeiten.
  • WIDTH="Breite" - Die Breite des gesamten Real Players inklusive Steuerelementen.
  • HEIGTH="Höhe" - Die Höhe des gesamten Real Players inklusive Steuerelementen.
    • <b>Einbinden des Real Players ...</b> - Alternativer Text, der angezeigt werden soll, wenn das <OBJECT> Tag nicht dargestellt werden kann.

5.2.2 ActiveX

Eine andere Möglichkeit der Einbettung von Playern funktioniert über die ActiveX Programmierschnittstelle von Microsoft. ActiveX ist kein W3C Standard und wird daher nicht von allen Browsern und Betriebsystemen unterstützt, trotzdem soll diese Option hier vorgestellt werden, da sie häufig verwendet wird. Im Zweifelsfalle sollten Sie die OBJECT Syntax I nutzen.

Um einen Player mit ActiveX einzubinden gibt man die ClassID an, welche ein bestimmtes ActiveX Steuerelement, z.B. einen Player, referenziert.
Die ClassID der wichtigsten Player:

Real Player clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA
Windows Media Player clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95
Quicktime clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B 
   OBJECT Syntax II:

  <OBJECT WIDTH="Breite" HEIGHT="Höhe" CLASSID="CLSID:XXXXXX-XXXX-XXXXXX">
    <PARAM NAME="Name" VALUE="Wert">
  </OBJECT>

Erläuterung:

  • CLASSID="clsid:XXXXXX-XXXX-XXXXXX" - Referenziert ein bestimmtes ActiveX Steuerelement, z.B. einen Player
  • WIDTH="Breite" - Die Breite des eingebundenen Objektes.
  • HEIGTH="Höhe" - Die Höhe des eingebundenen Objektes.
    • PARAM - Dieses Element gibt verschiedene Parameter für das Objekt an.
    • NAME="Name" - Gibt die Bezeichnung des Parameters an. (Zum Beispiel: autostart; src)
    • VALUE="ImageWindow" - Gibt den Wert des Parameters an. (Zum Beispiel: true|false; URL)

Hier ein Beispiel für die Verwendung der ClassID mit dem Real Player:

Einbinden des Real Players per ActiveX.
Wenn Sie diesen Text sehen, kann Ihr Browser das <OBJECT> Tag mit ActiveX nicht richtig darstellen oder versteht das <OBJECT> Tag nicht. 

  Syntax des Beispieles:

  <OBJECT ID=ImageWindow CLASSID="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" HEIGHT=192 WIDTH=236>
     <PARAM NAME="console" VALUE="Clip1">
     <PARAM NAME="src" VALUE="playerinfo/kleinesvideo.rpm">
     <PARAM NAME="controls" VALUE="ImageWindow">
     <b>Einbinden des Real Players per ActiveX. Wenn Sie diesen Text sehen,
        kann Ihr Browser das <OBJECT> Tag mit ActiveX nicht richtig darstellen
        oder versteht das <OBJECT> Tag nicht.</B>
  </OBJECT>

  <OBJECT ID=ControlPanel CLASSID="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA HEIGHT=36 WIDTH=236>
     <PARAM NAME="console" VALUE="Clip1">
     <PARAM NAME="controls" VALUE="ControlPanel">
  </OBJECT>
  <OBJECT ID=InfoPanel CLASSID="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA HEIGHT=55 WIDTH=236>
     <PARAM NAME="console" VALUE="Clip1">
     <PARAM NAME="controls" VALUE="InfoPanel">
  </OBJECT>

Eine Besonderheit des Real Players ist, dass sämtliche Kontrollelemente, wie Fenster, Control Panel etc., je ein eigenes <OBJECT> Tag benötigen. Um die einzelnen <OBJECT> Tags aufeinander zu beziehen wird jeweils ein CONSOLE Parameter definiert, über dessen Wert in VALUE die <OBJECT> Tags verbunden sind. In unserem Beispiel sind 3 dieser Tags miteinander verbunden: das ImageWindow, in welchem der Clip abgespielt wird, das ControlPanel, das die wichtigsten Steuerelemente anzeigt, und das InfoPanel, das Informationen über den Clip gibt.

  • 1. <OBJECT> Tag
    • ID=ImageWindow - Name des ersten <OBJECT> Tags
    • CLASSID="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" - ClassID des Real Players
    • HEIGHT=192 WIDTH=236 - Höhe und Breite des Objektes, die Breite ist bei allen dreien gleich, damit sie optisch zueinanderpassen.
    • PARAM Werte:
      • NAME="console" VALUE="Clip1" - Der Parameter, der die einzelnen <OBJECT> Tags verbindet, er ist daher bei allen gleich.
      • NAME="src" VALUE="playerinfo/kleinesvideo.rpm" - Die URL über die der Clip angesprochen werden kann.
      • NAME="controls" VALUE="ImageWindow" - Gibt an, daß ein Videofenster angezeigt werden soll.
      • <b>Einbinden des Real Players ...</b> - Alternativer Text, der angezeigt werden soll, wenn das <OBJECT> Tag nicht dargestellt werden kann.
  • 2. <OBJECT> Tag
    • ID=ControlPanel - Name des zweiten <OBJECT> Tags
    • CLASSID="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" - (wieder) die ClassID des Real Players
    • HEIGHT=36 WIDTH=236 - Höhe und Breite des Objects, die Breite ist bei allen dreien gleich, damit sie optisch zueinanderpassen.
    • PARAM Werte:
      • NAME="console" VALUE="Clip1" - Der Parameter, der die einzelnen <OBJECT> Tags verbindet, er ist daher bei allen gleich.
      • NAME="controls" VALUE="ControlPanel" - Gibt an, daß ein Panel mit den wichtigsten Steuerfunktionen angezeigt werden soll.
  • 3. <OBJECT> Tag
    • ID=InfoPanel - Name des dritten <OBJECT> Tags
    • CLASSID="clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" - (immer noch) die ClassID des Real Players
    • HEIGHT=55 WIDTH=236 - Höhe und Breite des Objects, die Breite ist bei allen dreien gleich, damit sie optisch zueinanderpassen.
    • PARAM Werte:
      • NAME="console" VALUE="Clip1" - Der Parameter, der die einzelnen <OBJECT> Tags verbindet, er ist daher bei allen gleich.
      • NAME="controls" VALUE="InfoPanel" - Gibt an, daß eine Leiste mit Informationen über den Clip angezeigt werden soll.

Top

5.3 Einbinden per <EMBED> Tag

Als dritte Möglichkeit ein Video einzubinden, ist das <EMBED> Tag, welches von Netscape für den Communicator eingeführt wurde und das auch vom Opera Browser anstelle des <OBJECT> Tags genutzt wird. Dies entspricht aber nicht den W3C Richtlinien. Da sowohl der Netscape Communicator als auch der Opera weit verbreitet sind, soll daher auch dieses Tag vorgestellt werden. Netscape 6 versteht dieses Tag zwar noch, richtet sich aber vorrangig nach dem <OBJECT> Tag.

   EMBED Syntax:

   <EMBED SRC="URL" TYPE="MIME-Type" WIDTH="Breite" HEIGTH="Höhe">

Erläuterung:

  • SRC="URL" - Die URL über die der Clip angesprochen werden kann.
  • TYPE="MIME-Type" - Angabe des MIME-Types. Diese Attribut ist nicht obligatorisch, erleichtert aber dem Browser die Erkennung des Plug-Ins.
  • WIDTH="Breite" HEIGTH="Höhe" - Legt die Höhe und Breite des <EMBED> Tags fest.

Ein Beispiel für die Verwendung des <EMBED> Tags mit dem Real Player:

   Syntax des Beispieles:

   <EMBED SRC="playerinfo/kleinesvideo.rpm" TYPE="audio/x-pn-realaudio-plugin"
     CONTROLS="ImageWindow,ControlPanel,StatusBar"  width="236" height="228">

Erläuterung:

  • SRC="playerinfo/kleinesvideo.rpm" - Die URL über die der Clip angesprochen werden kann.
  • TYPE="audio/x-pn-realaudio-plugin" - Angabe des MIME-Types. Diese Attribut ist nicht obligatorisch, erleichtert aber dem Browser die Erkennung des Plug-Ins.
  • CONTROLS="ImageWindow,ControlPanel,StatusBar" - Angabe von Steuerelementen für den Realplayer. Dieses Attribut ist nur für den Real Player möglich. Andere Player nutzen andere Möglichkeiten.
  • WIDTH="236" - Die Breite des gesamten Real Players inklusive Steuerelementen.
  • HEIGTH="228" - Die Höhe des gesamten Real Players inklusive Steuerelementen.

Top

5.4 Verknüpfung von <OBJECT> Tags und <EMBED> Tag

Durch die Verwendung dieser drei unterschiedlichen Methoden kann es zu Problemen bei der Darstellung der Seite mit den verschiedenen Browsern kommen. Das <OBJECT> Tag bietet die Möglichkeit, zwischen einleitendem und abschliessendem Tag weiteren HTML Code einzufügen, der nur dann interpretiert wird, wenn das <OBJECT> Tag nicht angezeigt werden kann. Hier kann also auch ein weiteres <OBJECT> Tag oder ein <EMBED> Tag stehen. Eine Ausnahme von dieser Regel ist der Internet Explorer, der auch <OBJECT> Tags in einem <OBJECT> Tag darzustellen versucht.

Damit der Player sowohl in Netscape Communicator, Mozilla bzw. Netscape 6, Internet Explorer, als auch in andere Browser eingebunden werden kann, sollte zuerst das <OBJECT> Tag mit den ActiveX Komponeten definiert werden. Darunter steht das <OBJECT> Tag mit dem MIME-Type, in welchem das <EMBED> Tag eingefügt ist. Der Internet Explorer interpretiert das erste <OBJECT> Tag richtig und versucht auch das Zweite darzustellen, findet aber keine ClassID und gibt daher nur Höhe und Breite des Tags als White Space wieder. Andere Browser ignorieren das erste <OBJECT> Tag und stellen entweder das <OBJECT> Tag mit dem MIME-Type oder das <EMBED> Tag dar:

   Syntax:

   <OBJECT CLASSID="CLSID:XXXXXX-XXXX-XXXXXX" WIDTH="Breite" HEIGHT="Höhe">
      <PARAM NAME="Name" VALUE="Wert">
   </OBJECT>
   <OBJECT DATA="URL" TYPE="MIME-Type" WIDTH="Breite" HEIGTH="Höhe">
          <EMBED SRC="URL" TYPE="MIME-Type" WIDTH="Breite" HEIGTH="Höhe">
   </OBJECT>

Erläuterung:

  • OBJECT CLASSID="CLSID:XXXXXX-XXXX-XXXXXX" - Das erste <OBJECT> Tag mit den ActiveX Komponenten. Es wird von Browsern, die kein ActiveX interpretieren, ignoriert.
  • OBJECT TYPE="MIME-Type" - Das zweite <OBJECT> Tag mit dem MIME-Type.
    • EMBED SRC="URL" - Das <EMBED> Tag ist eingebettet im zweiten <OBJECT> Tag.

Ein Beispiel zur Einbettung des Real Players, das für alle gängigen Browser funktionieren sollte:




  Syntax des Beispieles:

  <OBJECT ID="ImageWindow" CLASSID="CLSID:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA"
   HEIGHT="192" WIDTH="236">
    <PARAM NAME="CONSOLE" VALUE="Clip1">
    <PARAM NAME="SRC" VALUE="playerinfo/kleinesvideo.rpm">
    <PARAM NAME="CONTROLS" VALUE="ImageWindow">
  </OBJECT>
  <OBJECT ID="ControlPanel" CLASSID="CLSID:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA"
   HEIGHT="36" WIDTH="236">
    <PARAM NAME="CONSOLE" VALUE="Clip1">
    <PARAM NAME="CONTROLS" VALUE="ControlPanel">
  </OBJECT>
  <OBJECT ID="InfoPanel" CLASSID="CLSID:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA"
   HEIGHT="55" WIDTH="236">
    <PARAM NAME="CONSOLE" VALUE="Clip1">
    <PARAM NAME="CONTROLS" VALUE="InfoPanel">
  </OBJECT>
  <OBJECT TYPE="audio/x-pn-realaudio-plugin" DATA="playerinfo/kleinesvideo.rpm"
   CONTROLS="ImageWindow,ControlPanel,StatusBar" HEIGHT="228" WIDTH="236">
    <EMBED TYPE="audio/x-pn-realaudio-plugin" SRC="playerinfo/kleinesvideo.rpm"
     CONTROLS="ImageWindow,ControlPanel,StatusBar" HEIGHT="228" WIDTH="236">
  </OBJECT>
Erläuterung:
  • OBJECT ... CLASSID="CLSID:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" - Das erste von drei <OBJECT> Tags mit den ActiveX Komponenten und der ClassID des Real Players und ist mit den anderen beiden über den Parameter "CONSOLE" verbunden. Das Tag wird von Browsern, die kein ActiveX interpretieren, ignoriert. Dieses Tag stellt das Video Fenster dar.
  • OBJECT ... CLASSID="CLSID:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" - Das zweite ActiveX <OBJECT> Tag. Es stellt das Panel mit den Kontrollen dar.
  • OBJECT ... CLASSID="CLSID:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA" - Das letzte ActiveX <OBJECT> Tag, welches ein Informationsfenster einbelndet.
  • OBJECT TYPE="MIME-Type" - Das <OBJECT> Tag mit dem MIME-Type. Vom Internet Explorer wird dieses Tag als leere Fläche dargestellt.
    • EMBED SRC="URL" - Das <EMBED> Tag ist eingebettet im zweiten <OBJECT> Tag.

Top

Kommentar abgeben

©ZAIK/RRZK -
Kontakt: videoadmin@rrz.uni-koeln.de, Kontaktformular

Letzte Änderungen: 13.04.2004