Saltar la navegación

Contenido de Audio y Video

A continuación, veremos como usar los elementos de HTML5 <video> y <audio>, para insertar video y audio en nuestras páginas, incluyendo conceptos básicos, proporcionando acceso a diferentes formatos de archivo para diferentes navegadores, agregando ilustraciones y subtítulos y cómo resolver inconvenientes en navegadores más antiguos.

Ahora que estamos cómodos añadiendo imágenes simples a una página web, el siguiente paso será empezar a agregar reproductores de audio y video a tu documento HTML. En este artículo veremos cómo hacerlo con los elementos <video> y <audio>; luego terminaremos viendo como agregar subtítulos a nuestros videos.

Requisitos previos: Conocimientos básicos de computación, programas básicos instalados, conocimiento básico de trabajo con archivos, familiaridad con los fundamentos de HTML (como está cubierto en Empezando con HTML) e Imágenes en HTML.
Objetivo: Aprender como incrustar contenido de audio y video en una página web, y agregar subtítulos a los videos.

Audio y video en la web

Los desarrolladores web han querido usar audio y video en la web por mucho tiempo, desde comienzos del 2000 cuando empezamos a tener un ancho de banda suficientemente rápido para soportar cualquier tipo de video (los archivos de video son mucho más grandes que texto o imágenes). En los inicios, las tecnologías web nativas como HTML no tenían el soporte para incrustar audio y video en la Web, tecnologías privadas (o basadas en plugins) como Flash (y después, Silverlight) se convirtieron populares para manipular este tipo de contenido. Este tipo de tecnología funcionó bien, pero tenía ciertos problemas, incluidos el no trabajar bien con las características de HTML/CSS, problemas de seguridad y problemas de accesibilidad.

Una solución nativa podría resolver mucho de esto si es implementado correctamente. Afortunadamente, unos pocos años después la especificación HTML5 tenía tales características agregadas, con los elementos <video> y <audio>, y algo nuevo JavaScript APIs para controlar estos. No veremos Javascript aquí — solo los fundamentos básicos que se pueden lograr con HTML.

No te enseñaremos como crear archivos de audio y video — eso requiere un conocimiento completamente diferente. Por el contrario, te proporcionamos archivos de audio y video de muestra con códigos de ejemplo para que tu mismo experimentes, en caso de que no puedas conseguirlos por ti mismo.

Nota:

Antes de empezar, también deberías saber que hay un puñado de OVPs (proveedores de video online) como YouTube, Dailymotion y Vimeo, y proveedores de audio como Soundcloud. Tales compañías ofrecen una conveniente fácil forma de hospedar y consumir videos, y que no tienes que preocuparte sobre el enorme ancho de banda que se consume. Los OVPs normalmente usan código prefabricado para incrustar video/audio en tus sitios web; si usas ese camino, puedes evitar algunas dificultades que discutimos en este artículo. Discutiremos este tipo de servicios un poco más en el siguiente artículo.