Contenido de audio y video

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, incluídos 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.

El elemento <video> nos permite incrustar video fácilmente. Un ejemplo muy simple luce como lo siguiente:

<video src="rabbit320.webm" controls>
  <p>
    Tu navegador no soporta HTML5 video. Aquí está el
    <a href="rabbit320.webm">enlace del video</a>.
  </p>
</video>

Las características a notar son:

src

De la misma manera que para el elemento <img>, el atributo src (source) contiene una ruta al video que deseas incrustar. Funciona de la misma manera.

controls

Los usuarios deben ser capaces de controlar la reproducción de video y audio (esto es especialmente crítico en personas que padecen epilepsia). Se debe utilizar el atributo controls para incluir la interfaz de control del browser, o construir la nuestra utilizando la JavaScript API apropiada. Como mínimo la interfaz debe incluir una manera de empezar y terminar la reproducción, y ajustar el volumen.

El párrafo dentro de la etiqueta <video>

Se lo llama fallback content (contenido de reserva) — y será mostrado si el browser desde el que se está accediendo a la página no soporta el elemento <video>, permitiéndonos proveer un fallback para browsers más antiguos. Puede ser de la manera que se quiera; en este caso proporcionamos un link directo al archivo de video, por lo que el usuario puede al menos acceder de alguna manera, independientemente del browser que esté usando.

El video incrustado se verá así:

Puedes probar el ejemplo aquí (también el código fuente).

Hay un problema con el ejemplo de arriba, que quizás hayas notado si trataste de acceder al ejemplo en línea con un navegador como Safari o Internet Explorer. ¡El video no funciona! Esto es porque diferentes navegadores soportan diferentes formatos de video (y audio).

Contenidos de un archivo de medios

Repasemos la terminología rápidamente. Formatos como MP3, MP4 y WebM son llamados formatos contenedores. Estos contienen diferentes partes que componen toda la canción o video — como una pista de audio y una pista de video (en el caso del video), y metadatos para describir los contenidos que se presentan, qué codecs se usan para codificar sus canales, etcétera.

Un archivo WebM contiene una película que tiene una pista principal de video y otra pista con un ángulo alternativo, junto con audio en inglés y español, además de una pista con comentarios en inglés, lo que puede ser conceptualizado en el siguiente diagrama. También se incluyeron pistas de texto que contienen los subtítulos de la película en inglés, español y para el comentario.

Las pistas de audio y video dentro del contenedor mantienen los datos en un formato adecuado para el codec usado para codificar ese medio. Se usan diferentes formatos para pistas de audio versus de video. Cada pista de audio es codificada usando un codec de audio mientras que las pistas de video son codificadas (como probablemente ya has adivinado) usando un codec de video. Así como hemos hablado previamente, diferentes navegadores soportan diferentras formatos de audio y video, y diferentes formatos contenedores (como MP3, MP4 y WebM, que pueden contener diferentes tipos de video y audio).

Por ejemplo:

• Un WebM usualmente contiene paquetes de Ogg Vorbis audio con VP8/VP9 video. Soportado principalmente por Firefox y Chrome.
• Un MP4 contiene a menudo paquetes AAC o audio MP3 con videos H.264. Principalmente soportados en Internet Explorer y Safari.
• El antiguo contenedor Ogg suele usar audio Ogg Vorbis y video Ogg Theora. Es principalmente soportado por Firefox y Chrome, pero básicamente ha sido reemplazado por el formato WebM de mejor calidad.

Un reproductor de audio tenderá a reproducir directamente un track de audio. Por ejemplo un archivo MP3 u Ogg. No necesitan contenedores.

Los formatos anteriores existen para comprimir los archivos de audio y video volviéndolos manejables (el tamaño sin comprimir es muy grande). Los browsers contienen diferentes Codecs, como Vorbis o H.264, los cuales son usados para convertir el sonido y video comprimidos en binario y viceversa. Pero desafortunadamente, como indicamos antes, no todos los browsers soportan los mismos codecs, por lo tanto, habrá que proveer varios archivos para cada producción multimedia. Si te falta el codec correcto para decodificar el medio, simplemente no se reproducirá.

Está bien, ¿pero cómo lo hacemos? Miremos el siguiente ejemplo actualizado (pruébalo en vivo aquí):

<video controls>
  <source src="rabbit320.mp4" type="video/mp4" />
  <source src="rabbit320.webm" type="video/webm" />
  <p>
    Su navegador no soporta video HTML5. Aquí hay un
    <a href="rabbit320.mp4">enlace al video</a>.
  </p>
</video>

Tomamos el atributo src del tag <video> y en su lugar incluimos elementos separados <source> que apuntan a sus propias fuentes. En este caso el browser irá a los elementos <source> y reproducirá el primero de los elementos que el codec soporte. Incluir fuentes WebM y MP4 debería bastar para reproducir el video en la mayoría de los browsers en estos días.

