Cómo incrustar vídeos Flash con código XHTML válido
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>
abril 24th, 2009 a las 11:45 am
El problema como siempre, reside en las personas que tienen deshabilitado el Javascript.
Una web 100% funcional deberia hacer lo mismo con o sin javascript. Aquí és donde reside la parte fundamental del Javascript no intrusivo.
abril 25th, 2009 a las 4:40 pm
Desde hace ya 6 años vengo desarrollando páginas web. Desde el primer momento, y por razones de los clientes para los que trabajo, desarrollo webs accesibles y que cumplan los estándares del W3C. Igual de Marc opino que el uso de javascript es un error y por lo tanto os dejo el código de YouTube adaptado para que valide XHTML 1.0 tanto transitional como strict.
Funciona en todos los navegadores que tengan intérprete de flash. Luego quedaría la opción de ponerle una imagen alternativa para cuando el cliente no tiene flash.
abril 25th, 2009 a las 5:40 pm
El problema no es YouTube, el problema son todos los servicios que utilizan flash, como Screencast.com, etc. Gracias por el aporte, aunque ya teníamos incluso un plugin en Blogpocket llamado Star Trek (buscalo en los archivos). El usar javascript era solo un ejercicio pero muchísimas gracias de todas formas.