HTML tag object • Video, Audio, PDF und Bilder auf Webseiten

Das HTML object-Tag setzt Mediendateien – Video, Audio, Bilder, PDF oder SVG-Grafiken – in eine Webseite und stellt die nötigen Informationen zur Verfügung, um das Objekt anzuzeigen oder zu starten. Selbst HTML-Seiten können ein object-Tag eingebettet werden.

Das stellt hohe Anforderungen an die Browser und tatsächlich konnten sich die Browser nie auf eine konsistente Interpretation der Attribute einigen. Für viele der Medien, die per object-Tag in HTML geladen werden sollten, gibt es heute bessere Alternativen. Das video-Tag ist ein gutes Beispiel.

Die Datenquelle des object-Tags ist die URL im data-Attribut. Die Art der Mediendatei wird in das type-Attribut geschrieben (z.B. type="image/png" oder video/mp4).

Das object-Tag ein Inline-Element, erzeugt keinen Zeilenumbruch und muss immer in einem HTML-Block-Element liegen.

object-Tag: HTML-Codesequenz

<object data="zapfen.svg" type="image/svg+xml" width="600" height="300">
               ^                     ^
               |                     |
               |                     +---- Mime-Type der Mediendatei
               |
               +---- Datenquelle, wie src beim img-Tag
</object>

Das funktioniert in allen modernen Browsern – auch mit IE 9

Für Browser, die das Objekt nicht darstellen können, kann ein Text oder ein Bild zwischen dem öffnenden und schließenden object-Tag zur Verfügung gestellt werden. Wird ein Plugin zum Abspielen des Medienobjekts gebraucht, übergibt das codebase-Attribut eine Adresse zum Laden des Plugins.

Um beliebige Medien abzuspielen oder anzuzeigen, gibt es das HTML-Tag param, in dem beliebige Name/Wert-Paare das Medienobjekts steuern. param muss direkt nach dem öffnenden object-Tag stehen.

So bewirkt z.B. name="autoplay" value="true", dass ein Video automatisch startet.

Armes object-Tag

Im Grunde genommen ist das object-Tag ein Allround-Tag für Medien, aber der wirre Browsersupport hat immer abgeschreckt. Da hängen bis heute viele Webdesigner am embed-Tag, das nicht zum HTML/XHTML-Standard gehört, aber in den Zeiten von Netscape 4 besser unterstützt wurde. Dass diese Geschichte längst in die Mottenkiste gehört, hat sich nicht im Web herumgesprochen.

Heute unterstützen alle Browser (einschließlich Internet Explorer 6) das object-Tag mit seiner Parameterliste in param-Tags.

Aber bevor das object-Tag jetzt endlich zum Zuge kommt, wird es bei den prominentesten Aufgaben – Video und Audio – vom video- bzw. audio-Tag aus HTML5 abgelöst.

object-Tag für Videos

Damit Videos auf Webseiten abgespielt werden, ist ein komplizierter Mix aus Containerformat (Dateiformat wie .flv, .ogg oder .mp4) und Codec (Encoder- Decoder, z.B. H.264 oder Ogg Theora) verantwortlich.

Erst in jüngster Zeit können die modernen Browser ein Video-Format im Verbund mit einem Video-Codec ohne Plugin abspielen – allerdings nur mit dem HTML5 video-Tag

Safari und Internet Explorer 9 spielen MP4 mit dem H.264-Codec ab
Firefox und Chrom spielen OGV- und WebM-Video mit dem Theora-Codec ab

Flash-Video mit dem H.264-Codec braucht grundsätzlich ein Plugin.

Nehmen wir einmal an, der Browser kann MP4-Video mit dem H.264-Codec abspielen. In einer idealen Welt würde ein einfaches object-Tag reichen, um ein Video in eine Webseite einzubinden.

<object data="movie.mp4" width="538" height="330" type="video/mp4">
</object>

Das funktioniert in allen modernen Browsern (Firefox, Opera, Safari, Chrome) – außer in Internet Explorer. Internet Explorer braucht das Attribut "classid" im object-Tag.

<object height="330" width="538"
classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab"> 
   <param name="src" value="movie.mp4" /> 
   <param name="autoplay" value="true" />
   <param name="controller" value="true" />
</object>

Wenn das Attribut classid im object-Tag gesetzt ist, zeigt Firefox den Film nicht mehr an. So etwas nennt man »Mutual Exclusion« – gegenseitiger Ausschluss.

Workaround: object-in-object

Damit das Video dennoch mit einem überschaubaren HTML-Code platziert werden kann, behilft man sich mit einer Verschachtelung des object-Tags. Ein zweites object-Tag wird in das erste object-Tag eingebettet, in dem die Attribute für Firefox aufgeführt sind. Wie gesagt: Wir gehen mal davon aus, dass das Quicktime-Plugin für Firefox installiert ist.

