dietmar
18. Juli 2009

Valider XHTML-Code für eingebettete Videos von Metacafé, Dailymotion und Yahoo

Ein generell valider XHTML-Code zum Einbetten von Videos in Webseiten und natürlich auch in WordPress-Blogs oder PHPBB-Foren (via BBCode-Variable) ist mit ein paar simplen Zeilen zu realisieren. Warum die Videoportale ihn nicht gleich anbieten, bleibt weiterhin schleierhaft.

<object type="application/x-shockwave-flash"
data="VIDEOVERWEIS-DES-ANBIETERS" width="BREITE" height="HÖHE">
<param name="movie" value="VIDEOVERWEIS-DES-ANBIETERS" />
<param name="VARIABLE" value="WERT" /></object>

Der Code erscheint auf den ersten Blick sehr klein, enthält jedoch alle benötigten Elemente. Gäbe es keinen Internet-Explorer, könnte man ihn sogar noch weiter verkürzen. Weglassen kann man in allen Fällen den Parameter “Flashvars”, sollte er nicht wie bei Yahoo!Videos explizit notwendig sein. Und den Parameter “movie” mit der Wiederholung der Videoquelle benötigt lediglich der Internet Explorer. Für Firefox, Safari, Chrome und Opera z.B. reicht folgender Code vollkommen aus:

<object type="application/x-shockwave-flash"
data="VIDEOVERWEIS-DES-ANBIETERS" width="BREITE" height="HÖHE">
</object>

Doch am IE kommt der Webdesigner leider weiterhin nicht herum. Und auch der Zoom auf Bildschirmgrösse ist ein beliebtes Feature, welches nicht vergessen werden sollte. Nachfolgend daher Beispiele für browserübergreifenden XHTML-validen Einbau der Videos von Metacafé, Dailymotion und Yahoo!Videos, die Grösse des Players kann jeweils entsprechend angepasst werden. Und in allen Beispielen wurde natürlich der Vollbildmodus aktiviert.

Metacafe

invalider Originalcode:

<embed src="http://www.metacafe.com/fplayer/330007/rio_carnival_attires.swf"
width="400" height="345" wmode="transparent" allowFullScreen="true"
allowScriptAccess="always" name="Metacafe_330007"
pluginspage="http://www.macromedia.com/go/getflashplayer"
type="application/x-shockwave-flash"> </embed>

valider Code:

<object type="application/x-shockwave-flash"
data="http://www.metacafe.com/fplayer/330007/rio_carnival_attires.swf"
width="400" height="345"><param name="movie"
value="http://www.metacafe.com/fplayer/330007/rio_carnival_attires.swf" />
<param name="allowFullScreen" value="true" /></object>

Dailymotion

invalider Original-Code:

<div><object width="480" height="341"><param name="movie" value=
"http://www.dailymotion.com/swf/x4ab4l_carnaval-rio-de-janeiro-beijaflor-0_events
&related=1"></param><param name="allowFullScreen" value="true"></param>
<param name="allowScriptAccess" value="always"></param><embed src=
"http://www.dailymotion.com/swf/x4ab4l_carnaval-rio-de-janeiro-beijaflor-0_events
&related=1" type="application/x-shockwave-flash" width="480" height="341"
allowFullScreen="true" allowScriptAccess="always"></embed></object><br /><b><a href=
"http://www.dailymotion.com/video/x4ab4l_carnaval-rio-de-janeiro-beijaflor-0_events">
Carnaval Rio de Janeiro Beija-Flor 04.02.08</a></b><br /><i>Hochgeladen von
<a href="http://www.dailymotion.com/digdigger">digdigger</a>. - </i></div>

valider Code:

<object type="application/x-shockwave-flash" data=
"http://www.dailymotion.com/swf/x4ab4l_carnaval-rio-de-janeiro-beijaflor-0_events"
width="480" height="341"><param name="movie" value=
"http://www.dailymotion.com/swf/x4ab4l_carnaval-rio-de-janeiro-beijaflor-0_events" />
<param name="allowFullScreen" value="true" /></object>

Yahoo

Hier müssen der Link zum Player und die Flash-Variablen getrennt an zwei Stellen eingesetzt werden. Der Embed-Code, der direkt im Player abrufbar ist, funktioniert übrigens nicht. Der Code auf der Yahoo-Seite jedoch schon. Er enthält noch eine notwendige “eID”, die das Video aufruft. Fehlt diese, wird zwar das Titelbild gezeigt, das Video jedoch nicht abgespielt.

invalider Original-Code:

<object width="400" height="255" id="uvp_fop" allowFullScreen="true">
<param name="movie" value="http://d.yimg.com/m/up/fop/embedflv/swf/fop.swf"/>
<param name="flashVars" value="id=v2161593&amp;eID=1301797&amp;lang=us
&amp;enableFullScreen=0&amp;shareEnable=1"/><param name="wmode" value="transparent"/>
<embed height="255" width="400" id="uvp_fop" allowFullScreen="true"
src="http://d.yimg.com/m/up/fop/embedflv/swf/fop.swf"
type="application/x-shockwave-flash"
flashvars="id=v2161593&amp;eID=1301797&amp;lang=us&amp;ympsc=4195329
&amp;enableFullScreen=1&amp;shareEnable=1" /></object>

valider Code:

<object type="application/x-shockwave-flash"
data="http://d.yimg.com/m/up/fop/embedflv/swf/fop.swf" width="400" height="255">
<param name="movie" value="http://d.yimg.com/m/up/fop/embedflv/swf/fop.swf" />
<param name="FlashVars" value="id=v2161593&amp;eID=1301797&amp;enableFullScreen=1" />
<param name="allowFullScreen" value="true" />
</object>

ACHTUNG: Aus Darstellungsgründen wurden bei obigen Codebeispielen Zeilenumbrüche eingefügt. Für die Verwendung in WordPress CMS müssen diese unbedingt wieder entfernt werden (Den Code komplett in eine Zeile schreiben!)