Object wird verwendet um Dateien wie Audio, Video, Java-Applets, ActiveX, PDF und Flash in Ihre Web-Seiten einzubetten.
object-Element
Seit HTML5 hat das object-Tag einiges an Bedeutung verloren. Für Video- und Audio-Dateien gibt es nun eigene Elemente (video, audio), es sei denn,
sie möchten andere Formate einbetten.
ACHTUNG: object-Tags sind Inline-Elemente!
Folgende Attribute stehen zur Verfügung
Universalattribute
data; Pfad und Dateiname
type: MIME-Typ
width: Breite in Pixel
height: Höhe in Pixel
form: object kann einem Formular zugewiesen werden
Mit dem object-Element steht ihnen auch ein Fallback zur Verfügung. Für das Abspielen von swf-Dateien benötigen die Browser ein Flash-Plugin,
das auch zum Download angeboten wird.
param-Element
Mit dem param-Tag definieren sie Parameter für das object-Element. Parameter werden immer mit einem Namen- Wertpaar geschrieben (z.B <param name="bgcolor" value="#ff0000">).
Dieser Parameter erzeugt eine rote Hintegrundfarbe. Allerdings erkennt nicht jeder Browser alle Parametereinstellungen. Außerdem stehen für unterschiedliche Dateitypen
nicht immer dieselben Parameter zur Verfügung.
Eine swf-Datei mit Object & Param
Im Beispiel werden zwei param-Elemente geschrieben. Einmal mit dem Namen src, welcher nochmal den Dateinamen angibt (für ältere IE). bgcolor definiert die Hintergrundfarbe.
<object width="400" height="300" type="application/x-shockwave-flash" data="shapetween.swf">
<param name="src" value="shapetween.swf">
<param name="bgcolor" value="#ff0000">
<p> Sie benötigen einen Flash-Player als Browser-Plugin:</p>
<p><a href="http://get.adobe.com/de/flashplayer/">Download</a></p>
</object>
HTML & Embed
embed
Ähnlich dem object-Element arbeitet auch das embed-Tag. Embed gibt es schon seit ewigen Zeiten, jedoch erst seit HTML5 gehört es zum Standard.
Ältere Internet-Explorer werden das embed-Tag nicht kennen, darum sollten sie es mit Vorsicht verwenden, denn es steht ihnen kein Fallback und auch kein param-Element zur Verfügung.
embed-Element
Das embed-Tag gehört zu den Inline-Elementen und soll in älterem HTML innerhalb eines Blockelements geschrieben werden. Das embed-Element ist in HTML5 ein Standalone
und braucht kein abschließendes Element.
iframes (Inline-Fames) betten beliebige Inhalte wie Formulare, Bilder, Multimedia, externe Web-Seiten im HTML-Dokument ein.
Die meisten dieser Inhalte kann man auch mit dem object-Tag einbetten, speziell für externe HTML-Dokumente bietet uns das iframe-Element viele weitere Optionen.
iframe-Element
Mit dem Attribut src im öffnenden iframe-Tag schreiben sie die URL der Seite zum Einbetten in ihr HTML-Dokument. Zwischen öffnenden un schließendem iframe-Tag können sie auch noch ein
Fallback für Browser schreiben, die iframe nicht verstehen. Alle modernen Browser sollten laut Spezifikation iframe problemlos darstellen können.
Folgende Attribute stehen zur Verfügung
Universalattribute
src: Pfad und Dateiname bzw. URL
srcdoc: Inhaltsbeschreibung
width: Breite in Pixel
height: Höhe in Pixel
sandbox: Sandbox mit erhöhten Sicherheitsrestriktionen die Änderbar sind
(kein Wert): alle Einschränkungen sind aktiv
allow-forms: ermöglicht Formularabsendung
allow-pointer-lock: ermöglicht Zugriff auf Programmierschnittstellen
allow-popups: erlaubt Popups
allow-same-origin: erlaubt Inhalte die von fremden Webseiten stammen
allow-scripts: erlaubt Scripts
allow-top-navigation: ermöglicht Navigation
seamless: lässt den iframe als Teil der Seite erscheinen???
PS: seamless soll das iframe als Teil des HTML-Dokuments erscheinen lassen. Bei meinen Tests hat das
bei keinem Browser funktioniert. Außerdem wird seamless von W3C und WHATWG als nicht Valide gemeldet! TIPP: Weg damit.
<iframe src="http://www.adiprinz.at" width="400" height="300">
<!--Fallback-->
<p>Ihr Browser kann leider keine iFrames anzeigen. Klicken sie hier:
<a href="http://www.adiprinz.at">EDV mit Adi Prinz</a></p>
</iframe>
Videos & Browser
Um Videos für wirklich alle Browser zur Verfügung zu stellen, muss man schon eine Menge HTML-Code schreiben. Bei meinen Video-Konverter werden zusätzlich noch
Seitenweise JavaScript-Code generiert. Hier gilt die Überlegung, wer ist meine Klientel und wem möchte ich unbedingt ansprechen, oder kann ich auch Fallbacks für
ältere Browser zur Verfügung stellen. Testen sie den folgenden Link um zu Sehen, welche Video-Formate ihr Browser lesen kann. Öffnen sie den Link mit unterschiedlichen
Medien und Browsern:
Im Beispiel versucht der Browser die mp4, webm, bzw. ogg-Datei zu spielen. Wenn das video-Element nicht bekannt ist kommt der Fallback zum object-Element.
Wenn das object-Element nicht bekannt ist kommt der Fallback zum embed-Element.
Sollte das auch nicht funktionieren liefert der Browser eine Fehlermeldung!
<video width="400" height="230" controls>
<source src="Relativitaetstheorie.mp4" type="video/mp4">
<source src="Relativitaetstheorie.ogg" type="video/ogg">
<source src="Relativitaetstheorie.webm" type="video/webm">
<object data="Relativitaetstheorie.swf" width="400" height="230" type="application/x-shockwave-flash">
<embed src="Relativitaetstheorie.swf" width="400" height="230" type="application/x-shockwave-flash">
<p>Ihr Browser kann das Video nicht abspielen!</p>
</object>
</video>
