Insertar vídeos HTML5 en Blogger

Existen distintas formas de incluir vídeos en Blogger, ya sea por subida, usando Youtube, JWPlayer, etc.

Como HTML5 ya está practicamente en la mayoría de los navegadores web actuales, es posible insertar esta clase de vídeos fácilmente con la etiqueta </video> que sin duda es mucho más sencillo que usar un plugin u otra clase de embed.

El resultado del tutorial será muy similar a este (Los controles varían según navegador):

Tutorial:

Para hacer un embed básico de un vídeo podemos hacerlo con el siguiente código:

<video controls="controls" height="230" src="URL-VIDEO" width="520">
<span style="background: red; color: white;">Advertencia: Tu navegador no soporta HTML5, por favor actualízalo para ver el vídeo de este blog.</span>
</video>

Explicación:

• controls: Al definirlo se muestran los controles de navegación.
• height: Corresponde al alto del vídeo.
• width: Corresponde al ancho del vídeo.
• src: En esta línea deberás especificar la URL del vídeo.

El código resaltado en color es opcional, lo agregué para que los usuarios que no tienen un navegador compatible puedan ver un mensaje y así tengan que usar otro navegador o bien puedan actualizar el actual.

Otros atributos que puedes usar:

• autoplay: Define si quieres que se reproduzca automáticamente el vídeo, tienes que establecerlo en autoplay (autoplay="autoplay").
• loop: Permite que el vídeo se reproduzca nuevamente al finalizar, establecer en loop (loop="loop").
• muted: Desactiva la salida de audio del vídeo, establecer como muted (muted="muted").
• poster: Permite asignar una imagen como vista previa del vídeo, establécelo como una imagen (poster="URL-IMAGEN-PREVIA").
• preload: Con esto hacemos que el vídeo precargue sin necesidad de intervención, establecer en auto, metadata o none.

De momento la etiqueta </video> no tiene un botón para pantalla completa, pero algunos navegadores muestran una opción para ver el vídeo en pantalla completa al presionar botón secundario en el vídeo.

Extra:

Si quieres usar un reproductor HTML5 que sí tenga esta característica puedes optar por VideoJS, otro reproductor HTML5 100% personalizable con CSS y además es muy fácil de implementar.