Video and audio content

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, 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.

Observaci√≥n: 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 dificultates que discutimos en este art√≠culo. Discutiremos este tipo de servicios un poco m√°s en el siguiente art√≠culo.

El elemento <video>

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í:

A simple video player showing a video of a small white rabbit

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

Uso de formatos m√ļltiples para mejorar la compatibilidad

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.

Nota: No es tan simple como se ve en nuestra  tabla de compatibilidad de codecs audio-video. Adem√°s, muchos browsers de plataformas m√≥viles pueden reproducir un formato no soportado entreg√°ndoselo al reproductor multimedia del sistema subyacente para que lo reproduzca. Pero esto servir√° por ahora.

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√°.

Nota: Debes estar pregunt√°ndote por qu√© sucede esto. El MP3 (para audio) y el MP4/H.264 (para video) son ampliamente compatibles y de buena calidad, sin embargo, tambi√©n est√°n patentados  ‚ÄĒ sus patentes cubren MP3 al menos hasta 2017 y a H.264 hasta 2027, lo que significa que los browsers que no tienen la patente tienen que pagar grandes sumas de dinero para soportar estos formatos. Adem√°s,  mucha gente no permite el software con restricciones, por estar a favor de formatos abiertos. Por todo esto es que tenemos que proveer m√ļltiples formatos para los diferentes browsers.

Est√° bien, ¬Ņpero c√≥mo lo hacemos? Miremos el siguiente ejemplo actualizado (pru√©balo en vivo aqu√≠), o ac√°:

<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.

Note: Nuestro articulo sobre soporte de formatos multimedia contiene algunos de los habituales MIME types.

Otras características de la etiqueta <video>

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>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
</video>

Esto nos dar√° un resultado que se parece a esto:

A video player showing a poster image before it plays. The poster image says HTML5 video example, OMG hell yeah!Las nuevas características son:

width y height
Puede controlar el taman√Ī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√Īis 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  play live on Github (tambi√©n see the source code.)  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>

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>Your browser doesn't support HTML5 audio. Here is a <a href="viper.mp3">link to the audio</a> instead.</p>
</audio>

Esto produce algo como lo siguiente en un navegador:

A simple audio player with a play button, timer, volume control, and progress bar

Nota: Puedes reproducir este ejemplo de audio en Github (tambi√©n, puedes ver el c√≥digo fuente del reproductor de audio.)

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.

Reinicio de la reproducción multimedia

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();

Detecting track addition and removal

You can monitor the track lists within a media element to detect when tracks are added to or removed from the element's media. For example, you can watch for the addtrack event being fired on the associated AudioTrackList object (retrieved via HTMLMediaElement.audioTracks) to be informed when audio tracks are added to the media:

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

Encontraras mas documentacion acerca de esto en nuestra TrackEvent documentacion.

Displaying video text tracks

Now we'll discuss a slightly more advanced concept that is really useful to know about. Many people can't or don't want to hear the audio/video content they find on the Web, at least at certain times. For example:

  • Many people have auditory impairments (more commonly known as hard of hearing, or deaf) so can't hear the audio.
  • Others may not be able to hear the audio because they are in noisy environments (like a crowded bar when a sports game is being shown) or might not want to disturb others if they are in a quiet place (like a library.)
  • People who don't speak the language of the video might want a text transcript or even translation to help them understand the media content.

Wouldn't it be nice to be able to provide these people with a transcript of the words being spoken in the audio/video? Well, thanks to HTML5 video you can, with the WebVTT format and the <track> element.

Note: "Transcribe" means "to write down spoken words as text." The resulting text is a "transcript."

WebVTT is a format for writing text files containing multiple strings of text along with metadata such as what time in the video you want each text string to be displayed, and even limited styling/positioning information. These text strings are called cues, and you can display different types for different purposes, the most common being:

subtitles
Translations of foreign material, for people who don't understand the words spoken in the audio.
captions
Synchronized transcriptions of dialog or descriptions of significant sounds, to let people who can't hear the audio understand what is going on.
timed descriptions
Text for conversion into audio, to serve people with visual impairments.

A typical WebVTT file will look something like this:

WEBVTT

1
00:00:22.230 --> 00:00:24.606
This is the first subtitle.

2
00:00:30.739 --> 00:00:34.074
This is the second.

  ...

To get this displayed along with the HTML media playback, you need to:

  1. Save it as a .vtt file in a sensible place.
  2. Link to the .vtt file with the <track> element. <track> should be placed within <audio> or <video>, but after all <source> elements. Use the kind attribute to specify whether the cues are subtitles, captions, or descriptions. Further, use srclang to tell the browser what language you have written the subtitles in.

Here's an example:

<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>

This will result in a video that has subtitles displayed, kind of like this:

Video player with stand controls such as play, stop, volume, and captions on and off. The video playing shows a scene of a man holding a spear-like weapon, and a caption reads "Esta hoja tiene pasado oscuro."

For more details, please read Adding captions and subtitles to HTML5 video. You can find the example that goes along with this article on Github, written by Ian Devlin (see the source code too.) This example uses some JavaScript to allow users to choose between different subtitles. Note that to turn the subtitles on, you need to press the "CC" button and select an option ‚ÄĒ English, Deutsch, or Espa√Īol. 

Note: Text tracks also help you with SEO, since search engines especially thrive on text. Text tracks even allow search engines to link directly to a spot partway through the video.

Active learning: Embedding your own audio and video

For this active learning, we'd (ideally) like you to go out into the world and record some of your own video and audio ‚ÄĒ most phones these days allow you to record audio and video very easily, and provided you can transfer it on to your computer, you can use it. You may have to do some conversion to end up with a WebM and MP4 in the case of video, and an MP3 and Ogg in the case of audio, but there are enough programs out there to allow you to do this without too much trouble, such as Miro Video Converter and Audacity. We'd like you to have a go!

If you are unable to source any video or audio, then you can feel free to use our sample audio and video files to carry out this exercise. You can also use our sample code for reference.

We would like you to:

  1. Save your audio and video files in a new directory on your computer.
  2. Create a new HTML file in the same directory, called index.html.
  3. Add <audio> and <video> elements to the page; make them display the default browser controls.
  4. Give both of them <source> elements so that browsers will find the audio format they support best and load it. These should include type attributes.
  5. Give the <video> element a poster that will be displayed before the video starts to be played. Have fun creating your own poster graphic.

For an added bonus, you could try researching text tracks, and work out how to add some captions to your video.

Summary

And that's a wrap; we hope you had fun playing with video and audio in web pages! In the next article, we'll look at other ways of embedding content on the Web, using technologies like <iframe> and <object>.

See also

In this module