<object width="480" height="280" 
        classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" 
        codebase="http://www.apple.com/qtactivex/qtplugin.cab">
   <param name="src" value="Bienchen.mp4" />
   <param name="controller" value="true" />
   <param name="autoplay" value="false" />
      <!--[if !IE]> -->
      <object type="video/quicktime" data="Bienchen.mp4" 
              width="480" height="280">
         <param name="controller" value="true" />
         <param name="autoplay" value="false" />
      </object>
      <![endif]--> 
</object>

Anstelle eines alternativen Inhalts steht das codebase-Attribut im object-Tag. Das Attribut ist die Adresse einer Seite, von der das Quicktime-Plugin herunter geladen werden kann.

Das innere object-Tag liegt in einem Conditional Comments, der verhindert, dass IE das innere object-Tag interpretiert.

Diese Konstruktion funktioniert in Safari, Firefox und allen Versionen von Internet Explorer. Irgendwelche Spielchen mit dem embed-Tag sind überflüssig. Dennoch hat sich embed so festgesetzt (eine Art »Eisen im Spinat« des Webs), dass selbst Adobe und Apple die Parameter für embed angeben …

Ebensogut würde dieser Ansatz ein Flash-Video abspielen – nur die Werte des param-Tags müssten für Flash-Video angepasst werden.

object und video

Statt der Schachtelung würde mit Hilfe des HTML5-video-Tags eine Kombination von Alt und Jung laufen

<!--[if &lt IE9]>
<object height="280" width="480" 
classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" 
codebase="http://www.apple.com/qtactivex/qtplugin.cab"> 
   <param name="src" value="../video/movie.mp4" /> 
</object>
<![endif]-->
 
<video controls width="480" height="280">
   <source src="../video/movie.mp4" type="video/mp4" />
   <source src="../video/movie.ogg" type="video/ogg" />
</video>

Das object-Tag wird vor den moderenen Browsern durch einen Conditional Comment verborgen, das video-Tag wird von älteren Versionen von Internet Explorer ignoriert.

Attribute für object

archive: Komma-getrennte Liste von URLs mit Ressourcen des Objekts (einschließlich der Ressourcen, die durch das classid- und data-Attribut angegeben werden), die in den lokalen Cache des Benutzers geladen werden müssen, bevor das Objekt dargestellt werden kann. Wenn die URLs relativ sind, muss die Basis-URL im codebase-Attribut angegeben werden.
classid: stellt die URL des Objekts zur Verfügung. Wenn die URL relativ ist, muss die Basis-URL im codebase-Attribut zur Verfügung gestellt werden. Wenn dieses Attribut benutzt wird, kann zusätzlich der Programmcodetyp im codetype-Attribut angegeben werden.
codebase: URL einer Seite, von der ein Plugin für die Ausführung und das Abspielen des Medieninhalts geladen werden kann (falls das Plugin noch nicht installiert ist).
codetype: Programmcodetyp (MIME type) des Objekts. Per Vorgabe kann der Browser den Programmcodetyp festlegen. Der Codetype der Daten wird durch das type-Attribut angegeben.
data: die URL der Daten, die zu dem Objekt gehören – z.B. die Speicheradresse eines Bildes, eines Videos oder des Flash-Players. Wenn die URL relativ ist, muss die Basis-URL durch das codebase-Attribut angegeben werden.
declare: ist ein boolescher Wert. Wenn das Attribut vorhanden ist, ist das Objekt nur eine Deklaration und der Browser soll das Objekt nicht laden und ausführen. Wird ein Objekt nur deklariert, aber nicht geladen, kann das Objekt später über eine ID angesprochen und initiiert werden.
height: Höhe des Objekts in Pixeln.
standby: spielt eine Mitteilung ein, während das Objekt geladen wird – eine höfliche Geste bei langsam ladenden Objekten.
tabindex: ganze Zahl, die den Rang innerhalb der Tabulatoraufrufe bei der Navigation mit der Tastatur festlegt.
type: gibt den Datentyp (MIME type) des Objekts an (z.B. application/x-javascript oder application/x-shockwave-flash). Per Vorgabe kann der Browser den Datencodetyp festlegen. Der Codetyp des Programms wird durch das codetype-Attribut angegeben.
usemap: gibt die clientseitige Image Map an.
width: Breite des Objekts in Pixeln.

Globale Attribute und Events

Kernattribute	Ereignisse
class, dir, id, lang, style, title	onclick, ondblclick onkeydown, onkeypress, onkeyup mousedown, mousemove, mouseout, mousedown, mouseup

CSS, HTML UND JAVASCRIPT MIT {STIL}