Audio y video para una página Web de Internet

El sonido y el video tienen un papel cada vez más importante en el diseño de sitios, ya que pueden ofrecer servicios deseados por los usuarios como poder descargar una muestra de un número musical o del último video de moda.

Antes de instalar este tipo de archivos recuerde que los formatos sin comprimir pueden ser muy grandes y nada recomendados para descargarse desde la Web.

Existen formatos de archivos para la Web con algoritmo de compresión complejos que mejoran en gran medida esta cuestión.

Incluso estos formatos permiten iniciar la reproducción descargando sólo parte del archivo mientras se muestra el contenido al usuario, y continuar con la reproducción en un segundo plano.

Se recomienda no reproducir los archivos de audio y video automáticamente cuando un usuario visita un sitio Web.

Opte por hacer esta reproducción manual y pase el control al usuario.

NOTA:
Los contenidos de audio y video se deben comprimir siempre para incorporarlos al sitio.

El formato de audio más utilizado es el MP3 (MPEG Layer 3), aunque también son comunes MIDI (Musical Instrument Digital Interface) y WAV (Windows Waveform).

Entre los programas de edición de audio encontrará Sony Sound Forge a nivel profesional y Sony Sound Forge Audio Studio para usuario del nivel básico. Audacity es un programa de edición de audio de código abierto, potente y multiplataforma, además de gratuito.

Los formatos de video más utilizado son AVI (Audio Video Interleaved), MPEG (Motion Picture Experts Group), MOV (Películas QuickTime) y RealOne Player.

Apple QuickTime permite editar y exportar audio, aunque para proyectos más complejos los usuarios de Macintosh utilizan Apple Final Cut Pro.

Es cada vez más popular Adobe After Effects para crear gráficos de películas y efectos especiales.

Cómo insertar audio y video en una página Web

Tag audio

La etiqueta <audio>, es una de las nuevas etiquetas del lenguaje HTML5, que permite reproducir un archivo de audio

Actualmente se pueden reproducir tres tipos de formato de audio, mp3, wav y ogg. Aunque también depende del navegador que se permita su reproducción.

La siguiente lista muestra los formatos y su reproducción en los diferentes navegadores

Navegador	MP3	Wav	Ogg
Internet Explorer	SI	NO	NO
Chrome	SI	SI	SI
Firefox	SI	SI	SI
Safari	SI	SI	NO
Opera	NO	SI	SI

La sintaxis de la etiqueta es la siguiente.

<audio autoplay controls loop muted preload="valor" src="valor">
	Texto para navegadores que no soportan audio…
</audio>

Entre los atributos de la etiqueta encontramos los siguientes.

src

El atributo permite especificar la dirección URL del recurso al cual se quiere acceder, siendo en este caso el archivo que contiene el audio a cargar en el documento web.

Se ha de especificar el archivo de audio con el formato adecuado para el navegador donde se vaya a reproducir el audio.

Como esta opción no es predecible por el desarrollador y depende del usuario final. Se recomienda utilizar la etiqueta <source>, dentro de la etiqueta de audio, para especificar diferentes formatos, de forma que el navegador utilizado cargue la primera que sea capaz de reconocer.

autoplay

El atributo permite especificar que el archivo de audio sea reproducido automáticamente, al ser el archivo cargado por el navegador.

Es un atributo booleano, por tanto para que se ejecute el audio simplemente se ha de especificar el atributo en la etiqueta.

controls

El atributo es booleano, por lo que al ser especificado en la etiqueta, permite que se visualicen los controles de control de audio, entre los que se encuentran, el botón de reproducción, pausa, búsqueda y volumen.

loop

Si se especifica el atributo, el archivo de audio es reproducido automáticamente en modo bucle, cuando finalice el audio volverá a empezar de nuevo.

muted

Al especificar el atributo, el archivo de audio será cargado, pero se activara la opción de silenciar el audio.

preload

El atributo tiene tres valores posibles valores: none, auto y metadata. El atributo permite definir si se realiza una precarga inicial del archivo de audio.

Si se especifica el valor none, no se realiza ningún tipo de precarga y se espera que el usuario sea el que active el audio pulsando sobre el control correspondiente.

Si se indica el valor auto, se realiza la precarga completa del archivo de audio, para que la reproducción sea más homogénea y no se produzcan paros o saltos en la misma. Se ha de utilizar si no se compromete la velocidad de descarga entre el cliente y servidor.

Por ultimo si se especifica el valor metadata, se realiza como precarga solo la información concerniente al archivo de audio, como duración, dimensión, etc.

Se ha de tener en cuenta que para realizar una carga correcta del formato de audio, se habría de utilizar la etiqueta <source>, la cual permite realizar la carga del archivo de audio en varios formatos.