Cada elemento <source> tambien tiene un atributo type . Esto es opcional, pero se recomienda que se incluyan, ya que contienen MIME types de los archivos de vídeo y los navegadores pueden leerlos y omitir inmediatamente los vídeos que no tienen. Si no estan incluidos, los navegadores cargarán e intentarán reproducir cada archivo hasta que encuentren uno que funcione, lo que llevará aún más tiempo y recursos.

Hay varias otras características que puede incluir en un vídeo HTML5. Eche un vistazo a nuestro tercer ejemplo, a continuación.

<video
  controls
  width="400"
  height="400"
  autoplay
  loop
  muted
  poster="poster.png">
  <source src="rabbit320.mp4" type="video/mp4" />
  <source src="rabbit320.webm" type="video/webm" />
  <p>
    Su navegador no soporta vídeo HTML5. Este es un
    <a href="rabbit320.mp4">enlace al vídeo</a> alternativo.
  </p>
</video>

Esto nos dará un resultado que se parece a esto:

Las nuevas características son:

width y height

Puede controlar el tamaño con estos atributos o con CSS. En ambos casos, los vídeos mantienen su relación anchura - altura nativa. Si la relación de aspecto no se mantiene con los tamaños establecidos, el vídeo crecerá para rellenar el espacio horizontalmente y el el espacio sin rellenar sólo recibirá un color de fondo sólido de forma predeterminada.

autoplay

Hace que el audio o el vídeo empiece a reproducirse de inmediato, mientras se carga el resto de la página. Le aconsejamos que no utilice vídeo (o audio) de reproducción automática en sus sitios, ya que los usuarios pueden encontralo molesto.

loop

Hace que el vídeo (o audio) comience a reproducirse cada vez que finaliza.Esto puede en ocasiones resultar molesto, así que utilizalo solo si es realmente necesario.

muted

Hace que los medios se reproduzcan con el sonido apagado de forma predeterminada.

poster

La URL de una imagen que se mostrará antes de reproducir el vídeo. Está destinado a ser utilizado para una pantalla de presentación o pantalla publicitaria (miniatura del vídeo).

preload

Se utiliza para almacenar en búfer archivos grandes; Puede tomar uno de estos tres valores:

• "none" no almacena el archivo en el búfer
• "auto" almacena el archivo multimedia
• "metadata" almacena solo los metadatos del archivo

Puedes encontrar el ejemplo anterior disponible en reproducir en directo en Github (también vea el código fuente.) Tenga en cuenta que hemos incluido el atributo autoplay en la versión en vivo — Si el vídeo comienza a reproducirse tan pronto como se cargue la página no podrá ver la miniatura!

El elemento <audio> funciona exactamente de la misma forma que el elemento <video>, con algunas pequeñas diferencias como se describe a continuación. Un ejemplo típico podría ser así:

<audio controls>
  <source src="viper.mp3" type="audio/mp3" />
  <source src="viper.ogg" type="audio/ogg" />
  <p>
    Su navegador no es compatible con audio HTML5. Aquí hay un
    <a href="viper.mp3">enlace al audio</a> en su lugar.
  </p>
</audio>

Esto produce algo como lo siguiente en un navegador:

Esto ocupa menos espacio que un reproductor de video, ya que no hay un componente visual; solo necesita mostrar los controles para reproducir el audio. Otras diferencias con respecto al video HTML5 son las siguentes:

• El elemento <audio> no soporta los atributos width/height — de nuevo, no hay un componente visual,por no que no hay nada a lo que asignar un width o height (ancho o alto).
• Tampoco es compatible con el atributo poster — de nuevo , no hay componente visual.

Además de esto, <audio> admite las mismas características que <video> — revisa las secciones anteriores para obtener más información sobre ellas.

En cualquier momento, puede restablecer los medios al principio—incluyendo el proceso de selección de la mejor fuente de medios, si se especifica más de una usando <source> elementos—llamando al elemento load() method:

var mediaElem = document.getElementById("my-media-element");
mediaElem.load();

Puede monitorear las listas de pistas dentro de un elemento multimedia para detectar cuando se añaden o eliminan pistas del elemento multimedia. Por ejemplo, puede ver si se activa el evento addtrack en el objeto AudioTrackList asociado (recuperado a través de HTMLMediaElement.audioTracks) para saber cuándo se añaden pistas de audio al contenido multimedia:

var mediaElem = document.querySelector("video");
mediaElem.audioTracks.onaddtrack = function (event) {
  audioTrackAdded(event.track);
};

Encontraras mas documentación acerca de esto en nuestra TrackEvent documentación.

Ahora hablaremos de un concepto un poco más avanzado que es realmente útil conocer. Muchas personas no pueden o no quieren escuchar el contenido de audio/vídeo que encuentran en la Web, al menos en determinados momentos. Por ejemplo:

• Muchas personas tienen deficiencias auditivas (más comúnmente conocidas como sordos o con dificultades auditivas), por lo que no pueden oír el audio.
• Otras no pueden oír el audio porque se encuentran en ambientes ruidosos (como un bar abarrotado cuando se retransmite un partido deportivo) o porque no quieren molestar a los demás si están en un lugar tranquilo (como una biblioteca).
• Las personas que no hablan el idioma del vídeo pueden querer una transcripción de texto o incluso una traducción que les ayude a entender el contenido multimedia.

