{"id":1083,"date":"2011-10-06T17:52:38","date_gmt":"2011-10-06T22:52:38","guid":{"rendered":"http:\/\/www.uv.mx\/personal\/gvera\/?p=1083"},"modified":"2020-10-25T09:41:47","modified_gmt":"2020-10-25T15:41:47","slug":"como-colocar-un-video-en-wordpress-usando-html5","status":"publish","type":"post","link":"https:\/\/www.uv.mx\/personal\/gvera\/2011\/10\/06\/como-colocar-un-video-en-wordpress-usando-html5\/","title":{"rendered":"Como colocar un video en WordPress usando HTML5"},"content":{"rendered":"

\"\"<\/a><\/p>\n

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 \u00f3 Chrome en su \u00faltima versi\u00f3n son opciones ya disponibles.<\/p>\n

WordPress<\/h3>\n

Como ya lo has de saber, WordPress no te permite colocar tags como \u00abobject\u00bb, \u00abiframe\u00bb o \u00abvideo\u00bb 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\u00f3lo puede colocar las siguientes etiquetas:<\/p>\n

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 <\/code><\/p>\n

Fuente: Sitio WordPress Support<\/a><\/p>\n

Soluci\u00f3n<\/h3>\n

Est\u00e1 f\u00e1cil, solo debemos saber donde moverle. Hay soluciones que te dicen que tienes que instalar por fuerza el plugin \u00abTinyMCE Advanced\u00bb<\/a>. No es cierto. Aunque es TinyMCE Advanced es un gran plugin, no est\u00e1 hecho para solo para eso. La soluci\u00f3n est\u00e1 ah\u00ed, frente a ti. Pero primero debes tener un poco de imaginaci\u00f3n e irte por un cafecito para relajarte.<\/p>\n

Todo se basa en un archivito que tienes por ahi en tu carpeta wp-includes que se llama kses.php<\/em>. Si lo abres ahora mismo ya sabr\u00e1s donde est\u00e1 la soluci\u00f3n. Sino, aqu\u00ed paso a paso: 1. Abre tu archivo functions.php y observalo. Mmmm bonito no? 2. Agregat\u00e9 esta funci\u00f3n que se ejecute en el init de tu p\u00e1gina cuando est\u00e9s en la administraci\u00f3n:<\/p>\n

[php]
\nadd_action(‘init’, ‘memo_kses_init’);
\nif ( ! function_exists( ‘memo_kses_init’ ) ):
\n\/**
\n * Kses global for default allowable HTML tags.
\n *
\n * Ahora permite varios html tags para mis usuarios no administradores
\n *
\n *\/
\nfunction memo_kses_init() {
\n\tif (is_admin() ) {
\n\t\tglobal $allowedposttags;
\n\t\t$allowedposttags[‘video’] = array(
\n\t\t\t\t‘audio’ => array (),
\n\t\t\t\t‘preload’ => array (),
\n\t\t\t\t‘height’ => array (),
\n\t\t\t\t‘loop’ => array (),
\n\t\t\t\t‘poster’ => array (),
\n\t\t\t\t‘src’ => array (),
\n\t\t\t\t‘width’ => array (),
\n\t\t\t\t‘controls’ => array (),
\n\t\t\t\t‘autoplay’ => array ()
\n\t\t\t\t);
\n\t\t$allowedposttags[‘source’] = array(
\n\t\t\t\t‘media’ => array (),
\n\t\t\t\t‘src’ => array (),
\n\t\t\t\t‘type’ => array ()
\n\t\t\t\t);
\n\t\t\t\t\/\/Aqu\u00ed puedes agregar m\u00e1s y m\u00e1s tags como iframe, embed y hasta object. Asegurate de saber lo que haces =)<\/p>\n

\t}
\n}
\nendif;
\n[\/php]<\/p>\n

3. Guarda tu archivo functions.php y listo! Ya puedes poner tu video usando est\u00e9 lindo c\u00f3digo:<\/p>\n

[html]
\n\/\/Video en HTML5<\/p>\n

<video preload="preload" controls="controls" autoplay="autoplay" height="240" width="300">
\n <source src="http:\/\/colaboracion.uv.mx\/dgti\/ddiaa\/gvera\/videos\/big_buck_bunny.mp4" \/>
\n <source src="http:\/\/colaboracion.uv.mx\/dgti\/ddiaa\/gvera\/videos\/big_buck_bunny.webm" \/>
\n<\/video><\/p>\n

[\/html]<\/p>\n

A IE9 solo le gusta el mp4. Pero puedes usar tambi\u00e9n ogv \u00f3 webm en chrome y firefox. Por cierto tambi\u00e9n se ve en tu iphone o en tu Windows Phone con IE9.<\/p>\n

Tal como te pongo el ejemplo aqui mismo (recuerda lo de usar navegador compatible):<\/p>\n

El v\u00eddeo es el primer minuto de la pel\u00edcula Big Buck Bunny.
\n(c) copyright 2008, Blender Foundation \/ www.bigbuckbunny.org<\/a><\/p>\n

S\u00f3lo ten cuidado al cambiar a vista HTML en el editor de WordPress pues se cree muy inteligente y te lo echar\u00e1 a perder.<\/p>\n

\"\"<\/a><\/p>\n

Por eso vamos a modificar un poquito el editor TinyMCE.<\/p>\n

Soluci\u00f3n al formateo de TinyMCE<\/h3>\n

Vas a agregar un filtro en tu archivo de funciones. Esto va a deshabilitar el plugin \u00abmedia\u00bb que viene con el editor. No hace nada m\u00e1s que ayudarte a poner archivos de media embebidos. Ya sabes, videos de flash y eso. Aqui puedes leer mas:<\/p>\n

http:\/\/www.tinymce.com\/wiki.php\/Plugin:media<\/a><\/p>\n

Agrega este c\u00f3digo al functions.php de tu tema (\u00f3 tambi\u00e9n puedes hacerte un plugin).<\/p>\n

[php]
\nadd_filter(‘tiny_mce_before_init’, ‘memo_tiny_mce_before_init’);
\nif ( ! function_exists( ‘memo_tiny_mce_before_init’ ) ):
\n\/**
\n *
\n * Deshabilita el plugin ‘media’ del TinyMCE
\n *
\n *\/
\nfunction memo_tiny_mce_before_init( $initArray ) {
\n\t\/\/ Quita el plugin de media
\n\t$initArray[‘plugins’] = str_replace(‘media,’,\u00bb,$initArray[‘plugins’]);
\n\treturn $initArray;
\n}
\n[\/php]<\/p>\n

Y aunque cambies de vista c\u00f3digo a vista HTMl, el editor tinyMCE ya no se meter\u00e1 con tus c\u00f3digos.<\/p>\n

\"\"<\/a><\/p>\n

En esa misma funci\u00f3n puedes tambi\u00e9n modificar los valores iniciales del editor; ya sabes, los botones, el tama\u00f1o, etc. Todo viene del archivo wp-admin\/includes\/post.php<\/em>.
\nEchale una mirada para que empieces a moverle.<\/p>\n

Hemos terminado<\/h3>\n

Poco a poco m\u00e1s y m\u00e1s sitios se actualizan a HTML5. Creo que falta muy poco para que la mayor\u00eda de sitios obliguen <\/del>inviten a sus usuarios a utilizar un navegador compatible con HTML5.<\/p>\n

Gracias a estos sitios amigos en la red que me apuntaron en la direcci\u00f3n correcta:<\/p>\n

Fuente: HTML5 Tag Reference<\/a>
\nFuente: WordPress Quick Tips<\/a>
\nFuente: Documentaci\u00f3n tinyMCE<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

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 \u00f3 Chrome en su \u00faltima versi\u00f3n son opciones ya disponibles. WordPress Como ya lo has de saber, WordPress no te permite colocar tags como \u00abobject\u00bb, \u00abiframe\u00bb…<\/p>\n","protected":false},"author":2,"featured_media":1264,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10,27],"tags":[16,77,78,30],"class_list":["post-1083","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-wordpress-2","tag-diario-2","tag-html-2","tag-html5","tag-videos-2"],"_links":{"self":[{"href":"https:\/\/www.uv.mx\/personal\/gvera\/wp-json\/wp\/v2\/posts\/1083","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.uv.mx\/personal\/gvera\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.uv.mx\/personal\/gvera\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.uv.mx\/personal\/gvera\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.uv.mx\/personal\/gvera\/wp-json\/wp\/v2\/comments?post=1083"}],"version-history":[{"count":2,"href":"https:\/\/www.uv.mx\/personal\/gvera\/wp-json\/wp\/v2\/posts\/1083\/revisions"}],"predecessor-version":[{"id":2138,"href":"https:\/\/www.uv.mx\/personal\/gvera\/wp-json\/wp\/v2\/posts\/1083\/revisions\/2138"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.uv.mx\/personal\/gvera\/wp-json\/wp\/v2\/media\/1264"}],"wp:attachment":[{"href":"https:\/\/www.uv.mx\/personal\/gvera\/wp-json\/wp\/v2\/media?parent=1083"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.uv.mx\/personal\/gvera\/wp-json\/wp\/v2\/categories?post=1083"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.uv.mx\/personal\/gvera\/wp-json\/wp\/v2\/tags?post=1083"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}