Con la llegada de HTML5 al mundo del diseño web, se han incorporado diversas funcionalidades bastante útiles a la hora de crear nuestra web. En este artículo hablaremos de la etiqueta <video> que nos permite incrustar un vídeo en nuestra web sin tener que depender de recursos externos.

La cosa es bien sencilla, en base a nuestra etiqueta vamos añadiendo distintas opciones dependiendo de lo que nosotros necesitemos. Lo más básico sería algo así:

De esta forma, mediante la etiqueta src estamos asignando dos tipos de archivos a nuestro vídeo (esto es recomendable para evitar incompatibilidades entre navegadores, en caso de error mostrará el mensaje “Tu navegador no soporta este tipo de videos”). Con controls establecemos los típicos botones de play, pause, volumen…y por ultimo asignamos unos valores de alto height="400" y ancho width="720".

Atributos

Seguramente esta pequeña configuración de la etiqueta <video> te haya sabido a poco pero tranquio, que hay más:

– autoplay inicia el vídeo al cargar la pagina.
– loog crea un loop infinito de modo que una vez finalice, el vídeo vuelve a comenzar.
– poster establece una imagen como previsualización del vídeo, que es reemplazada por el multimedia una vez lo inicies.
– preload admite tres tipos de parámetros none, metadata o auto. El primero indica que el vídeo no debería de ser cacheado, de esta forma ahorramos tráfico innecesario. El segundo valor, indica al navegador que solo deberá de tratar información acerca de la fuente (dimensiones, duración, extensión…). El tercer valor, el utilizado por defecto por el navegador indica que el vídeo será cargado lo antes posible.
– muted mutea por defecto el video.

Toques finales

Una vez hayamos configurado nuestro vídeo añadiendole las opciones que más nos convengan podríamos tener un codigo tal que así (el resultado es el expuesto al inicio del artículo):

Si en vez de un video quieres añadir un reproductor los pasos son los mismos solo que tendrás que cambiar la etiqueta <video> por la etiqueta <audio>, editar los enlaces para poner una extensión de audio y establecer un ancho y un alto que se ajuste bien. Modificando el código anterior obtendríamos este resultado:

Obviamente el atributo poster ya no es necesario e incluso podríamos prescindir también del height ya que el alto será el acorde a los controles.

Como veis es algo muy sencillo, bien es cierto que limita mucho la personalización y que dependes del diseño de cada navegador pero, en los siguientes tutoriales abordaremos este tema para que podáis personalizar vuestro vídeo añadiéndole CSS y Javascript.