En muchos de nuestros proyectos web tenemos que añadir vídeo para potenciar nuestra línea argumental o nuestro storytelling. En ocasiones, para añadir éstos vídeos simplemente podemos embeberlos desde YouTube o desde Vimeo. Pero en otros muchos casos tendremos que añadir el vídeo como archivo, no desde un enlace.
En HTML5 tenemos una etiqueta que nos ayudará a implementar nuestros vídeos desde un archivo, la etiqueta video.
<video> <source src="movie.webm" type='video/webm' /> <source src="movie.ogv" type='video/ogg' /> <source src="movie.mp4" type='video/mp4' /> </video>
Aquí tenéis un ejemplo del código necesario para añadir un vídeo en HTML. Basta con crear la etiqueta video y dentro de ella añadir una etiqueta source con el atributo src donde añadimos la ruta del archivo de nuestro vídeo.
Con esto es suficiente para reproducir el vídeo, pero podemos enriquecerlo mucho más, como por ejemplo:
<video poster="miniatura.png" autoplay loop controls> <source src="movie.webm" type='video/webm' /> <source src="movie.ogv" type='video/ogg' /> <source src="movie.mp4" type='video/mp4' /> </video>
A la etiqueta video le podemos añadir atributos como:
- poster: nos permite añadir una miniatura o thumbnail, es decir, una imagen estática mientras el vídeo no se está reproduciendo.
- autoplay: permite reproducir el vídeo automáticamente una vez haya sido cargado por nuestro sitio. Hay navegadores como Safari que no permiten el autoplay. Y yo no te lo recomiendo con el fin de no perjudicar nuestra experiencia de usuario.
- loop: con este atributo el vídeo se reproducirá de forma continua y sin parar.
- controls: permite mostrar los controles de reproducción para poder pausar y reanudar el vídeo, etc. El estilo de estos controles viene definido por el navegador aunque los podemos personalizar.
Además de estos argumentos podemos enriquecer el consumo de estos contenidos en nuestros sitios gracias a que la etiqueta video admite eventos de Javascript, y por tanto podemos interactuar con la reproducción de nuestro contenido.