Cómo incrustar vídeos Flash con código XHTML válido

Por Antonio Cambronero 24.04.2009 en Herramientas, YouTube, tips

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>

Posts relacionados

• Nueva versión del plugin Contact-form
• Cómo mostrar tu blogroll en Tumblr
• Cómo abrir los puertos de un viejo 3com
• Parche para resolver los problemas de planificación en Wordpress 2.9
• Cómo bloguear desde Facebook
• Cómo aplicar distintos colores a los comentarios (actualizado)
• Post en ABC.es: Cómo aumentar el tráfico de tu blog
• Cómo insertar el código de Google Analytics sin editar el theme
• Cómo ampliar la seguridad de tu blog
• Wordpress: Los últimos posts de cada categoría