Una forma sencilla de conseguir incrustar vídeos en formato Flash (“.swf”) con un código XHTML que sea válido, según las normas del W3C, es utilizar el script Swfobject.
La documentación de dicho script se encuentra en SWFObject: Javascript Flash Player detection and embed script y hay una buena explicación del mecanismo que hay que emplear en Embedding Flash.
Básicamente, lo único que hay que hacer es convertir el código con la etiqueta “embed” (una etiqueta que no está normalizada y por lo tanto provoca une error de validación) al código javascript correspondiente.
Para utilizar el script swfobject hay que subir el archivo swfomject.js al servidor y codificar lo siguiente:
<script type=”text/javascript” src=”swfobject.js”></script>
<div id=”videoflash”>
Este texto se reemplaza con la película flash.
</div><script type=”text/javascript”>
var so = new SWFObject(“lapelicula.swf”, “mipelicula”, “400″, “200″, “8″, “#336699″);
so.write(“videoflash”);
</script>
lapelicula.swf es el archivo con la película en formato flash y el resto de parámetros corresponden al identificativo (mipelicula), ancho (400), alto(200), versión (8) y color del fondo (#336699). Esto se haría con código “embed” más o menos de la siguiente forma:
<embed
src=”lapelicula.swf”
width=”400″
height=”200″
bgcolor=”#336699″
/>
A continuación, veremos dos ejemplos de esta conversión. Fíjense en que cada parámetro “param name” se convierte en su correspondiente “so.addParam”.
Ejemplo YouTube
Código YouTube:
<object width=”425″ height=”344″><param name=”movie” value=”http://www.youtube.com/v/vpdnoYHMXso&hl=es&fs=1″></param><param name=”allowFullScreen” value=”true”></param><param name=”allowscriptaccess” value=”always”></param><embed src=”http://www.youtube.com/v/vpdnoYHMXso&hl=es&fs=1″ type=”application/x-shockwave-flash” allowscriptaccess=”always” allowfullscreen=”true” width=”425″ height=”344″></embed></object>
Código SWFObject:
<script type=”text/javascript” src=”swfobject.js”></script>
<div id=”videoyoutube”>este texto será reemplazado por la película.</div>
<script type=”text/javascript”>
var so = new SWFObject(‘http://www.youtube.com/v/vpdnoYHMXso&hl=es&fs=1′,’mpl’,’500′,’350′,’9′);
so.addParam(‘movie’,'http://www.youtube.com/v/vpdnoYHMXso&hl=es&fs=1′);
so.addParam(‘allowfullscreen’,'true’);
so. addParam(‘allowScriptAccess’,'always’);
so.write(‘videoyoutube’);
</script>
Ejemplo Screencast.com
Código Screencast:
<object width=”1064″ height=”632″> <param name=”movie” value=”http://content.screencast.com/users/rocamar/folders/Default/media/fa7ffed5-8aca-4186-a9b3-d0f5e85397f7/bootstrap.swf”></param> <param name=”quality” value=”high”></param> <param name=”bgcolor” value=”#FFFFFF”></param> <param name=”flashVars” value=”thumb=http://content.screencast.com/users/rocamar/folders/Default/media/fa7ffed5-8aca-4186-a9b3-d0f5e85397f7/FirstFrame.jpg&containerwidth=1064&containerheight=632&content=http://content.screencast.com/users/rocamar/folders/Default/media/fa7ffed5-8aca-4186-a9b3-d0f5e85397f7/2009-04-21_1103.swf”></param> <param name=”allowFullScreen” value=”true”></param> <param name=”scale” value=”showall”></param> <param name=”allowScriptAccess” value=”always”></param> <param name=”base” value=”http://content.screencast.com/users/rocamar/folders/Default/media/fa7ffed5-8aca-4186-a9b3-d0f5e85397f7/”></param> <embed src=”http://content.screencast.com/users/rocamar/folders/Default/media/fa7ffed5-8aca-4186-a9b3-d0f5e85397f7/bootstrap.swf” quality=”high” bgcolor=”#FFFFFF” width=”1064″ height=”632″ type=”application/x-shockwave-flash” allowScriptAccess=”always” flashVars=”thumb=http://content.screencast.com/users/rocamar/folders/Default/media/fa7ffed5-8aca-4186-a9b3-d0f5e85397f7/FirstFrame.jpg&containerwidth=1064&containerheight=632&content=http://content.screencast.com/users/rocamar/folders/Default/media/fa7ffed5-8aca-4186-a9b3-d0f5e85397f7/2009-04-21_1103.swf” allowFullScreen=”true” base=”http://content.screencast.com/users/rocamar/folders/Default/media/fa7ffed5-8aca-4186-a9b3-d0f5e85397f7/” scale=”showall”></embed> </object>
Código SWFObject:
<script type=”text/javascript” src=”swfobject.js”></script>
<div id=”flashbanner”>texto que se reemplaza por la película.</div>
<script type=”text/javascript”>
var so = new SWFObject(‘http://content.screencast.com/users/rocamar/folders/Default/media/fa7ffed5-8aca-4186-a9b3-d0f5e85397f7/bootstrap.swf’,'mpl’,’500′,’350′,’9′);
so.addParam(‘movie’,'http://content.screencast.com/users/rocamar/folders/Default/media/fa7ffed5-8aca-4186-a9b3-d0f5e85397f7/bootstrap.swf’);
so.addParam(‘flashVars’,'thumb=http://content.screencast.com/users/rocamar/folders/Default/media/fa7ffed5-8aca-4186-a9b3-d0f5e85397f7/FirstFrame.jpg&containerwidth=500&containerheight=350&content=http://content.screencast.com/users/rocamar/folders/Default/media/fa7ffed5-8aca-4186-a9b3-d0f5e85397f7/2009-04-21_1103.swf’);
so.addParam(‘scale’,'showall’);
so.addParam(‘allowfullscreen’,'true’);
so. addParam(‘quality’,'high’);
so. addParam(‘base’,'http://content.screencast.com/users/rocamar/folders/Default/media/fa7ffed5-8aca-4186-a9b3-d0f5e85397f7/”‘);
so. addParam(‘allowScriptAccess’,'always’);
so. addParam(‘bgcolor’,'#FFFFFF’);
so.write(‘flashbanner’);
</script>