6B Logo

Flash in XHTML strict

Ein schönes Beispiel dafür, wie sich eine im Prinzip kleine Übung schnell in etwas Größeres auswächst, boten uns dieser Tage wieder einmal unsere Freunde, die Browserhersteller. Die Aufgabe bestand in der Einbindung von Flash-Filmen in XHTML strict, und zwar dergestalt, dass die Seiten immer noch validieren. Ulrike Häßler hat zu dem Thema vor einiger Zeit einen hilfreichen Artikel geschrieben, der das Procedere erläutert und einen beispielhaften Code zur Verfügung stellt. Der Versuch, damit zu arbeiten, schien auf den ersten Blick erfolgreich, bei näherem Hinsehen zeigten sich aber arge Probleme bei den unterschiedlichen Browsern, deren Systematik erst nach längeren Versuchsreihen genau umrissen war.

Das erwähnte Codebeispiel von Ulrike Häßler sieht ungefähr so aus: 

<div>
<object width="175" height="50"
type="application/x-shockwave-Flash"
data="flashfilm.swf">
<param name="movie" value="flashfilm.swf" />
Alternativer Inhalt
</object>
</div>

Die fraglichen Flash-Objekte (Voraussetzung: Flash ≥ 6) sind samt und sonders identisch aufgebaut. Sie bestehen hauptsächlich aus einer Tonspur mit einer Laufzeit zwischen 1:30 und 2:30. Außerdem wird der Abspielvorgang visualisiert und kann mit Hilfe einer gängigen Steuerungsleiste beeinflusst werden. Die fertigen Filme haben einen Umfang zwischen 1,2 und 2,0 MB, ein Preloader schien uns also unabdingbar. Hier ein Originalbeispiel:

Sie benötigen Flash ab Version 6

Mit dem obigen Code ergibt sich folgendes Szenario:

  • Browser, die auf der Gecko-Engine basieren (z. B. Mozilla und Firefox) laufen fehlerfrei, ebenso der Internet Explorer 5 in der Mac-Version.
  • Internet Explorer 5 und 6 unter Windows lassen bizarrerweise den Preloader weg. Sie zeigen ein schnödes Dateisymbol bis der Film fertig geladen ist, dann wird er fehlerfrei abgespielt.

Machen wir es kurz: Nach längerem Herumprobieren konnten wir den beiden Win-Explorern ihr unstatthaftes Verhalten abgewöhnen, sie benötigen dazu zwingend eine classid, dürfen im Gegenzug aber kein data-Attribut erhalten. Also classid rein, data raus, der Code sieht jetzt so aus: 

<div>
<object width="175" height="50"
type="application/x-shockwave-Flash"
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
<param name="movie" value="flashfilm.swf" />
Alternativer Inhalt
</object>
</div>

Schön und gut, IE-Windows macht damit genau, was er soll. Dummerweise zeigen die Gecko-Browser jetzt gar nichts mehr an, ebenso der IE-Mac. Die verlangen, wie Ulrike Häßler schon erläutert hat, genau anders herum zwingend nach dem data-Attribut und dürfen keinesfalls mit der classid konfrontiert werden, was in der Summe ein System sich gegenseitig ausschließender Bedingungen ergibt.

Die einfachste Lösung ist eine Browserweiche mit PHP, so bekommt jeder Browser, was er am liebsten hätte: 

<?php
// Browserabfrage
$browser = $HTTP_USER_AGENT;

if ((strpos($browser,'MSIE') !== FALSE) && (strpos($browser, 'Win') !== FALSE)) {
   $user_browser = "iewin";
}

if ($user_browser == "iewin") {  
   $classid = " classid=\"clsid:D27CDB6E-AE6D-11cf-96B8-444553540000\"";
   $data = "";
}  else {
   $classid = "";
   $data = " data=\"flashfilm.swf\"";
}

?>

data und classid werden in Variablen geschrieben, die je nach Browser unterschiedlich belegt werden. IE-Windows bekommt eine classid und data bleibt leer, der Rest die umgekehrte Version. Das Markup: 

<div>
<object width="175" height="50"
type="application/x-shockwave-Flash"
<?php echo $data$classid; ?>>
<param name="movie" value="flashfilm.swf" />
Alternativer Inhalt
</object>
</div>

Zentrales Element ist <?php echo $data$classid; ?> mit dem die passenden Attribute wahlweise ausgegeben werden oder leer bleiben. Und schon läuft alles wie geschmiert und die Seiten validieren.

Journal abonnieren