El Rincón del Tio Nuke » wordpress http://www.nukeador.com Donde todo es posible... Tue, 07 Sep 2010 19:21:36 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Vídeo ogv con HTML5 en WordPress http://www.nukeador.com/06/12/2009/video-ogv-con-html5-en-wordpress/ http://www.nukeador.com/06/12/2009/video-ogv-con-html5-en-wordpress/#comments Sun, 06 Dec 2009 16:33:07 +0000 Nukeador http://www.nukeador.com/?p=354 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");
]]> http://www.nukeador.com/06/12/2009/video-ogv-con-html5-en-wordpress/feed/ 7