Para ver un video en HTML 5 lo primero que debemos entender es que necesitas un navegador compatible con el nuevo tag o etiqueta HTML de video. IE9, Firefox ó Chrome en su última versión son opciones ya disponibles.
WordPress
Como ya lo has de saber, WordPress no te permite colocar tags como «object», «iframe» o «video» dentro de nuestro editor de texto. Bueno, si tienes el perfil administrator si que lo puedes hacer; pero pensemos en que somos otro perfil como el de Editor. Un usuario con perfil Editor, sólo puede colocar las siguientes etiquetas:
address, a, abbr, acronym, area, article, aside, b, big, blockquote, br, caption, cite, class, code, col, del, details, dd, div, dl, dt, em, figure, figcaption, footer, font, h1, h2, h3, h4, h5, h6, header, hgroup, hr, i, img, ins, kbd, li, map, ol, p, pre, q, s, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, var
Fuente: Sitio WordPress Support
Solución
Está fácil, solo debemos saber donde moverle. Hay soluciones que te dicen que tienes que instalar por fuerza el plugin «TinyMCE Advanced». No es cierto. Aunque es TinyMCE Advanced es un gran plugin, no está hecho para solo para eso. La solución está ahí, frente a ti. Pero primero debes tener un poco de imaginación e irte por un cafecito para relajarte.
Todo se basa en un archivito que tienes por ahi en tu carpeta wp-includes que se llama kses.php. Si lo abres ahora mismo ya sabrás donde está la solución. Sino, aquí paso a paso: 1. Abre tu archivo functions.php y observalo. Mmmm bonito no? 2. Agregaté esta función que se ejecute en el init de tu página cuando estés en la administración:
[php]
add_action(‘init’, ‘memo_kses_init’);
if ( ! function_exists( ‘memo_kses_init’ ) ):
/**
* Kses global for default allowable HTML tags.
*
* Ahora permite varios html tags para mis usuarios no administradores
*
*/
function memo_kses_init() {
if (is_admin() ) {
global $allowedposttags;
$allowedposttags[‘video’] = array(
‘audio’ => array (),
‘preload’ => array (),
‘height’ => array (),
‘loop’ => array (),
‘poster’ => array (),
‘src’ => array (),
‘width’ => array (),
‘controls’ => array (),
‘autoplay’ => array ()
);
$allowedposttags[‘source’] = array(
‘media’ => array (),
‘src’ => array (),
‘type’ => array ()
);
//Aquí puedes agregar más y más tags como iframe, embed y hasta object. Asegurate de saber lo que haces =)
}
}
endif;
[/php]
3. Guarda tu archivo functions.php y listo! Ya puedes poner tu video usando esté lindo código:
[html]
//Video en HTML5
<video preload="preload" controls="controls" autoplay="autoplay" height="240" width="300">
<source src="http://colaboracion.uv.mx/dgti/ddiaa/gvera/videos/big_buck_bunny.mp4" />
<source src="http://colaboracion.uv.mx/dgti/ddiaa/gvera/videos/big_buck_bunny.webm" />
</video>
[/html]
A IE9 solo le gusta el mp4. Pero puedes usar también ogv ó webm en chrome y firefox. Por cierto también se ve en tu iphone o en tu Windows Phone con IE9.
Tal como te pongo el ejemplo aqui mismo (recuerda lo de usar navegador compatible):
El vídeo es el primer minuto de la película Big Buck Bunny.
(c) copyright 2008, Blender Foundation / www.bigbuckbunny.org
Sólo ten cuidado al cambiar a vista HTML en el editor de WordPress pues se cree muy inteligente y te lo echará a perder.
Por eso vamos a modificar un poquito el editor TinyMCE.
Solución al formateo de TinyMCE
Vas a agregar un filtro en tu archivo de funciones. Esto va a deshabilitar el plugin «media» que viene con el editor. No hace nada más que ayudarte a poner archivos de media embebidos. Ya sabes, videos de flash y eso. Aqui puedes leer mas:
http://www.tinymce.com/wiki.php/Plugin:media
Agrega este código al functions.php de tu tema (ó también puedes hacerte un plugin).
[php]
add_filter(‘tiny_mce_before_init’, ‘memo_tiny_mce_before_init’);
if ( ! function_exists( ‘memo_tiny_mce_before_init’ ) ):
/**
*
* Deshabilita el plugin ‘media’ del TinyMCE
*
*/
function memo_tiny_mce_before_init( $initArray ) {
// Quita el plugin de media
$initArray[‘plugins’] = str_replace(‘media,’,»,$initArray[‘plugins’]);
return $initArray;
}
[/php]
Y aunque cambies de vista código a vista HTMl, el editor tinyMCE ya no se meterá con tus códigos.
En esa misma función puedes también modificar los valores iniciales del editor; ya sabes, los botones, el tamaño, etc. Todo viene del archivo wp-admin/includes/post.php.
Echale una mirada para que empieces a moverle.
Hemos terminado
Poco a poco más y más sitios se actualizan a HTML5. Creo que falta muy poco para que la mayoría de sitios obliguen inviten a sus usuarios a utilizar un navegador compatible con HTML5.
Gracias a estos sitios amigos en la red que me apuntaron en la dirección correcta:
Fuente: HTML5 Tag Reference
Fuente: WordPress Quick Tips
Fuente: Documentación tinyMCE