20. Mai 2009

Im Web 2.0 und in der Bloggerszene werden in die Seiten eingebundene Videos immer wichtiger. Leider zerschiesst man sich mit dem bedenkenlosen Einfügen des vom Hoster bereitgestellten Codes seinen achtsam valide geschriebenen Dokumentencode mit sofortiger Wirkung. Warum Hoster wie z.B. Youtube oder Vimeo einen solch grottenschlechten Code zu Verfügung stellen - keine Ahnung. Evtl. soll eine Kompatibilität zu so vielen Browsern wie irgend möglich bereitgestellt werden.

Bei mir ist es sozusagen zur Manie geworden, jede Seite die ich besuche zu validieren, ob der geschriebene oder ausgelieferte Code denn auch gültig ist. Bei Seiten mit eingebundenen Videos mache ich das besonders gerne, obwohl ich das Ergebnis zu 98% schon im Voraus weiß. (Invalide)

Daher zeige ich heute mal auf, wie einfach es ist, Videos sogar in einem XHTML 1.0 Strict Dokument valide einzubinden.

Als Beispiel nehme ich ein Video von Youtube zum Thema "Webstandards", ob dieses Video vom Inhalt etwas taugt, - keine Ahnung, habs mir nicht angesehen. Es soll hier nur als Beispiel dienen.

So sieht der von Youtube zu Verfügung gestellte code aus:

<object width="425" height="344">
<param name="movie" value="http://www.youtube.com/v/KnQ-Fqd5nTA&hl=de&fs=1"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/KnQ-Fqd5nTA&hl=de&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed>
</object>

Was beim Validieren einer XHTML Seite geschieht, die diesen Code bedenkenlos integriert, kann auf dieser Beispielseite angeschaut werden.

Wenn wir uns obigen Code anschauen, merken wir relativ schnell das der hauptsächliche Fehler durch das <embed> Element verursacht wird. <embed> ist kein offizielles HTML/XHTML Element, sondern wurde von Netscape entwickelt. Andere Browser griffen dies auf, jedoch schaffte es das Element niemals in die Standards. Ein Dokument, welches dieses Element nutzt, kann also keinen gültigen; validen Code besitzen.

Wie genau muss der Code aussehen, damit die Seite valide wird?

Als erstes schmeißen wir mal dieses komische <embed> komplett aus dem Videocode raus. Die wichtigen Informationen siedeln wir einfach in das object Element um.

Aus dem ursprünglichen src=" des Originalcodes machen wir, nachdem der wichtige Teil ins Object umgezogen ist, ein data=. Jetzt ist es noch ganz wichtig, alle im Youtube Code vorkommenden Ampersands (&) korrekt nach XHTML Spezifikation auszuzeichnen mit &. Das schliessende </param> Tag entfernen wir und kennzeichnen die Params als leeres Tag mit />.

Der nun valide Code muss so aussehen:

<object type="application/x-shockwave-flash" style="width: 425px; height: 344px" data="http://www.youtube.com/v/KnQ-Fqd5nTA&hl=de&fs=1">
<param name="movie" value="http://www.youtube.com/v/KnQ-Fqd5nTA&hl=de&fs=1" />
<param name="allowFullScreen" value="true" /></object>

Hier habe ich das Video valide in diese Seite integriert mit dem von uns geschaffenen validen Code. Wer es sich anschauen mag, bitte.

Prüfen Sie selbst die Gültigkeit des Codes dieser Seite

Update: Seit dem Redesign validiert dieses Dokument als HTML5 und nicht mehr als XHTML 1.0 Strict. Der Videocode validiert jedoch in einer XHTML 1.0 Strict Variante einwandfrei.