Los vídeos se han convertido en uno de los objetos multimedia más importantes de la web moderna. Quedan lejos aquellos años en los que era raro encontrar un vídeo en una página web, porque en caso de haberlo encontrado se ralentizaba la carga del sitio y se perjudicaba hasta el extremo la experiencia de usuario.
Gracias a las mejoras actuales del ancho de banda, los vídeos están en multitud de plataformas, siendo YouTube y Vimeo dos de las más representativas. En los últimos años incluso han surgido plataformas de pago que ofrecen películas y series enteras. También el streaming se ha popularizado mucho.
Así pues, el vídeo se ha convertido en un elemento más del diseño web. El elemento <video> permite incrustar vídeos en un documento HTML, ofreciendo a su vez un amplio abanico de opciones. Este elemento tiene mucha adaptabilidad y es compatible con la mayoría de los navegadores web.
Los autores tienen dos caminos para indicarle a los navegadores la ruta del vídeo que se debe cargar. El primero es usando el atributo src, que nos permite indicarle una URL válida. El segundo es usando el elemento <source>, que nos permite proveer alternativas distintas del mismo recurso, y que sea el navegador el que decida qué recurso se adapta mejor a sus características.
El elemento <video> tiene dos etiquetas: una para indicar la apertura del elemento (<video>) y otra para indicar el cierre (</video>). Dentro de este elemento se definirá un contenido alternativo que se usará cuando no se haya definido una URL válida o cuando el navegador no tenga soporte para el elemento <video>. Si el navegador web lo soporta, simplemente se ignorará el contenido alternativo.
Ejemplo de código HTML con un vídeo insertado:
<video controls width="320">
<source src="/resources/html/flor-320.mp4"
type="video/mp4">
Tu navegador no soporta vídeos incrustados.
</video>
Resultado del código anterior:
Atributos de vídeo
El elemento <video> tiene todos los atributos globales y algunos atributos específicos que permiten configurar sus opciones. Algunos de los más importantes son src para indicar la ruta del vídeo con una URL válida y controls para activar una interfaz que permita controlar la reproducción del vídeo.
El atributo ‘src’
Con el atributo src se indica la ruta de la ubicación del archivo de vídeo. El valor de este atributo debe ser una URL válida, y tanto puede ser una URL relativa como una URL absoluta. Sólo permite declarar un recurso.
El atributo ‘crossorigin’
El atributo crossorigin permite indicar si la petición que se ha realizado a un servidor externo debe presentar credenciales de origen cruzado (CORS) o no. Los dos valores posibles de este atributo son los siguientes:
anonymous: se establece la etiqueta “omit credentials”.use-credentials: no se establece la etiqueta “omit credentials”.
El atributo ‘poster’
El atributo poster se utiliza para mostrar una imagen de portada en el espacio que ocupa el vídeo. El valor de este atributo debe ser una URL válida.
El atributo ‘playsinline’
Con el atributo playsinline se indica al navegador web que el vídeo se debe reproducir dentro del área de reproducción. Esto implica que no se podrá maximizar a pantalla completa ni reproducirse en una ventana que se pueda escalar. Se trata de un atributo binario, por lo que no se debe indicar ningún valor.
El atributo ‘preload’
El atributo preload tiene por objetivo proporcionar una sugerencia al navegador sobre el momento de carga del recurso, y puede definir tres estados:
none: con este valor no se requiere la precarga de ninguna información.metadata: sólo se precargan los metadatos y los primeros fotogramas.auto: el recurso de vídeo se precarga a discreción del navegador web.
El atributo ‘autoplay’
El atributo autoplay activa la reproducción automática del vídeo tan pronto como al navegador web le sea posible. Se trata de un atributo binario, por lo que su inclusión ya activa esta opción, y no requiere otro valor.
El atributo ‘loop’
Con el atributo loop se indica que cuando se termine una reproducción de vídeo, empiece a reproducirse de nuevo de forma automática, una y otra vez. También se trata de un atributo binario.
El atributo ‘muted’
Para que un vídeo se reproduzca en silencio se usa el atributo muted. Este atributo también es binario, por lo que su presencia desactivará sel sonido.
El atributo ‘controls’
Gracias al atributo controls puede mostrarse una interfaz que permite interactuar con la reproducción del vídeo, ya sea pausar la reproducción, subir o bajar el volumen, etc. Este atributo también es binario.
Los atributos ‘width’ y ‘height’
Con los atributos width y height se especifica el ancho y alto del contenedor del vídeo, respectivamente. Su valor será un número entero que representa el total de píxeles. Se recomienda usar los valores de la resolución del vídeo.
Recursos alternativos: elemento <source>
Un elemento de vídeo puede contener uno o más elementos <source>. Cada uno de los elementos <source> que se use dentro del elemento <video> proveerá una versión diferente del vídeo, es decir, que esté codificada usando un códec diferente. El navegador web decidirá qué recurso cargar.
Este elemento no debería usarse en caso de que se haya definido una URL válida mediante el atributo src del elemento <vídeo>.
El elemento <source> es un elemento vacío, pues no tiene etiqueta de cierre. En él se usan algunos atributos para definir su configuración. Por ejemplo, con el atributo src se especifica una URL válida de la ruta del vídeo; con el atributo type se define un tipo de medio válido para vídeo.
Los tipos de medio más comunes para vídeo son:
- Para MP4:
video/mp4 - Para WebM:
video/webm - Para Ogg:
video/ogg
Aprende a configurar recursos con el elemento <source>.
Añadir pista de texto: elemento <track>
Mediante el elemento <track> es posible aportar pistas de texto para el vídeo incrustado. Gracias a este elemento será posible proveer títulos, subtítulos, descripciones y metadatos que pueden ser de utilidad para el usuario. Los archivos de las pistas de texto deben estar en formato VTT.
Aprende a insertar pistas de texto con el elemento <track>.