Esta última etiqueta dispone a su vez de dos atributos los cuales se habrían de especificar, cuando se utilice la misma.

Estos atributos son src, el cual permite especificar la ruta, bien absoluta o relativa al archivo de audio. Y otro atributo denominado type, el cual se utiliza para indicar el tipo MIME (Multipurpose Internet Mail Extensions) del archivo que se quiere reproducir. Entre los posibles tipos a utilizar por este último atributo se encuentran los siguientes:

Valor MIME	Audio/Video
video/ogg	Video
video/mp4	Video
video/webm	Video
audio/ogg	Audio (*.ogg)
audio/mpeg	Audio (*.mp3)

El siguiente ejercicio muestra el uso de la etiqueta en un documento web.

<!DOCTYPE HTML>
<html>
	<head>
		<title>Ejercicios prácticos HTML5</title>
		<meta charset="utf-8">
	</head>
	<body>
		<audio controls>
			<source src="Hoy.mp3" type="audio/mpeg">
			<source src="Hoy.ogg" type="audio/ogg">
			El Navegador NO SOPORTA AUDIO.
		</audio>
	</body>
</html>

El resultado del ejercicio anterior ha de ser similar al que se muestra a continuación en la imagen.

Tag video

La etiqueta <video>, es una de las nuevas etiquetas del lenguaje HTML5, que permite reproducir un archivo de video.

Actualmente se pueden reproducir tres tipos de formato de video, mp4, WebM y ogg. Aunque también depende del navegador que se permita su reproducción.

La siguiente lista muestra los formatos y su reproducción en los diferentes navegadores.

Navegador	MP4	WebM	Ogg
Internet Explorer	SI	NO	NO
Chrome	SI	SI	SI
Firefox	SI	SI	SI
Safari	SI	NO	NO
Opera	NO	SI	SI

La sintaxis de la etiqueta es la siguiente:

<video autoplay controls loop muted preload="valor" src="valor" poster="valor" width="valor height="valor">
	Texto para navegadores que no soportan video …
</video>

Entre los atributos de la etiqueta encontramos los siguientes.

height

El atributo permite especificar el alto del video que se quiere reproducir, expresando el valor en pixeles.

width

El atributo permite especificar el ancho del video que se quiere reproducir, expresando el valor en pixeles.

Se ha de tener en cuenta que para realizar una carga correcta del formato de video, se habría de utilizar la etiqueta <source>, la cual permite realizar la carga del archivo de video en varios formatos, visualizando así el navegador el primer archivo compatible.

Esta última etiqueta dispone a su vez de dos atributos los cuales se habrían de especificar, cuando se utilice la misma.

Estos atributos son src, el cual permite especificar la ruta, bien absoluta o relativa al archivo de video. Y otro atributo denominado type, el cual se utiliza para indicar el tipo MIME del archivo que se quiere reproducir. Entre los posibles tipos a utilizar por este último atributo se encuentran los siguientes:

Valor MIME	Audio/Video
video/ogg	Video
video/mp4	Video
video/webm	Video

El siguiente ejercicio muestra el uso de la etiqueta en un documento web.

<!DOCTYPE HTML>
<html>
	<head>
		<title>Ejercicios prácticos HTML5</title>
		<meta charset="utf-8">
	</head>
	<body>
		<video width="320" height="240" controls>
			<source src="hoy.mp4" type="video/mp4">
			<source src="hoy.ogg" type="video/ogg">
			Su Navegador NO SOPORTA la etiqueta VIDEO.
		</video>
	</body>
</html>

El ejemplo anterior ha de mostrar un resultado similar al que se muestra en la imagen siguiente.

Tag track

La etiqueta <track>, permite especificar subtítulos "pistas de texto", a los elementos de video y audio.

Para realizar la visualización de los mismos esta etiqueta permite la inclusión de archivos especiales que contienen el texto que se ha de visualizar mientras se reproducen los archivos multimedia.

La etiqueta se ha de incluir en el contenido de una de las etiquetas multimedia para audio o video.

La sintaxis de la etiqueta es la siguiente.

<Etiqueta Multimedia>
	<track default kind="valor" label="valor" src="valor" srclang="valor">
</Etiqueta Multimedia>

Como se puede observar la etiqueta no tiene etiqueta de cierre. Los atributos de la etiqueta <track> son los siguientes:

src

El atributo permite especificar la dirección URL del recurso al cual se quiere acceder, siendo en este caso el archivo que contiene el texto que se quiere utilizar como subtítulos.

