Stil mit {stil}

Dez 2009

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

object-Tag für Videos

In einer idealen Welt würde ein einfaches object-Tag reichen, um ein Video in eine Webseite einzubinden.

Noch spielen aber nur wenige Browser Videos nativ – ohne Plugin – ab. Die Beispiele hier zeigen das Einbinden von mp4-Videos mit dem object-Tag und funktionieren nur, wenn Quicktime installiert ist.

<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="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="528" height="330" 
classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" 
codebase="http://www.apple.com/qtactivex/qtplugin.cab">
   <param name="src" value="MVI_6361.MOV" />
   <param name="controller" value="true" />
   <param name="autoplay" value="false" />
   <!--[if gte IE 7]> <!-->
      <object  type="video/quicktime" data="MVI_6361.MOV" 
      width="528" height="330" style="background: thistle;">
         <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 IE6/IE7 das innere object-Tag interpretieren und versuchen, das Video anzuzeigen.

Flash-Videos auf HTML-Seiten

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.

<object type="application/x-shockwave-flash"          <--- Mime-Type
   data="player.swf"                                  <--- Flash-Player
   width="420" height="268">                          <--- Größe des Video-Fensters
      <param name="movie" value="player.swf" />       <--- Speicherort des Flash-Players
      <param src="movie" value="player.swf" />
      <param name="flashvars"                         <--- Medien-spezifische Parameter
         value="file=myvideo.flv&stretching=exactfit" />
</object>

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