Audio y video en HTML5
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 <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 inicio, barra de desplazamiento, regulador de volumen).
Audio and Video in HTML5
<audio src="name.ogg" controls></audio>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, con el fin de permitir que el navegador localice el archivo compatible. El tipo MIME se define con la ayuda del atributo type.
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="https://es.w3docs.com/build/audios/jingle_bells.ogg" type="audio/ogg" />
<source src="https://es.w3docs.com/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 y permite reducir el tamaño del archivo. A pesar de su popularidad entre los usuarios, las compañías de televisión y las emisoras de radio usan códecs ISO-MPEG más modernos, como AAC o MPEG-H.
AAC (Advanced Audio Codec) — códec cerrado, análogo a MP3, pero en comparación con este último, proporciona mayor calidad con el mismo grado de compresión o uno mayor.
Ogg Vorbis— formato libre con código abierto, compatible con Firefox, Opera y Chrome. Proporciona un sonido de buena calidad, pero no está suficientemente admitido por los reproductores de dispositivos.
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 se usa para mostrar los elementos de control.
Códecs de video y formatos de archivo de video
Cada navegador admite un códec particular, por eso, para proporcionar la reproducción de video en todos los navegadores, el archivo de video debe estar en varios formatos. Al igual que en el caso de los archivos de audio, todos los formatos de archivos de video se incluyen en el elemento <source>, comenzando por el más preferido. Cada archivo de video debe tener su tipo MIME, que se define mediante el atributo type.
Para asegurarse de que el navegador pueda procesar archivos de video, cree un archivo .htaccess en la carpeta donde se encuentra el sitio web, que defina los tipos MIME para un video.
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=”http://techslides.com/demos/sample-videos/small.ogv” type="video/ogg" />
<source src="https://es.w3docs.com/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 y el códec de audio Vorbis con código abierto.
Para los archivos de video en formato WebM, use el códec de video VP8 y el códec de audio Vorbis. En este caso, no se requiere una licencia.
La mayoría de los servidores no sirven medios Ogg o mp4 con los tipos MIME correctos. Para ello, es posible que necesite agregar la configuración adecuada.
Audio and Video in HTML5
AddType audio/ogg .oga
AddType audio/wav .wav
AddType video/ogg .ogv .ogg
AddType video/mp4 .mp4Cómo agregar subtítulos y títulos
Los subtítulos y títulos se agregan a los archivos de audio y video mediante el elemento <track>, que se usa como elemento hijo de <audio> y <video>.
Ejemplo de agregar subtítulos y títulos a archivos de audio y video:
Subtitles and Headings of the audio and video files
<!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="https://es.w3docs.com/build/videos/arcnet.io(7-sec).mp4">
<track default kind="subtitles" srclang="en" src="https://es.w3docs.com/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>TIP
Para alinear el reproductor de video en la página, coloque el elemento <video> dentro del contenedor <div>, asígnele una clase y luego defina para él el ancho y la altura, correspondientes al tamaño de su 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. |
Practice
¿Qué etiquetas se usan para incrustar archivos de audio y video en HTML5?