Insertar reproductor de video mp4 o webm en Blogger

Antes de nada, comenzar diciendo que este es un reproductor de videos en HTML5 / CSS de código abierto (Open Source), se llama Video.js y puede ser modificado y distribuido libremente.


Es compatible con diferentes navegadores, puede modificar sutamaño, ponerse en pantalla completa, añadir subtitulos, control de volumen... sencillo pero funcional y practico 100%



1. Agregar el JavasScript y CSS en la plantilla

Lo primero, antes de crear la entrada donde pondremos el video, editartemos la plantilla del blog.
Para ello iremos a Plantilla - Editar HTML, presiona F3, busca </head> y justo antes pega el siguiente código:

<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet"></link><script src="http://vjs.zencdn.net/c/video.js"></script>

2. Agregar el Reproductor

Cada vez que desees poner un video en tu blog utulizando este repoductor HTML5 debes tener en cuenta algunos aspectos.

• El vídeo debe estar en formato MP4, WebM, u Ogg.
• Es importante, pero no indispensable que tengas una imagen de fondo para el vídeo  esta es la imagen que se muestra cuando aun no comienza la reproducción.

Ahora el codigo del reproductor>:

<video id="video_1" class="video-js vjs-default-skin" controls width="640" height="264" poster="http://video-js.zencoder.com/oceans-clip.jpg" preload="auto" data-setup="{}"> <source src="http://video-js.zencoder.com/oceans-clip.mp4" type="video/mp4"> </video>

El anterior código es el que debes poner en cada entrada que quieras agregar un vídeo, pero ten en cuenta algunas caracteristicas de este codigo:

• Modifica el ancho y la altura del vídeo en width y height.
• En poster va la imagen de fondo del video

Preload tiene tres opciones:

1. preload="auto": Indica que el archivo se cargara automaticamente durante el tiempo de carga de la pagina, es decir se cargara anticipadamente antes de presionar Play.
2. preload="none": Indica que no se realizara ninguna acción de carga anticipada del video
3. preload "metadata": se utiliza para que el navegador cargue por anticipado sólo los elementos de información adicional asociada con el archivo, que no incluyen el sonido.

Por ultimo lo que esta en src es el link del videoes el link del vídeo, que debe estar en MP4 preferiblemente.