Stil mit {stil}

Mar 2010

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

Das HTML object-Tag fügt Medien – z.B. Bilder, PDF-Dokumente oder Video – in eine Webseite ein und stellt die nötigen Informationen zur Verfügung, um das Objekt anzuzeigen oder zu starten.

Das img-Tag würde damit genauso überflüssig wie das iframe- und das applet-Tag zur Anzeige von Java-Applets (das schon in HTML 4.01 gestrichen wurde). Ab IE8 funktioniert auch das Anzeigen von Bildern durch object in Internet Explorer. In IE6 / IE7 werden noch Scrollleisten angezeigt oder – wenn Breite und Höhes des Bildes nicht angegeben werden – gar nichts.

Die Datenquelle des object-Tags ist die URL im data-Attribut, die Art der Mediendatei wird in das type-Attribut geschrieben (z.B. image/png oder video/mp4). Für Browser, die das Objekt nicht darstellen können, kann ein Text als Meldung zwischen die öffnende und schließende Klammer des Tags gesetzt oder im codebase-Attribut die Adresse einer Seite zum Laden des Plugins übergeben werden.

<object data="kong.jpg" type="image/jpeg" width="150" height="150">
          ^                ^
          |                |
          |                +---- Mime-Type der Mediendatei
          |
          +---- Datenquelle, wie src beim img-Tag
</object>

Das object-Tag ein Inline-Element, das keinen Zeilenumbruch erzeugt und immer innerhalb eines umschließenden Blocks liegen muss – also nicht direkt in body liegen darf.

SVG-Grafik mit dem object-Tag in HTML-Seite einbetten

Das funktioniert in allen modernen Browsern – auch mit IE 9

   <object data="/svg/zapfen.svg" width="600" height="300" type="image/svg+xml">
      Link zu einer alternativen Pixel-Datei
      für Browser, die SVG nicht darstellen
   </object>

object-Tag für Videos

In einer idealen Welt würde ein einfaches object-Tag reichen, um ein Video in eine Webseite einzubinden. Die meisten Browser können mpeg- (mp4) und mov-Video ohne die Installation zusätzlicher Plugins mit einem einfachen object-Tag abspielen. Flash-Videos (flv) können ohne weiteres dargestellt werden, wenn einfach nur ein Flash-Player im Webverzeichnis installiert ist, da das Flash-Plugin bei nahezu allen Internet-Benutzern installiert ist.

Internet Explorer ist auch in Version 8 immer noch ausgeschlossen und braucht zusätzliche Plugins, um Videos darzustellen.

mp4-Video mit dem object-Tag darstellen

<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.

Bemerkung: Damit Chrome und IE9 das Video ohne Plugin abspielen, kann es direkt mit dem HTML5 video-Tag eingesetzt werden.

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

Wenn das Attribut classid im object-Tag gesetzt ist, zeigt Firefox den Film nicht mehr an.

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. Das innere object-Tag ist für Firefox: type="video/quicktime" wird benötigt, damit Firefox den Film anzeigt

<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 innerhalb eines Conditional Comments, der verhindert, dass IE das innere object-Tag interpretiert.

Diese Fassung des object-Tags funktioniert in Safari, in Firefox und in allen Versionen von Internet Explorer, wenn das Quicktime-Plugin installiert ist. Irgendwelche Spielchen mit dem embed-Tag sind vollkommen überflüssig, da seit Jahren kein Browser mehr etwas mit embed anfangen kann. Dennoch hat sich embed so festgesetzt (eine Art Eisen im Spinat des Webs), dass selbst Adobe und Apple die Parameter für embed angeben …

Flash-Videos auf HTML-Seiten

Um Flash-Videos in Internet Explorer abzuspielen, muss auch für IE 8 weiterhin der Flash-Player von Adobe installiert werden.

Flash-Videos im FLV-Format sind ein Industriestandard und gelten als besonders sichere Lösung, wenn Filme im Internet abgespielt werden sollen, denn das Flash-Plugin ist in den meisten Browsern installiert.

Flash-Videos können allerdings nicht direkt abgespielt werden wie z.B. mp4-Videos. Sie brauchen einen Flash-Player in Webverzeichnis des Servers, denn das Format, das in die Webseite eingebunden wird, ist aber nicht Flash, sondern Adobe SWF (Shockwave Flash).

Flash-Player: z.B. FlowPlayer oder flvplayer – benötigt. Florian Plag hat auf www.video-flash.de eine Übersicht über verschiedene Flash-Player für Webseiten (und den lokalen Rechner) zusammengestellt.

Natürlich muss auch hier ein weiteres object-Tag im object-Tag verschachtelt werden, damit auch Firefox das Flash-Video abspielt … siehe oben.

<object type="application/x-shockwave-flash" width="480" height="282"
        classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 
        codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/
                         swflash.cab#version=6,0,40,0">
   <param name="movie" value="player.swf" />
   <param name="flashvars" value="file=Kaefer.flv" />
   <!--[if !IE]> -->
      <object type="application/x-shockwave-flash" data="video/player.swf"
              width="480" height="282">
         <param name="flashvars" value="file=Kaefer.flv" />
      </object>
   <![endif]--> 
</object>

Wenn das Video dennoch nicht abgespielt wird, liegt es fast immer entweder an fehlerhaftem HTML-Code (Hochkommas vergessen) oder an einem nicht unterstützen Codec.

Parameter für Videos: param

Das <param>-Tag innerhalb des OBJECT-Elements übergibt Parameter mit Laufzeitwerten, die für die Ausführung des Objekts erforderlich sind. Das Tag muss direkt nach dem öffnenden object-Tag notiert werden.

<object data="MOVIE.MP4" width="538" height="330" type="video/mp4">
   <param name="autoplay" value="false" />
</object>

Mit dem zusätzlichen param-Tag innerhalb des object-Tags lässt sich die Wiedergabe des Videos über Name/Wert-Paare weitere steuern. Hier verhindert z.B. name="autoplay" value="false", dass das Video automatisch abgespielt wird.

embed-Tag – Weg vom Fenster

Das embed-Tag, das früher für Netscape Navigator 2.0+ und Mozilla-kompatible Browser anstelle des param-Tags in das object-Tag eingesetzt wurde, ist ebenfalls kein HTML-Standard und heute mit modernen Browsern überflüssig.

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.

Attribute und Ereignisse für object

Zum Seitenanfang