El Rincón del Tío Nuke

Mozilla, software libre, privacidad y más

Vídeo ogv con HTML5 en WordPress

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

  1. 6 diciembre 2009 a las 18:41

    Hum, lo malo es que no validara como XHTML5 por lo del

  2. 6 diciembre 2009 a las 18:42

    Por lo del <video … controls>

  3. 6 diciembre 2009 a las 18:53

    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 😛

  4. 14 febrero 2010 a las 19:13

    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.

  5. 14 febrero 2010 a las 19:51

    Gracias, corregido 😉

  6. Ricardo
    25 marzo 2010 a las 7:41

    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 !

  7. 25 marzo 2010 a las 21:16

    En el comentario del blog de Anieto2k pongo el enlace:

    http://people.mozilla.com/~prouget/demos/srt/index.xhtml

    Un saludo.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.