CSS, HTML und Javascript mit {stil}

HTML object • Video, Audio, PDF und Bilder

HTML object für Video, Audio, SVG, PDF3

HTML object setzt Medien – Bilder, PDF oder SVG-Grafiken – in die HTML-Seite und stellt mit dem param-Tag die Informationen zur Verfügung, um das Objekt anzuzeigen oder zu starten.

Selbst HTML-Seiten können in ein object-Tag eingebettet werden.

Im Grunde genommen ist HTML object ein Allround-Tag für Medien, aber der wirre Browsersupport hat immer abgeschreckt. Viele Webdesigner haben noch lange am embed-Tag gehangen, das nicht zum HTML/XHTML-Standard gehörte. embed wurde erst in HTML5 in den Standard aufgenommen worden.

In der Vergangenheit stellte das HTML object-Tag hohe Anforderungen an die Browser und tatsächlich konnten sich die Browser nie auf eine konsistente Interpretation der Attribute einigen. Für die prominentesten Medien, die per object-Tag in HTML geladen werden sollten, gibt es heute bessere Alternativen: video-Tag und iframe.

Heute unterstützen alle Browser object und zeigen in einem object-Tag Bilder, Grafik, PDF-Dokumente, Java-Applets, Active X und selbst HTML-Seiten an.

HTML object Tag

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 ist ein Inline-Element – object erzeugt keinen Zeilenumbruch.

<object data="spektralfarbkurven.svg" type="image/svg+xml">
               ^                     ^
               |                     |
               |                     +---- 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 object-Tag nicht darstellen können (z.B. Sprachausgabe), wird ein Text oder ein Bild zwischen das öffnende und schließende object-Tag gesetzt.

PDF in object-Tag auf der Seite anzeigen

<object data="img/normalverteilung.pdf" type="application/pdf">
</object>

Attribute für object

HTML5 hat das Attribut-Chaos bereinigt.

data
die URL der Daten, die zu dem Objekt gehören – z.B. der Pfad zur SVG-Grafik, zum Video oder zum Flash-Player.
form (neu in HTML5)
ein oder mehrere Formulare, zu denen das Objekt gehört
height, width
Höhe / Breite des Objekts in Pixeln.
type
gibt den Datentyp (MIME type) des Objekts an (z.B. type="image/svg+xml" oder application/x-shockwave-flash).
usemap
gibt die clientseitige Image Map an.
archive (in HTML5 nicht mehr unterstützt)
Komma-getrennte Liste von URLs mit Ressourcen des Objekts
classid (in HTML5 nicht mehr unterstützt)
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 (in HTML5 nicht mehr unterstützt)
URL einer Seite, von der ein Plugin für die Ausführung und das Abspielen des Medieninhalts geladen werden kann.
codetype (in HTML5 nicht mehr unterstützt)
Programmcodetyp (MIME type) des Objekts. Per Vorgabe kann der Browser den Programmcodetyp festlegen. Der Codetype der Daten wird durch das type-Attribut angegeben.
declare (in HTML5 nicht mehr unterstützt)
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.
standby (in HTML5 nicht mehr unterstützt)
spielt eine Mitteilung ein, während das Objekt geladen wird.

object-Tag für Videos

Seit HTML5 können die modernen Browser ein Video-Format im Verbund mit einem Video-Codec ohne Plugin abspielen – mit dem HTML5 video-Tag. Die Zeit des object-Tags für Video / Audio ist abgelaufen.

In der Zeit vor HTML5 und dem Video-Tag brauchte der Browser ein Plugin zum Abspielen von Videos. Das codebase-Attribut hat darum eine Adresse zum Laden des Plugins übergeben.

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

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

Damit der Browser Video auf Webseiten abspielen kann, ist ein Mix aus Containerformat (Dateiformat wie .flv, .ogg oder .mp4) und Codec (Encoder- Decoder, z.B. H.264 oder Ogg Theora) verantwortlich.

<!--[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="myVideo.mp4" />
   <param name="autoplay" value="true" />
</object>
<![endif]-->
 
<video controls width="480" height="280">
   <source src="myVideo.mp4" type="video/mp4" />
   <source src="myVideo.ogg" type="video/ogg" />
</video>

Das object-Tag wird vor den modernen Browsern durch einen Conditional Comment verborgen. Ältere Versionen von Internet Exlorer ignorieren das video-Tag.

Diese Kombination ist eine Lösung, bis auch IE 8 endgültig aus dem Web verschwindet.

HTML param-Tag

Das param-Tag wird direkt hinter dem öffnenden object-Tag notiert.

HTML param stellt Name/Wert-Paare im object-Tag zur Verfügung, die z.B. das Abspielen von Videos steuern. In einem object-Tag können beliebig viele param-Tags liegen, aber jedes param-Tag enthält nur einen Parameter.

HTML Markup für object- und param-Tag

<object type="">
<param name="flashvars" 
   value="file=Boote.flv&stretching=exactfit&image=Boote.jpg" />
</object>

Die Parameter mitsamt ihrem Namen und dem möglichen Wertebereich werden vom Autor/Entwickler des Objekts festgelegt. flashvars ist z.B. der Name für die Parameter eines Flash-Videos. Welche Werte flashvars annehmen kann, wurde durch den verwendeten Flash-Player entschieden.

Die möglichen Werte für flashvars waren die große Schwachstellen des Flash-Videos – meist werden sie nur unzureichend beschrieben, da die Entwickler der Flash-Player wohl davon ausgehen, dass das Video mit einem eingebetteten Javascript abgespielt wird.

<object type="application/x-shockwave-flash" 
        data="player.swf" width="480" height="270">
    <param name="movie" value="player.swf" />
    <param src="movie" value="/player.swf" />
    <param name="flashvars" 
           value="file=boote.flv&stretching=exactfit&image=Boote.jpg" />
</object>

Damit das Flash-Video in allen Browsern dargestellt wird, muss die URL des Flash-Players sowohl im data-Attribut des <object>-Tags als auch im <param>-Tag vermerkt werden. Die Angabe type="application/x-shockwave-flash" anstelle des classid-Attributs ist ebenfalls für das problemlose Abspielen des Flash-Movies erforderlich.

name
der Namensteil aus dem Name/Wert-Paar. Zusammen mit diesem Namen muss ein Wert präsentiert werden. Der exakte Wert (seine Schreibweise usw.) wird vom Autor des Objekts bestimmt.
type (nicht mehr in HTML5)
gibt den Medien-MIME-Typ des Wertes an, wenn das valuetype-Attribut aufref gesetzt ist.
value
stellt den Wert dar, der für das Name/Wert-Paar gefordert ist. Der Wert dieses Parameters muss angegeben werden.
valuetype (nicht mehr in HTML5)
gibt den Typ des Wertes an. Die drei möglichen Werte sind data, object und ref. Die Vorgabe ist data. ref ist die Quell-URL, die den Wert enthält.