La etiqueta <video> pretende sustituir el uso de codecs de terceros como Flash de Adobe para facilitar la incrustación de vídeo en la web. Aparte de los conflictos surgidos por la guerra de formatos, actualmente es bastante fácil colocar un vídeo con HTML5 en nuestra página.
La cuestión está en ¿para qué incrustarlo como parte del contenido? es cierto, para eso ya está Vimeo y Youtube, así que la aplicación más práctica que veo es colocarlo como fondo de la web o sustituyendo al típico slide.
Veamos 5 ejemplos de fondos de vídeo que funcionan bien:
Un ejemplo completo de la aplicación de la etiqueta video en HTML y como ponerlo de fondo con CSS:
<video autoplay="autoplay" loop="loop">
<source src="tuvideo.webm" type="video/webm"></source>
<source src="tuvideo.ogv" type="video/ogg"></source>
</video>
/* video de fondo */
video {
position: fixed;
bottom: 0px;
right: 0px;
min-width: 100%;
min-height: 100%;
z-index: 0;
overflow: hidden;
}
<source src="tuvideo.webm" type="video/webm"></source>
<source src="tuvideo.ogv" type="video/ogg"></source>
</video>
/* video de fondo */
video {
position: fixed;
bottom: 0px;
right: 0px;
min-width: 100%;
min-height: 100%;
z-index: 0;
overflow: hidden;
}
Para más info podéis visitar este ártículo actualizado sobre el tema.
Para convertir vuestros vídeos al formato adecuado podéis usar Mirovideoconventer.
Entradas
