Blogger Recursos

Con la llegada de HTML5 el soporte para vídeo es completamente sencillo, los navegadores modernos ya soportan la etiqueta <video>. Todo lo que tienes que hacer es convertir tus vídeos en algún formato compatibles con HTML5 y añadir una interfaz al usuario con los elementos para el vídeo.



Esta es una pequeña guía para proporcionar soporte para vídeo HTML5 a tu sitio, solo sigue los paso:

Primero necesitas añadir soporte para codec Theora a tu PC:





Segundo, necesitas un convertidor de vídeos a Ogg Theora, puedes descargar uno gratuito aquí:





Tercero, necesitas un vídeo reproductor compatible con vídeo HTML5, actualmente existen varios reproductores compatibles estos son algunos de ellos : JW Player, Kaltura, OSM Player, SublimeVideo.


Cuarto, ya aquí vamos a encender el uso del reproductor en el sitio, en este caso usaremos JW Player:

JW Player utiliza la librería jQuery, aqui que tenemos que asegurarnos de tener soporte para esta librería en el head del template que este utilizando, verifica que tengas la siguiente linea de no tenerla la añades:



abajo de la anterior añadimos la dirección del reproductor (asegúrate de colocar la dirección correcta):



abajo de la linea anterior añadimos el llamado para navegadores que no compatibles:



Quinto, usar el código del vídeo con HTML5 en el contenido:



Bien, este fue código predeterminado pero puede usar varias formar, por ejemplo existen navegadores que reproducen .ogg asi que puedes usar un llamado a otro formato como .mp4 si el navegador no soporta .ogg:



Otras que debes saber ejemplo el uso del tipo de archivo, por ejemplo si usas una extensión .ogv puedes reproducirla con el type="video/ogg", .ogg con type="video/ogg", .mp4 con type="video/mp4", .webm con type="video/webm", ejemplo:


Nota: esto solo e sun ejmplo, no necesitas colocar todos solo muestro la referencia del tipo de vídeo.

Estas son las referencias usadas en JW Player con vídeo HTML5:

• poster = Imagen opcional para la vista previa.

• type = Referente al tipo de archivo usado ejemplo ogv, mp4, ogg, webm, etc.

• width = Ancho del reproductor.

• height = Alto del reproductor.