El formato de archivo que se suele cargar es .vtt (“video track text"), es un formato especial de archivo el cual comentaremos más adelante.

default

El atributo default permite especificar cuál es el archivo de subtítulos por defecto que se ha de visualizar, en caso de existir varios archivos de subtítulos.

Es un atributo booleano, por tanto con solo especificar el atributo en la etiqueta el mismo es aplicado.

label

El atributo permite especificar entre comillas, el titulo para la pista de texto que se está cargando.

kind

El atributo permite especificar según el valor que se indique varias opciones posibles para las pistas de texto que se desean cargar. Entre los posibles valores se encuentran los siguientes.

Valor	Descripción
captions	Define la traducción de diálogos y efectos de sonido. (Aptos para personas con discapacidad auditiva.)
chapters	Define títulos de capítulos. Recomendable para navegación por recursos multimedia.
descriptions	Define una descripción textual del video que se está reproduciendo.
metadata	Define contenido usado por scripts.
subtitles	Define subtítulos. Utilizado para visualizar los subtítulos en un video

srclang

El atributo define en su valor, utilizando los códigos de lenguaje, el lenguaje utilizado en la pista de texto. El atributo es obligatorio si se utiliza en el atributo kind, el valor subtitles.

El archivo de pista de texto o subtítulos que se puede utilizar, es muy fácil de crear, ya que es un archivo de texto plano, en el cual la primera línea ha de ser

WEBVTT

Y a continuación se añade en el archivo un salto de línea y lo que se denominan “cues", que podemos definir como los intervalos de tiempo, en los cuales se ha de visualizar el texto de los subtítulos durante la reproducción del archivo multimedia.

Para crear un “cue" se ha de especificar un id, saltar a la línea siguiente y especificar a continuación un rango de tiempo con el formato siguiente:

HH:MM:SS.MMM --> HH:MM:SS.MMM

Correspondiéndose el primer valor a inicio y el segundo a final, separados por espacios en blanco y dos guiones con un símbolo de mayor.

Saltar de línea nuevamente y especificar la línea de texto que se quiere visualizar. Una vez escrita la misma, se ha de dejar una línea en blanco, para poder escribir el siguiente “cue".

Este sería un ejemplo de archivo de subtítulos con espacios de tiempo definidos en dos “cues".

WEBVTT
1
00:00:01.000 --> 00:00:10.000
Primera línea de texto de los subtítulos.

2
00:00:15.000 --> 00:00:20.000
Segunda línea de texto
En dos líneas.

… Así sucesivamente se irían añadiendo periodos de tiempo y subtítulos …

El siguiente ejemplo muestra el uso de la etiqueta <track> en un documento web, visualizando subtítulos en la reproducción de un video.

<!DOCTYPE HTML>
<html>
	<head>
		<title>Ejercicios prácticos HTML5</title>
		<meta charset="utf-8">
	</head>
	<body>
		<video width="640" height="480" controls>
			<source src="hoy.mp4" type="video/mp4">
			<track src="subtitulos.vtt" kind="subtitles" srclang="es" label="Spanish" />
			Su Navegador NO SOPORTA la etiqueta VIDEO.
		</video>
	</body>
</html>

El resultado del ejercicio anterior ha de ser similar al que se muestra en la imagen siguiente.

Tag embed

La etiqueta <embed>, permite definir un contenedor para insertar una aplicación externa o un contenido interactivo.

Es una etiqueta que no dispone de etiqueta de cierre por lo tanto solo se ha de utilizar la de apertura, especificando los atributos dentro de la misma.

La sintaxis de la etiqueta es la siguiente.

<embed src="valor" type="valor" width="valor" height="valor" />

La etiqueta hace uso de los siguientes atributos.

src

El atributo permite especificar la dirección URL del recurso al cual se quiere acceder, siendo en este caso el archivo que contiene el objeto, animación, etc. Que se quiere utilizar.

type

Sirve para especificar el tipo MIME del documento con el que se está realizando el enlace.

La sintaxis para definir esta etiqueta con el atributo types es la siguiente:

<embed src="valor" type="ValorMime" />

Entre los tipos se puede encontrar el de objetos como flash “application/xshockwave-flash”, entre otros.

width

El atributo permite especificar el ancho que ha de tener el contenedor del objeto que se quiere insertar, expresando el valor en pixeles.

height

El atributo permite especificar el alto que ha de tener el contenedor del objeto que se quiere insertar, expresando el valor en pixeles.

El siguiente ejemplo muestra el uso de la etiqueta en un documento web, visualizando una animación realizada en flash.

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Ejercicios prácticos HTML5</title>
	</head>
	<body>
		<header>
		<p>Inserción de objeto embebido FLASH</p>
		</header>
		<embed src="header.swf" type="application/x-shockwave-flash">
	</body>
</html>

El resultado del ejercicio anterior ha de ser similar al que se muestra en la imagen siguiente.