• 20 hours
  • Easy

Free online content available in this course.

course.header.alt.is_certifying

Got it!

Last updated on 2/6/20

Vídeo y audio

Log in or subscribe for free to enjoy all this course has to offer!

Desde la llegada de YouTube y Dailymotion, ahora ver vídeos en páginas web se ha convertido en algo común. Hay que decir que la llegada de la banda ancha ha ayudado a democratizar los vídeos en Internet.

Hasta ahora, sin embargo, no se proporcionaba ninguna etiqueta HTML para gestionar vídeos. En su lugar, había que utilizar un complemento como, por ejemplo, Flash. Incluso a día de hoy, Flash es de lejos la manera más usada para ver vídeos en YouTube, Dailymotion, Vimeo y en otras páginas. Pero usar un complemento tiene varios inconvenientes: te hace dependiente de los que administran el complemento (en este caso, de la empresa Adobe, que es el dueño de Flash), no siempre puedes controlar su funcionamiento, hay fallos de seguridad ocasionales, etc. Al final, es bastante engorroso.

Por esta razón, se crearon dos nuevas etiquetas estándar en HTML5: <video> y <audio>.

Formatos de vídeo y audio

Cuando hablamos de imágenes y de la etiqueta <img>, comenzamos rápidamente a repasar varios formatos de imagen (JPEG, PNG, GIF, etc.) Para vídeo y audio, haremos lo mismo, pero es más complicado.

De hecho, la manera en la que funcionan los vídeos es tan compleja que podría completar un curso entero. Pero aquí estamos hablando sobre HTML, no vamos a pasar las próximas noches explorando la complejidad de la codificación de vídeo. Así que voy a simplificar las cosas y solo voy a decirte lo que necesitas saber.

Formatos de audio

Para reproducir música o cualquier sonido, se pueden utilizar muchos formatos. La mayoría de ellos son comprimidos (como lo son las imágenes en JPEG, PNG y GIF), lo que reduce su tamaño de almacenamiento:

  • MP3: ¡es imposible que no hayas oído hablar de él! Es uno de los más antiguos y también uno de los formatos más compatibles (todos los dispositivos pueden leer MP3), así que aún se utiliza mucho hoy en día.

  • AAC: lo utiliza principalmente Apple con iTunes, y es un formato de buena calidad. Los iPod, iPhone y iPad pueden leerlo sin problemas.

  • OGG: el formato Ogg Vorbis se utiliza ampliamente en el mundo del software libre y, en particular, en Linux. El formato tiene la ventaja de ser libre, en otras palabras, de no estar protegido por ninguna patente.

  • WAV (formato sin comprimir): este formato debería evitarse cuando sea posible, puesto que los archivos que utiliza son muy pesados. Es básicamente el equivalente a Bitmap (BMP) en audio.

Ningún navegador maneja todos estos formatos al mismo tiempo. La compatibilidad con MP3 y OGG es lo principal a tener en cuenta.

Navegador

MP3

OGG

Internet Explorer

-

Chrome

Firefox

-

Safari

-

Opera

-

¿No hay un formato «ideal» que reconocen todos los navegadores?

¡Pues no! Afortunadamente, podemos proporcionar a los navegadores diferentes formatos y dejarles que seleccionen el que puedan leer.

Formatos de vídeo

El almacenamiento de vídeo es mucho más complejo. Necesitamos tres elementos:

  • Un formato contenedor: de alguna manera es como una caja que se utiliza para contener los dos elementos siguientes. El tipo de contenedor normalmente se puede reconocer por la extensión del archivo. AVI, MP4, MKV, etc.

  • Un códec de audio: es el formato de sonido del vídeo, que normalmente está comprimido. Los hemos visto y vamos a utilizar los mismos: MP3, AAC, OGG, etc.

  • Un códec de vídeo: es el formato que comprime las imágenes. Aquí es donde las cosas se complican, dado que estos formatos son complejos y su uso no siempre es libre. Los principales que hay que conocer para Internet son:

    • H.264: ahora es uno de los formatos más potentes y más utilizados... pero no es 100 % libre. De hecho, puede usarse de forma libre en algunos casos (como en streaming de vídeo en una página web personal), pero la incertidumbre legal lo hace arriesgado de utilizar a gran escala.

    • Ogg Theora: un códec que es libre y no está protegido por copyright, pero menos potente que H.264. Aunque es bastante conocido en Linux, tienes que instalar software para reproducirlo en Windows.

    • WebM: otro códec más reciente y libre, que no está protegido por copyright. Provisto por Google, ahora es el principal competidor de H.264.