¿No estaría bien poder ofrecer a estas personas una transcripción de las palabras que se pronuncian en el audio/vídeo? Pues bien, gracias al vídeo HTML5 se puede, con el formato WebVTT y el elemento <track>.

WebVTT es un formato para escribir archivos de texto que contienen múltiples cadenas de texto junto con metadatos tales como en qué momento del vídeo desea que se muestre cada cadena de texto, e incluso información limitada de estilo/posicionamiento. Estas cadenas de texto se llaman cues, y se pueden mostrar diferentes tipos para diferentes propósitos, siendo los más comunes:

subtítulos

Traducciones de material extranjero, para personas que no entienden las palabras pronunciadas en el audio.

leyendas

transcripciones sincronizadas de diálogos o descripciones de sonidos significativos, para que las personas que no pueden oír el audio entiendan lo que está pasando.

descripciones temporizadas

Texto para convertir en audio, al servicio de las personas con deficiencias visuales.

Un archivo WebVTT típico tendrá este aspecto:

WEBVTT

1
00:00:22.230 --> 00:00:24.606
Este es el primer subtítulo.

2
00:00:30.739 --> 00:00:34.074
Este es el segundo.

...

Para que esto se muestre junto con la reproducción multimedia HTML, es necesario:

1. Guárdelo como archivo .vtt en un lugar adecuado.
2. Enlace el archivo .vtt con el elemento <track>. <track> debe colocarse dentro de <audio> o <video>, pero después de todos los elementos <source>. Utilice el atributo kind para especificar si las pistas son "subtítulos", " leyendas" o "descripciones". Además, utilice srclang para indicar al navegador en qué idioma ha escrito los subtítulos.

He aquí un ejemplo:

<video controls>
  <source src="example.mp4" type="video/mp4" />
  <source src="example.webm" type="video/webm" />
  <track kind="subtitles" src="subtitles_en.vtt" srclang="en" />
</video>

El resultado será un vídeo con subtítulos, como éste:

Para más detalles, lee Añadir subtítulos a vídeos HTML5. Puedes encontrar el ejemplo que acompaña a este artículo en Github, escrito por Ian Devlin (consulta también el código fuente.) Este ejemplo utiliza algo de JavaScript para permitir a los usuarios elegir entre diferentes subtítulos. Ten en cuenta que para activar los subtítulos, tienes que pulsar el botón "CC" y seleccionar una opción: English, Deutsch o Español.

Para este aprendizaje activo, nos gustaría (idealmente) que salieras al mundo y grabaras algo de tu propio vídeo y audio: la mayoría de los teléfonos de hoy en día permiten grabar audio y vídeo muy fácilmente, y siempre que puedas transferirlo a tu ordenador, puedes utilizarlo. Es posible que tengas que hacer alguna conversión para acabar con un WebM y un MP4 en el caso del vídeo, y un MP3 y un Ogg en el caso del audio, pero existen suficientes programas que te permitirán hacerlo sin demasiados problemas, como Miro Video Converter y Audacity. Nos gustaría que lo intentaras.

Si no puedes obtener ningún vídeo o audio, puedes utilizar nuestros archivos de audio y vídeo de muestra para realizar este ejercicio. También puedes utilizar nuestro código de ejemplo como referencia.

Nos gustaría que

1. Guardes tus archivos de audio y vídeo en un directorio nuevo de tu ordenador.
2. Crees un nuevo archivo HTML en el mismo directorio, llamado index.html.
3. Añade los elementos <audio> y <video> a la página; haz que muestren los controles por defecto del navegador.
4. Dales a ambos elementos <source> para que los navegadores encuentren el formato de audio que mejor soportan y lo carguen. Estos deben incluir atributos type.
5. Asigna al elemento <video> un cartel que se mostrará antes de que empiece a reproducirse el vídeo. Diviértete creando tu propio cartel gráfico.

Si lo deseas, puedes buscar pistas de texto y averiguar cómo añadir algunas leyendas a tu vídeo.

Y con esto terminamos; ¡esperamos que te hayas divertido jugando con vídeo y audio en páginas web! En el próximo artículo, veremos otras formas de incrustar contenido en la Web, utilizando tecnologías como <iframe> y <object>.

• <audio>
• <video>
• <source>
• <track>
• Añadir subtítulos a vídeos HTML5
• Transmisión de audio y vídeo: Un montón de detalles sobre cómo poner audio y vídeo en páginas web usando HTML y JavaScript.
• Manipulación de audio y vídeo: Un montón de detalles sobre la manipulación de audio y vídeo utilizando JavaScript (por ejemplo, la adición de filtros.)
• Opciones automatizadas para traducir multimedia.

• Anterior
• Overview: Multimedia e inserción
• Siguiente