Die HTML 4.01 Spezifikationen, sowie die XHTML 1.0 Spezifikationen sind sich eigentlich recht einig, wie externe Daten und Medien in Webdokumente eingebunden werden sollen. Dazu wurde der Object-Tag eingeführt.

Microsoft hielt sich ausnahmsweise mal an die Empfehlung und übernahm diesen Tag, wenn es um die Einbindung von Flash, Quicktime, usw. geht.

Anders jedoch Netscape. Die Entwickler führten damals den Embed-Tag ein, der zwar im Endeffekt zum selben Ergebnis führt, jedoch leider nicht Teil des Standards ist.

Um dennoch erfolgreich browserübergreifend Flash und andere Daten einzubinden, hat sich eine Mischung aus beiden Methoden im Web durchgesetzt. Das Ganze sieht wiefolgt aus:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<object
  classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
  codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0"
  width="32"
  height="32">
  <param name="movie"></param>
  <embed
    src="FlashDatei.swf"
    quality="high"
    pluginspage="http://www.macromedia.com/go/getflashplayer"
    type="application/x-shockwave-flash"
    width="32"
    height="32">
  </embed>
</object>

Unschwer zu erkennen, was genau gemacht wurde. Die beiden Tags wurden miteinander verschachtelt. Da der Internet Explorer den Embed Tag vollkommen richtig ignoriert, gibt es soweit keine Probleme. Ausser natürlcih mit dem W3C HTML Validator. Er mäkelt den Embed Tag an, da dieser ja im Standard nicht vorhanden ist.

Mit diesem Übel mussten die Entwickler, ob wohl oder übel leben, zumindest wenn sie diese Lösung einsetzten.

Doch Standardkonform ?

Es hat immer wieder verschiedene Ansätze gegeben, Flash einzubinden. Einer der besten Lösungen ist meiner Meinung nach die von Drew McLelland, die er bei Alistapart in dem Artikel FlashSatay veröffentlichte.

Wer weitersucht, wird auch diverse JavaScript Lösungen finden, wie z.B. diese Lösung hier.

JavaScript kann aber auch ausgeschaltet werden, so daß es auch eine reine CSS/(X)HTML Lösung geben muss.

Nur CSS und (X)HTML

Das Problem sind in diesem Fall die Mozilla Browser, also Mozilla, Firefox, usw, sowie Opera.

Microsofts Internet Explorer behandelt den Object Tag wie den Aufruf einer ActiveX Komponente. Das heisst, dass das CLSID Attribut verwendet werden muss.

1
2
3
4
5
6
7

<object
  classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
  width="256"
  height="275"
  codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0">
  <param name="src"></param>
</object>

Das Attribut ist W3C konform, sollte also kein Problem darstellen. Tut es aber leider doch.
Opera und Mozilla verweigern jegliche Anzeige, sobald das Attribut auftaucht. Ohne dieses Attribut funktioniert die Anzeige in Opera und Mozilla, jedoch nicht mehr im Internet Explorer.

Daher müssen also 2 verschiedene Versionen für die Browser zur Verfügung gestellt werden. Die 1. Version mit CLSID für den Internet Explorer und eine Zweite ohne CLSID für Mozilla und Opera.

Wenn es darum geht (X)HTML Code nur für den IE sichtbar zu machen, dann lässt sich dies am Einfachsten mit Microsofts Conditional Comments umsetzen. Diese werden zwar erst seit dem IE 5+/win unterstützt, jedoch kann man den IE4/Win meiner Meinung nach getrost ignorieren.

Eine Lösung mit 2 verschiedenen Object Tags und Conditional Comments würde somit also so aussehen:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<object
  data="flashdatei.swf"
  type="application/x-shockwave-flash"
  height="275"
  width="256">
  <param name="autoplay" value="true"></param>
</object>
<!--[if IE]>
<object
  classid="clsid: D27CDB6E-AE6D-11cf-96B8-444553540000"
  width="256"
  height="275"
  codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0">
  <param name="src" value=""flashdatei.swf">
</object><![endif]-->

Soweit also der HTML Code. Zuerst lesen alle Browser den ersten Object Tags und stellen ihn dar. Mozilla und Opera haben damit kein Problem. Allerdings hat der Internet Explorer unter Windows ein Problem mit der Darstellung, da für das notwendige CLSID Attribut fehlt. Dieses Manko wird ab dem Conditional Comment gelöst. Opera und Mozilla können diese Kommentare nicht lesen und ignorieren auch den darin enthaltenen HTML Anweisungen. Nun muss nur noch die IE-untaugliche Variante für den IE ausgeblendet werden, was mit CSS Boardmitteln kein Problem ist und mittels display:none; erreicht werden kann.

Kombiniert man dieses nun, kommt man zu folgendem Ergebnis … CSS …

1
2
3
4
5
6
7
8
9
10
11
12

<style type="text/css">
  .mozilla {
    display:block;
  }
</style>
<!--[if IE]>
<style type="text/css">
  .mozilla {
    display:none;
  }
</style>
<![endif]-->

… und HTML …

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<object
  data="flashdatei.swf"
  type="application/x-shockwave-flash"
  height="275"
  width="256"
  class="mozilla">
  <param name="autoplay" value="true"></param>
</object>
<!--[if IE]>
<object
  classid="clsid: D27CDB6E-AE6D-11cf-96B8-444553540000"
  width="256"
  height="275"
  codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0">
  <param name="src" value=""flashdatei.swf">
</object>
<![endif]-->

Der Lösungsweg funktioniert auf jeden Fall im Internet Explorer, Mozilla & seinen Derivaten, sowie Opera, alle unter Windows.
Der verwendete Code ist HTML und CSS valide und lässt sich schnell in validen XHTML Code umschreiben. Zudem hat diese Lösung den grossen Vorteil, dass sie problemlos auch für andere Datenformate, wie z.B. Quicktime Movies übertragbar ist. Dazu müssen nur die Werte der Attribute classid und codebase angepasst werden, natürlich auch die Quelle geändert werden.

Pages: 1 2