Audio y video en HTML5
Incrusta audio y video en HTML5 sin Flash. Aprende los elementos audio, video, source y track, códecs, autoplay, subtítulos y accesibilidad.
Anteriormente, las tecnologías web nativas, como HTML, no permitían incrustar video y audio en la Web. Las tecnologías basadas en complementos se volvieron populares para manejar ese contenido, pero tenían muchos problemas, entre ellos, que no funcionaban bien con las características de HTML/CSS, y presentaban problemas de seguridad y accesibilidad. Más tarde, la especificación HTML5 introdujo estas funciones con los elementos <video> y <audio>.
El elemento <audio> se usa para incrustar archivos de audio en una página web, y el elemento <video> se usa para incrustar un video.
Cómo agregar audio en la página web
Antes de HTML5, los archivos de audio se añadían a la página integrando sonido de fondo con la ayuda de la etiqueta no estándar <bgsound>. El archivo se reproducía mientras se veía la página, y el usuario no podía silenciar el sonido. En HTML5, podemos incrustar archivos de audio usando la etiqueta <audio>, y no es necesario conectar complementos de terceros. El elemento de audio puede controlarse con HTML o Javascript y estilizarse con CSS.
En el código, el atributo src hace referencia a la URL del archivo de audio, y el atributo controls añade un panel de control (botón de reproducción, barra de progreso, control de volumen).
Audio and Video in HTML5
<audio src="name.ogg" controls></audio>Incluye siempre el atributo controls a menos que proporciones tus propios controles accesibles en JavaScript. Sin él, los usuarios de teclado y lectores de pantalla no tienen forma de reproducir, pausar o ajustar el volumen del medio.
Códecs de audio y formatos de archivo de audio
Como no todos los navegadores admiten todos los formatos de audio, el archivo de audio se codifica/decodifica con un códec de audio (un dispositivo electrónico digital o una aplicación de software basada en computadora que ayuda en la compresión y descompresión de datos de audio digital). Todos los formatos de archivos de audio se añaden simultáneamente mediante el elemento <source> con el atributo src.
Al definir diferentes formatos de archivo, recomendamos definir el tipo MIME para cada archivo, de modo que el navegador pueda seleccionar el formato que admite. El tipo MIME se define con el atributo type. El navegador usa el primer <source> que puede reproducir, así que ordénalos del formato más preferido o más ampliamente soportado al menos preferido.
Ejemplo de agregar diferentes formatos de archivos de audio:
Example of Audio Codecs and Audio File Formats
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<audio controls>
<source src="/build/audios/jingle_bells.ogg" type="audio/ogg" />
<source src="/build/audios/audio.mp3" type="audio/mpeg" />
</audio>
<p>Click the play button</p>
</body>
</html>Los formatos de audio más populares son los siguientes:
MP3 – el formato de audio más popular, que usa compresión con pérdida para reducir el tamaño del archivo. Es compatible con prácticamente todos los navegadores, por lo que es una <source> predeterminada segura.
AAC (Advanced Audio Codec) — una alternativa a MP3 que ofrece mayor calidad con el mismo grado de compresión o uno mayor. También es ampliamente compatible con los navegadores modernos (servido como audio/mp4 o audio/aac).
Ogg Vorbis — un formato libre de código abierto compatible con Firefox y Chrome, pero no con Safari. Ofrece buena calidad de sonido pero es menos utilizado por los reproductores de dispositivos.
Códec y compatibilidad con navegadores, en resumen: MP3 y AAC son compatibles prácticamente en todas partes, incluyendo Safari, así que incluye uno de ellos como <source> de respaldo. Ogg Vorbis y WebM (Opus) son libres de regalías y se reproducen en Firefox y Chrome pero no en Safari. Un orden común y seguro es el formato abierto primero y MP3/AAC al final, para que cada navegador encuentre algo que pueda reproducir.
Cómo agregar archivos de video
En la versión anterior de HTML, los videos se incrustaban en el sitio mediante complementos de terceros, como QuickTime, RealPlayer o Flash. HTML5 tiene una nueva etiqueta <video>, que se usa para insertar un video en la página web.
En el código, se ve así:
Audio and Video in HTML5
<video src="example.webm" controls></video>El atributo src indica la URL del archivo, y el atributo controls muestra los controles de reproducción.
Autoplay, el atributo muted y accesibilidad
Puedes pedirle al navegador que comience a reproducir en cuanto el medio esté listo con el atributo autoplay. Sin embargo, los navegadores modernos bloquean el autoplay con sonido para no sorprender al usuario. Por ello, autoplay solo funciona de forma fiable cuando el medio también tiene muted:
<video autoplay muted controls src="example.webm"></video>Usa el autoplay con moderación. Los medios que comienzan solos, especialmente con sonido, desorientan a los usuarios de lectores de pantalla y a las personas con sensibilidades cognitivas o vestibulares. WCAG requiere que cualquier audio que se reproduzca durante más de tres segundos tenga una forma de pausarlo o detenerlo, así que mantén controls presente siempre que uses autoplay.
El atributo poster
Para <video>, el atributo poster establece una imagen de marcador de posición que se muestra antes de que el video se reproduzca (o mientras se carga). Ofrece a los usuarios una vista previa significativa en lugar de un fotograma en blanco:
<video controls poster="/build/images/preview.jpg" src="example.webm"></video>El atributo preload
El atributo preload indica al navegador cuánto debe almacenar en búfer antes de que el usuario presione reproducir:
none— no almacenar en búfer nada hasta que el usuario inicie la reproducción.metadata— cargar solo los metadatos (duración, dimensiones, primer fotograma).auto— el navegador puede descargar el archivo completo por adelantado.
preload es solo una sugerencia y los navegadores pueden ignorarla. En páginas móviles o sensibles al uso de datos, prefiere metadata o none para no descargar archivos grandes que el visitante puede que nunca vea.
Códecs de video y formatos de archivo de video
Cada navegador admite un conjunto particular de códecs, por eso, para reproducir video en todos lados debes proporcionar el archivo en varios formatos. Al igual que con el audio, cada formato se lista en su propio elemento <source>, comenzando por el más preferido. Cada archivo de video debe tener un tipo MIME, definido con el atributo type.
Para asegurarte de que el servidor entregue correctamente los archivos de video al navegador, es posible que también necesites declarar sus tipos MIME en la configuración del servidor (ver más abajo).
Ejemplo de agregar diferentes formatos de archivos de video:
Example of Video Codecs and Video File Formats
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
video {
width: 300px;
height: 220px;
border: 1px solid #666;
}
</style>
</head>
<body>
<video controls>
<source src="/build/videos/arcnet.io(7-sec).webm" type="video/webm" />
<source src="/build/videos/arcnet.io(7-sec).mp4" type="video/mp4" />
</video>
<p>Some information about video</p>
</body>
</html>Hoy en día hay 3 formatos básicos de video: MP4/MPEG-4, OGG y WebM. Para la compresión de datos de video y su reproducción, usamos códecs.
Para un archivo de video en formato MPEG-4, se usan el códec de video H.264 y el códec de audio AAC. Si desea usar códecs, debe obtener una licencia.
Para el archivo de video Ogg, use el códec de video Theora de código abierto y el códec de audio Vorbis.
Para los archivos de video en formato WebM, use el códec de video VP8 (o VP9) y el códec de audio Vorbis (u Opus). En este caso, no se requiere una licencia.
Configurar los tipos MIME correctos en el servidor
El servidor le indica al navegador qué tipo de archivo está enviando mediante la cabecera de respuesta Content-Type (el tipo MIME). Si un servidor envía un archivo multimedia con un tipo MIME incorrecto o ausente, el navegador puede negarse a reproducirlo aunque admita el códec. Muchos servidores no están configurados para servir Ogg, WebM o MP4 de forma predeterminada, por lo que puede que necesites agregar la asignación manualmente.
En Apache, añade lo siguiente a un archivo .htaccess en la carpeta de tu sitio:
AddType audio/ogg .oga
AddType audio/wav .wav
AddType video/ogg .ogv .ogg
AddType video/mp4 .mp4
AddType video/webm .webmEn Nginx, añade las entradas correspondientes al bloque types { ... } (generalmente en mime.types):
types {
audio/ogg oga;
audio/wav wav;
video/ogg ogv ogg;
video/mp4 mp4;
video/webm webm;
}Cómo agregar subtítulos y títulos
Las pistas de texto, como los subtítulos y los títulos, se añaden a los archivos de audio y video mediante el elemento <track>, que se coloca como elemento hijo de <audio> o <video>. Cada pista apunta a un archivo WebVTT (.vtt).
Proporcionar subtítulos para medios pregrabados es un requisito de accesibilidad: un <track kind="captions"> cumple el Criterio de Éxito 1.2.2 de WCAG 2.1, en el que se basan los usuarios sordos y con dificultades auditivas para comprender el audio.
El atributo kind le indica al navegador qué tipo de pista de texto es:
subtitles— traducciones o transcripciones del diálogo para espectadores que pueden escuchar pero no entienden el idioma. Este es el valor predeterminado.captions— como los subtítulos, pero también describen los efectos de sonido y otras señales de audio para espectadores que no pueden escuchar.descriptions— una descripción en texto del contenido del video, pensada para ser leída en voz alta para usuarios que no pueden ver la pantalla.chapters— títulos de capítulos usados para navegar por el medio.metadata— pistas usadas por scripts y no mostradas al usuario.
Ejemplo de agregar subtítulos a un archivo de video:
Captions for a video file with the track element
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
video {
width: 300px;
height: 200px;
border: 1px solid #666;
}
</style>
</head>
<body>
<video controls muted src="/build/videos/arcnet.io(7-sec).mp4">
<track default kind="captions" label="English" srclang="en" src="/build/videos/arcnet.io(7-sec).vtt" />
</video>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</p>
</body>
</html>Para alinear el reproductor de video en la página, coloca el elemento <video> dentro del contenedor <div>, asígnale una clase y luego define para él el ancho y la altura, correspondientes al tamaño de tu video.
Atributos de audio y video
| Attribute | Description |
|---|---|
| autoplay | Permite que el audio/video comience a reproducirse automáticamente mientras se carga el resto de la página. |
| controls | Permite controlar la reproducción de audio/video, incluido el volumen y la pausa/reanudación de la reproducción. |
| loop | Permite que el audio/video se reproduzca de nuevo cuando termina. |
| muted | Hace que el medio se reproduzca con el sonido desactivado de forma predeterminada. |
| preload | Especifica el almacenamiento en búfer de archivos grandes. Puede tener uno de estos valores: "none" (no almacena el archivo en búfer), "auto" (almacena el archivo multimedia en búfer) o "metadata" (almacena en búfer solo los metadatos del archivo). |
| src | La URL del audio/video a incrustar. Es opcional. |
| poster | Es una URL de una imagen que se muestra antes de reproducir el video. |
| width | Especifica el ancho del área de visualización del video, en píxeles CSS. |
| height | Especifica la altura del área de visualización del video, en píxeles CSS. |