Recientemente he tenido que desarrollar para Mozilla Hispano un shortcode para WordPress que nos permitiese añadir a los artículos vídeos en formato libre Ogg Theora y que mostrará el vídeo en flash para aquellos navegadores que aún no admitan la etiqueta vídeo de HTML5.
La sintaxis es la siguiente, sólo los atributos ogv y flash son obligatorios:
[open-video poster="/ruta/a/imagen.jpg" ogv="/ruta/al/archivo.ogv" mp4="/ruta/al/archivo.mp4" flash="/ruta/al/flash" width="500" height="350" ]
- poster → Imagen opcional para la vista previa.
- ogv → Ruta al archivo ogv.
- mp4 → Ruta al archivo opcional mp4 para navegadores que admiten video con este formato.
- flash → Ruta al flash.
- width → Ancho, de no definirse usará 640.
- height → Alto, de no definirse usará 510.
Para poderlo usar, debereís añadir al archivo functions.php de vuestro tema de WordPress lo siguiente:
function open_video($atts, $content = null) { extract(shortcode_atts(array( "width" => '', "height" => '', "poster" => '', "ogv" => '', "mp4" => '', "flash" => '' ), $atts)); global $post; /* Tomamos tamaños o si no tomamos valores por defecto */ if (empty($width)) $width = "640"; if (empty($height)) $height = "510"; $salida = "<video"; $salida .= " width=\"" . $width . "\" "; $salida .= " height=\"" . $height . "\" "; if (!empty($poster)) $salida .= "poster=\"" . $poster . "\" "; $salida .= "controls>"; $salida .= "<source src=\"" . $ogv . "\" type=\"video/ogg\" />"; if (!empty($mp4)) $salida .= "<source src=\"" . $mp4 . "\" type=\"video/mp4\" />"; $salida .= "<object width=\"" . $width . "\" height=\"" . $height . "\" type=\"application/x-shockwave-flash\""; $salida .= " data=\"" . $flash . "\">"; $salida .= "<param name=\"movie\" value=\"" . $flash . "\" />"; $salida .= " Necesitas el plugin de Flash para ver este vídeo </object></video>"; $salida .= " <small>Descargar vídeo <a href=\"" . $ogv . "\">en formato libre ogv</a>"; if (!empty($mp4)) $salida .= " o <a href=\"" . $mp4 . "\">en formato mp4</a>."; $salida .= "</small> "; return $salida; } add_shortcode("open-video", "open_video"); |
Hum, lo malo es que no validara como XHTML5 por lo del
Por lo del <video … controls>
Sí, es lo malo de usar elementos HTML5 en documentos que no lo son, pero bueno, siempre puedes cambiar toda tu web para que tenga doctype html5 😛
Ya que estaba utilizando tu hermosa función en mi blog, me di cuenta que tenés un error de tipeo en el ejemplo de uso, ya que la ruta del video en ogv dice «ovg». No es grave, pero por si acaso.
Gracias, corregido 😉
Hola, surfeando por internet encontre esta pagina
http://www.anieto2k.com/2010/01/14/anade-subtitulos-a-tus-videos-con-javascript/
estoy intentando hacer un reproductor con subtitulos, pero lo ideal seria cargarlos dinamicamente, tal y como dice que tu habias hecho.
He buscado el articulo en tu web pero no lo encuentro.
¿ Podrias ayudarme ? ¿ Tienes el articulo para poder lerrlo ?
Muchas gracias por tu tiempo y por tu web,¡ muy educativa !
En el comentario del blog de Anieto2k pongo el enlace:
http://people.mozilla.com/~prouget/demos/srt/index.xhtml
Un saludo.