Visita nuestro archivo

HTML5 nos provee con las etiquetas <video> y <audio>, que nos liberan de la tediosa tarea de incluir en la página reproductores Flash con las etiquetas <object> o <embed>, además de permitirnos reproducir video en iPhones y iPads, que no son compatibles con Flash.

Incluir un video con HTML5 es tán fácil como esto:

<video src="video.mp4"></video>

También es posible definir ancho y alto, y un texto que se mostrará al usuario en caso de que el navegador no sea compatible con HTML5:

<video src="video.mp4" width="640" height="480">El navegador no es compatible con HTML5</video>

Los navegadores capaces de reproducir audio y video con HTML5 son: Firefox 3.5+, Chrome 4+, Safari 4, Opera 10.5+, Internet Explorer 9+, iOS 3.2+, Opera Mobile 11+, Android 2.3+. Para los navegadores más antiguos, como IE8 es posible utilizar una técnica que mostraré más abajo.

Podemos también configurar otras opciones, como agregar controles de reproducción, activar la opción de autoplay, configurar la precarga del video, definir la imagen que se muestra como caratula y activar la reproducción indefinida (loop). Este ejemple incluye todas esas opciones:

<video src="video.mp4" width="640" height="480" controls autoplay preload="auto" loop poster="poster.jpg">El navegador no es compatible con HTML5</video>

Desafortunadamente, no podemos reproducir cualquier tipo de audio y video en cualquier navegador. Puedes consultar en esta tabla de compatibilidad qué tipos de video se pueden reproducir en qué navegadores. Sin embargo, hay una forma de ofrecer diferentes formatos de video o audio para ser reproducidos, y dejar a cada navegador que escoja el que más le convenga. La desventaja es que deberemos convertir cada video a varios formatos. Escribiremos el código de esta manera:

<video width="640" height="480">
<source src="video.ogv" type="video/ogg">
<source src="video.mp4" type="video/mp4">
El navegador no es compatible con HTML5
</video>

Si quisiéramos ofrecer compatibilidad para navegadores antiguos, como Internet Explorer 8, podemos incluir la alternativa de utilizar un reproductor flash. Incluso podemos ser más previsores aún y ofrecer vínculos de descarga del video si el plugin Flash no pudiera ser reproducido:

<video width="640" height="480" poster="poster.jpg" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
<object width="640" height="480" type="application/x-shockwave-flash" data="flashPlayer.swf">
<param name="movie" value="flashPlayer.swf" />
<param name="flashvars" value="controlbar=over&amp;image=poster.jpg&amp;file=video/video.mp4" />
<img src="poster.jpg" width="640" height="480" alt="Titulo" title="No es posible reproducir el video." />
</object>
<p><b>Descarga el video:</b>
MP4 Format: <a href="video.mp4">"MP4"</a>
Ogg Format: <a href="video.ogv">"Ogg"</a>
</p>
</video>

El siguiente es un ejemplo con otra estructura de alternativas:

<video width="640" height="480" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
<object data="video.mp4" width="640" height="480">
<embed src="video.swf" width="640" height="480">
</object>
</video>

De todas formas, siempre tenemos al viejo y conocido YouTube que es la forma más rápida y sencilla de publicar videos en la mayoría de las ocasiones.

Cómo hacer el video adaptable (responsive)

Para que el cuadro de video sea adaptable a los cambios en el tamaño del viewport, eliminar los atributos height y width y agregar en el CSS:

video { max-width: 100%; height: auto; }

¡Eso es todo! :)

Fuente:

Frain, Ben – Responsive Web Design with HTML5 and CSS3

HTML Videos

  • Nombre (Requerido)

  • Email (Requerido, pero no publicado)

  • Comentario (Requerido)

*