HTML object • Video, Audio, PDF und Bilder

HTML object Tag – Video, PDF und SVG einbetten

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

Damit weist das object-Element eine große Ähnlichkeit zum iframe-Element auf, das heute tatsächlich in den meisten Fällen anstelle des objects-Element verwendet wird.

18-12-15 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Allrounder mit chaotischer Vergangenheit

HTML object war als ein Allround-Element für Medien gedacht, die nicht von allen Browsern unterstützt wurden, sondern u.U. erst durch ein spezielles Browser-Plugin abgespielt oder angezeigt werden können. Dazu gehörten in der Vergangenheit z.B. Video im AVI, oder MOV-Format, Flash-Animationen und interaktive 3D-Grafik.

Damit stellte das object-Element 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-Element in HTML geladen wurden, gibt es heute Alternativen: z.B. das video-Element und das canvas-Element.

Für Anwendungen, SVG, HTML, usw. ist das iframe die einfachere Lösung, denn für iframe ist kein zusätzliches type-Attribut erforderlich.

HTML object-Element

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

object ist ein Inline-Element, erzeugt also keinen Zeilenumbruch.

<object data="spektralfarbkurven.svg" type="image/svg+xml">
               ^                     ^
               |                     |
               |                     +---- Mime-Type der Mediendatei
               |
               +---- Datenquelle, wie src beim img-Tag
</object>
Hier wird eine SVG-Grafik angezeigt.

Für Browser, die das object-Element nicht darstellen können (z.B. Sprachausgabe), wird ein Text zwischen das öffnende und schließende object-Tag gesetzt.

PDF mit object einbinden

PDF in object-Element auf der Seite anzeigen

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

Damit ein doppelseitiges PDF in einem HTML object oder iframe auch doppelseitig angezeigt wird, muss es schon doppelseitig angelegt sein (z.B. mit Quark, Adobe InDesign oder mit Word bzw. Apple Pages).

Am Rande: Wenn das PDF in IE11 nicht angezeigt wird, liegt es wahrscheinlich am fehlenden PDF-Reader.

Attribute für object

data
die URL der Daten, die zu dem Objekt gehören – z.B. der Pfad zur SVG-Grafik oder einem PDF-Dokument.
form
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 (nicht mehr unterstützt)
Komma-getrennte Liste von URLs mit Ressourcen des Objekts
classid (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 (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 (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 (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 (nicht mehr unterstützt)
spielt eine Mitteilung ein, während das Objekt geladen wird.

embed

embed ist ebenfalls ein Einstiegspunkt für externe Anwendungen (i.d.R. keine HTML-Anwendung) und interaktiven Inhalt und bettet Inhalte über Plugins ein (z.B. ein Quicktime-Video).

Medien wie Bilder und eingebetteter Inhalt liegen nicht in der Webseite, sondern in separaten Dateien.