¿Qué códecs de vídeo son compatibles con qué navegadores? Una vez más, verás que es un poco lío.

Navegador

H.264

Ogg Theora

WebM

Internet Explorer

-

Chrome

-

Firefox

-

Safari

-

-

Opera

De nuevo, ningún formato realmente destaca. Es recomendable proporcionar cada vídeo en varios formatos para que se pueda reproducir en tantos navegadores como sea posible.

Para convertir vídeo en estos formatos, recomiendo este excelente programa gratuito, Miro Video Converter, que puedes descargar a través de la dirección web haciendo clic en el nombre.

Tan solo arrastra y suelta tu vídeo en la ventana del programa y selecciona el formato de salida deseado. ¡Te permitirá crear varias versiones del vídeo!

Insertar un elemento de audio

En teoría, solo necesitas una etiqueta para reproducir un sonido en tu página:

<audio src="cancion.mp3"></audio>

En la práctica, es un poco más complicado.
Si pruebas este código... ¡no verás nada! De hecho, el navegador solo descargará información general del archivo (llamados metadatos), pero no ocurrirá nada en particular.

Puedes añadir los siguientes atributos a la etiqueta:

  • controls: para añadir los botones de «Reproducir» y «Pausar» y la barra de desplazamiento. Puede parecer fundamental, y puede que te preguntes por qué no lo incluyen por defecto, pero algunas páginas web prefieren crear sus propios botones y controlar la reproducción con JavaScript.

  • width: para cambiar el ancho de la herramienta de reproducción de audio.

  • loop: la música se reproducirá en bucle.

  • autoplay: la música se reproducirá cuando la página esté cargada. No te excedas con esto. ¡Una página web que reproduce música por sí misma cuando está cargada normalmente es irritante!

  • preload: especifica si la música puede precargarse cuando la página esté cargada o no. Este atributo puede llevar los siguientes valores:

    • auto (por defecto): el navegador decide si cargar previamente toda la música, solo los metadatos o nada.

    • metadata: solo carga los metadatos (duración, etc.).

    • none: no hay carga previa. Útil si no quieres malgastar ancho de banda de tu página web.

Estará mejor con controles, así que ¡vamos a añadirlos!

<audio src="hype_home.mp3" controls></audio>

La apariencia del reproductor de audio varía de un navegador a otro. La siguiente imagen muestra, por ejemplo, el reproductor de audio de Google Chrome

El reproductor de audio de Google Chrome
El reproductor de audio de Google Chrome

¿Por qué abrir la etiqueta si vas a cerrarla inmediatamente después?

Te permite visualizar un mensaje o proporcionar una solución alternativa para los navegadores que no soportan esta nueva etiqueta. Por ejemplo:

<audio src="hype_home.mp3" controls>¡Actualiza tu navegador!</audio>

Los que tengan un navegador reciente no verán este mensaje. Sin embargo, los navegadores antiguos que no entienden la etiqueta mostrarán el texto.

Hemos visto que algunos navegadores no soportan MP3. ¿Cuál es la solución?

Tienes que incluir varias versiones del archivo de audio. En este caso, vamos a hacer nuestra etiqueta de esta manera:

<audio controls>
    <source src="hype_home.mp3"></source>
    <source src="hype_home.ogg"></source>
</audio>

El navegador tomará automáticamente el formato que reconozca.

Insertar un vídeo

Solamente necesitas una única etiqueta <video> para insertar un vídeo en la página:

<video src="sintel.webm"></video>

Pero puede que te sientas de nuevo decepcionado si solo utilizas este código. ¡No hay controles para empezar el vídeo!

