El Rincón del Tío Nuke

Open web, 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

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

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