Jun 282012
 
Artículo WordPress

En este artículo vamos a exponer los distintos procedimientos que podemos emplear para incorporar un vídeo o audio a una página web en general, y a un artículo de un blog de wordpress en particular. Durante la exposición, intentaremos explicar los conceptos que intervienen y las consideraciones que hay que tener en cuenta para llevar a cabo esta tarea.

Caso 1. Añadir un vídeo de YouTube a un artículo de WordPress.

Supongamos que estamos viendo en nuestro navegador web un vídeo de Youtube que nos gustaría incluir en uno de nuestros artículos.
En la barra de direcciones del navegador aparece la url:

http://www.youtube.com/watch?v=aC8CxfJHTLk&feature=related

Para incluir el vídeo en un artículo de nuestro blog, basta con copiar dicha url, y pegarla como una nueva línea del artículo (ni siquiera es necesario definir un enlace):

WordPress reconoce automáticamente la url, y genera el código HTML necesario para visualizar el vídeo en nuestro artículo, cambiando la escala para ajustar la anchura del vídeo a nuesta página:

Si queremos tener un poco más de control, podemos utilizar el “shortcode” embed, con el que podemos especificar la anchura y altura con la que queremos que aparezca el vídeo:

[embed width=”300″ height=”200″]…[/embed]


Los valores de width y height que especificamos son valores máximos.

En nuestro ejemplo, si examinamos el código html que genera wordpress, vemos que el vídeo se incluye en un iframe con dimensiones (267, 200), ya que en este caso el límite lo impone la altura máxima de 200 pixels:

<iframe width="267" height="200" 
        src="http://www.youtube.com/embed/aC8CxfJHTLk?fs=1&feature=oembed" 
        frameborder="0" allowfullscreen>
</iframe>

Caso 2. Añadir un vídeo que se encuentra almacenado en nuestro servidor

El caso que hemos comentado anteriormente es el más sencillo, pero depende de unos datos que se encuentran almacenados en otro servidor, y que podrian dejar de estar disponibles sin previo aviso.

También puede darse el caso de que nosotros hayamos generado directamente contenido multimedia (video o audio), y queramos servirlo directamente desde nuestro servidor.

En este caso podemos hacer uso de un plugin. Hay numerosos plugins disponibles para esta tarea. Nosotros vamos a utilizar para este artículo el plugin “JW Player for WordPress”

Una vez instalado el plugin, colocamos el siguiente shortcode en nuestro artículo:

[jwplayer file=http://blog.openalfa.com/myvideo.flv] (vídeo en formato flash)

y obtenemos el siguiente resultado:

[jwplayer file=http://blog.openalfa.com/myvideo.flv image=http://blog.openalfa.com/wp-content/uploads/2012/06/video-chino-preview.png]

Y especificando un vídeo en formato mp4:
[jwplayer file=http://blog.openalfa.com/oceans-clip.mp4]

[jwplayer file=http://blog.openalfa.com/oceans-clip.mp4 image=http://blog.openalfa.com/wp-content/uploads/2012/06/video-chino-preview.png]

Insertando video en HTML5, con soporte flash para navegadores antiguos

Como hemos visto, JW Player permite especificar un fichero mp4 para ser utilizado por un navegador con soporte para HTML5.

Pero actualmente, el soporte de HTML5 que ofrecen los distintos navegadores (IE9, Firefox, Chrome, Safari, etc.) es muy variable (ver http://en.wikipedia.org/wiki/Open_videohttp://www.w3schools.com/html5/html5_video.asphttp://html5video.org/wiki/HTML5_Player_Comparison).

En particular, no es suficiente con que el vídeo esté en formato mp4, sino que además hay que asegurarse de que los codecs de video y audio que utiliza están soportados por el navegador. La siguiente tabla muestra el soporte a los distintos tipos de codecs de video (ogg, h.264 y webm) que ofrecen los principales navegadores en 2012

 

Browser Video format
Ogg Theora H.264 WebM / VP8
Firefox Soportado será soportado Soportado
Chrome Soportado Puede ser retirado Soportado
Opera Soportado No soportado Soportado
IE 7/8 no soporta el tag <video> no soporta el tag <video> no soporta el tag <video>
IE 9 No soportado Soportado Soportado
(instalando el codec webm para IE9)
Safari No soportado Soportado No soportado

 

La manera de solucionar este problema en html5 es especificar varios ficheros en distintos formatos dentro de un mismo tag “<video>”. El navegador utilizará el primero de ellos que sepa procesar. Pero el shortcode jwplayer no permite especificar distintos ficheros.

Sin necesidad de utilizar un plugin, podemos incluir directamente en el artículo del blog (o en cualquier página web, sea o no de wordpress) el tag <video> de HTML5, como en el siguiente ejemplo:

        <video width="320" height="240" controls="controls">
          <source src="oceans-clip.mp4" type="video/mp4" />
          <source src="oceans-clip.webm" type="video/webm" />
          <source src="oceans-clip.ogv" type="video/ogg" />
              Tu navegador no admite videos en HTML5
        </video>

El problema con este método es que los navegadores antiguos sin soporte para HTML5 no podrán visualizar el vídeo. La solución en este caso es utilizar una vez más un plugin como “VideoJS player for WordPress”, y asignado una clase css al tag <video>. Este plugin carga una librería javascript que determina si el navegador tiene soporte HTML5. si no es así, carga un reproductor flash que es capaz de entender el formato mp4 del vídeo. Instalamos el plugin, y añadimos al tag <video> los atributos id=”testvideo” class=”video-js vjs-default-skin”:

        <video id="testvideo" class="video-js vjs-default-skin" 
                width="600" height="250" controls="controls">
          <source src="/oceans-clip.mp4" type="video/mp4" />
          <source src="/oceans-clip.webm" type="video/webm" />
          <source src="/oceans-clip.ogv" type="video/ogg" />
        </video>

Y obtenemos el siguiente resultado:

Cómo convertir un vídeo a un formato admitido por HTML5

Para incorporar un vídeo a nuestra página web debemos convertir el formato original a los formatos mp4, webm y ogg.

Existen numerosos editores de vídeo open source o comerciales que permiten realizar esta operación. En particular, para este artículo hemos utilizado “Any Video Converter”.

Esta herramienta gratuita es sencilla de utilizar y permite seleccionar directamente como formato de salida los tres tipos de formato de video HTML5

Any Video Converter para generar videos HTML5

 Publicado por en 7:44 pm

 Deja un comentario

(requerido)

(requerido)