Vamos a añadir algunos atributos (la mayoría de ellos son los mismos que para la etiqueta <audio>):

  • poster: se muestra otra imagen en lugar de la del vídeo hasta que se reproduzca. Por defecto, el navegador toma el primer fotograma del vídeo, pero como a menudo es un fotograma negro o un fotograma que no representa el vídeo, te recomiendo crear uno. Puedes hacer simplemente una captura de imagen de cualquier momento del vídeo.

  • controls: para añadir los botones de «Reproducir» y «Pausar» y la barra de desplazamiento. Puede parecer fundamental, pero algunas páginas web prefieren crear sus propios botones y controlar la reproducción con JavaScript. En nuestro caso, ¡será más que suficiente!

  • width: para cambiar el ancho del vídeo.

  • height: para cambiar la altura del vídeo.

  • loop: el vídeo se reproducirá en bucle.

  • autoplay: el vídeo se reproducirá cuando cargue la página. Una vez más, no te excedas con esto. ¡Una página web que ejecuta algo por su cuenta cuando carga es, por lo general, irritante!

  • preload: especifica si el vídeo puede precargarse cuando la página cargue o no. Este parámetro puede tener los siguientes valores:

    • auto (valor por defecto): el navegador decide si precargar el vídeo entero, solo los metadatos o nada.

    • metadata: solo carga los metadatos (duración, tamaño, etc.).

    • none: no hay carga previa. Útil si quieres evitar malgastar ancho de banda de la página web.

Aquí podéis ver algo de código que está un poco más completo:

<video src="sintel.webm" controls poster="sintel.jpg" width="600"></video>

La siguiente imagen muestra el resultado.

Un vídeo con las opciones de reproducción y un tamaño definido
Un vídeo con las opciones de reproducción y un tamaño definido

¿Por qué abrir y cerrar inmediatamente después de la etiqueta?

La respuesta es la misma que para la etiqueta <audio>. Te permite visualizar un mensaje o incluir una solución alternativa (en Flash) si el navegador no reconoce la etiqueta:

<video src="sintel.webm" controls poster="sintel.jpg" width="600">
    ¡Es hora de actualizar el navegador!
</video>

¿Cómo complaces a todos los navegadores si todos ellos reconocen diferentes formatos de vídeos?

Utilizas la etiqueta <source> dentro de la etiqueta <video> para incluir diferentes formatos. El navegador elegirá el que reconozca.

<video controls poster="sintel.jpg" width="600">
    <source src="sintel.mp4" ></source>
    <source src="sintel.webm" ></source>
    <source src="sintel.ogv" ></source>
</video>

¿Cómo se visualiza el vídeo en pantalla completa?

Por el momento no es posible. De hecho, sí que hay una manera en Firefox, pero está un poco escondida: tienes que hacer clic con el botón derecho en el vídeo y seleccionar «Pantalla completa».

No hay ninguna forma de forzar la pantalla completa, ni siquiera en JavaScript. Es comprensible, dado que algunas páginas web podrían perturbar considerablemente la navegación al mostrar vídeos en pantalla completa sin preguntar antes al usuario si realmente lo quieren.

¿Cómo puedo proteger mi vídeo? ¡No quiero que se pueda copiar fácilmente!

No es posible. Las etiquetas no se diseñaron para limitar o impedir la descarga. Es bastante lógico cuando lo piensas: para que los usuarios puedan ver el vídeo, tendrán que descargarlo de todas formas, de una u otra manera.

Así que no creas que puedes impedir que el vídeo sea descargado mediante esta técnica.

En resumen

  • Antes no solía ser posible insertar música o vídeo en HTML. Tenías que utilizar un complemento como Flash.

  • Desde HTML5, se han introducido las etiquetas <audio> y <video> y permiten reproducir música y vídeo sin necesidad de complementos.

  • Hay varios formatos de audio y vídeo. En particular, deberías conocer:

    • para audio: MP3 y Ogg Vorbis;

    • para vídeo: H.264, Ogg Theora y WebM.

  • Ningún formato es reconocido por todos los navegadores: tienes que incluir música o vídeo en diferentes formatos para satisfacer a todos los navegadores.

  • Tienes que añadir el atributo controls a las etiquetas <audio> y <video> para permitir que los usuarios empiecen o paren un medio audiovisual.

  • Estas etiquetas no se han diseñado para impedir la descarga de música y vídeo. No puedes proteger tus contenidos audiovisuales de ser copiados.

Example of certificate of achievement
Example of certificate of achievement