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"); |
7 comments for “Vídeo ogv con HTML5 en WordPress”