1. Introducción

Las páginas web de la World Wide Web se concibieron como documentos multimedia, capaces de mostrar todo tipo de recursos gráficos y de audio. Ha llegado el momento de empezar a trabajar con ellos.

2. Insertar un video

La inserción de vídeos en una página web adolece de un problema distinto al de las imágenes. Los diferentes contenedores de vídeo y formatos hacen que, a veces, sea complejo asegurarnos de que toda nuestra audiencia sea capaz de visualizar el contenido que vamos a mostrar.

El contenedor de vídeo es el tipo de archivo que va contener el vídeo, las pistas de audio y otra información necesaria poder mostrar el vídeo correctamente. Hay muchos contenedores diferentes, como MPEG-4 (archivos .mp4), Flash (.flv o .f4v), Ogg Vorbis (archivos .ogg), WebM (archivos .webm) o AVI (extensión .avi).

Cada uno de esos contenedores tiene sus ventajas y sus inconvenientes, es más abierto o presenta las limitaciones propias del software propietario.

Dentro de cada contenedor de vídeo se insertará el vídeo en cuestión. Dado el tamaño que suele ocupar una pequeña porción de vídeo, todos los contenedores almacenan el contenido con algún tipo de compresión. Es decir, el vídeo está codificado con algún método. Esta compresión se realiza mediante un codec. Lo mismo sucede con el flujo de audio; también estará comprimida con algún codec de audio. Así, en cada contenedor podemos encontrar uno o varios flujos de video y audio, cada uno codificado con un método diferente. Si nuestro ordenador no dispone de los codec adecuados, nos encontraremos con que no somos capaces de visualizar o escuchar el material en cuestión.

En resumen, el vídeo y el audio están codificados con un formato concreto y, a su vez, todo ello está insertado en un formato de archivo contenedor. Dentro de un formato contenedor no siempre nos encontraremos la misma codificación.

Todo esto genera una combinatoria enorme de formatos a los que hay que incorporar la variable del navegador. Cada navegador en la actualidad es capaz de reproducir un número concreto de formatos. A día de hoy, casi todas las nuevas versiones de los navegadores son capaces de reproducir vídeo en formato WebM. El formatoOgg Vorbis, por ejemplo, una muy buena alternativa por ser libre, en la actualidad no funcionaría en Internet Explorer ni en Safari.

2.1. Tamaño del video

La elección del video que colguemos en nuestra web debe tener en cuenta el tamaño del archivo, ya que un tamaño demasiado grande hará que la carga sea muy lenta y que muchos de los usuarios de nuestra web se cansen de esperar y no vean el video.

Hay muchos conversores de video gratuitos que nos ayudaran a elegir el formato adecuado de nuestro video y el que menos ocupe.

2.2. Etiqueta video

Una vez que tenemos el vídeo en un formato adecuado, podemos insertarlo en la página web mediante el elemento HTML <video>. Su estructura es muy similar a la que empleábamos con las imágenes, aunque en este caso sí lleva etiqueta de cierre.

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

La ruta del vídeo debe ser la que corresponda (en nuestro ejemplo, está colocado dentro de una carpeta llamada video).

El ejemplo anterior no se vería correctamente en Internet Explorer porque no soporta el formato de video seleccionado, para esto la etiqueta video ofrece una solución alternativa, para evitar estos inconvenientes de formatos, que consiste en ofrecer el vídeo en varios formatos, para que sea el propio navegador el que muestre el más adecuado.

La etiqueta se escribiría de la siguiente manera:

<video>
<source src="video/fireworks_reducido.mp4" type="video/mp4" />
<source src="video/fireworks_reducido.ogg" type="video/ogg" />
<source src="video/fireworks_reducido.webm" type="video/webm" />
</video>

Este ejemplo concreto se reproduciría perfectamente en la mayor parte de los navegadores actuales.

2.3. Dimensiones del vídeo

Como sucedía con las imágenes, en un vídeo podemos indicar su anchura y altura mediante los valores width y height. De hecho es recomendable hacerlo, para que el navegador sepa de antemano el espacio que debe destinar al vídeo. Por tanto, este ejemplo es más adecuado que el anterior:

<video src="video/fireworks_reducido.webm" width="300" height="208"></video>

Los valores que emplearemos serán los que utilizamos al crear el vídeo.

2.4. Más parámetros

Hay otros parámetros que resultan útiles para la reproducción del vídeo:

• controls: si queremos que se muestren los controles que permiten pararlo, reproducirlo, etc. Basta con insertar ese término, sin más valores.
• autoplay: al indicar este valor, el vídeo se reproducirá en cuanto esté listo.
• preload: hace que el vídeo se empiece a cargar en cuanto se accede a la página. Por el contrario, indicando preload="none", no se cargará hasta que el usuario haga clic en el vídeo para su reproducción. Esta segunda opción es muy útil, si el vídeo no es el recurso fundamental de la página y vamos a tener personas que no estén interesadas en verlo, ya que nos ahorrará mucho ancho de banda.
• loop: indicándolo conseguiremos que el vídeo se reproduzca cíclicamente. Si no indicamos nada, al terminar su reproducción se detendrá.
• muted: el vídeo no tendrá sonido al comenzar.

Con todo esto podríamos definir lo que harían estos ejemplos:

<video src="video/fireworks_reducido.webm" width="300" height="208" autoplay controls></video>

Se carga el vídeo y se reproduce inmediatamente, mostrando los controles.

<video src="video/fireworks_reducido.webm" width="300" height="208" preload controls></video>

Se muestran los controles, el vídeo se precarga, pero no se reproduce hasta que el usuario pulsa el botón de reproducción.

<video src="video/fireworks_reducido.webm" width="300" height="208" preload="none" controls></video>

Igual que el anterior, pero no se precarga hasta que el usuario hace clic.

3. Insertar un video externo

Una vez que hemos visto el método más complejo, pero que nos da más autonomía, analizaremos la alternativa de insertar un vídeo que previamente hayamos ubicado en una página web de vídeos como Youtube, Vimeo o cualquiera de sus alternativas.

Insertar un recurso externo en nuestra página web tiene muchas ventajas:

• No ocuparemos el espacio de nuestro servidor, ni consumiremos nuestro ancho de banda; el recurso estará alojado en todo momento en el otro servidor.
• Estos servidores especializados suelen proporcionar más velocidad de descarga que el nuestro propio, por lo que en el caso de vídeos se reproducirán de forma más fluida.
• Cualquier cambio o actualización en el recurso se mostrará inmediatamente en nuestra página, sin necesidad de cambios.

Esto último es el único inconveniente de este método: que en cualquier momento, de forma unilateral, el propietario del material puede optar por cambiarlo o retirarlo, con lo que perderíamos el acceso. No obstante, si somos los propietarios, esto deja de ser un inconveniente.

Técnicamente lo que hacemos es similar a crear una pequeña ventana dentro de nuestra página web, para que en su interior se muestre un material que está alojado en otro servidor. Para ello se suelen emplear dos etiquetas: <iframe> es la más habitual en la actualidad y lo que hace es crear un pequeño marco en el que se muestra cualquier recurso o página web; la otra opción es el elemento <object>, que actúa de forma similar, aunque menos versátil. Es el otro servidor el que decide qué método empleará, por lo que no nos debemos preocupar, ya que sólo tendremos que copiar y pegar el código HTML que genere el servidor.

Para insertar un video de Youtube en una página web seguiríamos los siguientes pasos:

1. Accedemos a Youtube y seleccione un vídeo.

2. Hacemos clic en el botón Compartir. La dirección que aparece se puede emplear en diferentes sitios, como blogs, herramientas sociales,etc.

3. Nosotros hacemos clic en el botón Insertar que aparece más abajo. Copiamos el pequeño código HTML que se despliega; será similar a esto:

<iframe width="853" height="480" src="http://www.youtube.com/embed/r7D4asQzddsA-U?rel=0" frameborder="0" allowfullscreen></iframe>

4. Lo pegamos en nuestra web y ya tendríamos el vídeo.

Nota: El enlace es de ejemplo y no conduce a ningún video.

4. Insertar audio

La gestión de audio para utilizarlo en Internet es similar a la que hacemos con el vídeo. Podemos insertar un archivo de audio en nuestra página mediante el elemento HTML <audio>, podemos incrustar archivos de audio externos en aquellas páginas que lo permitan y, por supuesto, podemos realizar enlaces a archivos mp3, ogg, wav, etc. para que se descarguen en el ordenador del usuario y que los interprete con sus propias aplicaciones.

<audio src="podcast.mp3" controls autoplay>

Si optamos por el modelo externo, buscaremos un servidor que contenga esos archivos de audio y permita su inserción. A veces encontraremos el término incrustar o embeber o embed, en inglés. 

Ha llegado el momento de que demuestres lo aprendido.

• Crea un nuevo documento HTML y guárdalo como multimedia.htm.
• Crea toda la estructura básica del documento, recuerda: <!DOCTYPE html>, <html>,<head>... Puedes revisar el primero que hiciste.
• Añade las etiquetas meta para el autor, descripción y palabras claves.
• Añade la etiqueta de título con el texto "Multimedia".
• Hay muchas sitios web que permiten visualizar vídeos y que al mismo tiempo permiten compartirlos, el más utilizado en YouTube, pero hay otros como Dalealplay, Dailymotion...Inserta dos vídeos en el documento de dos webs diferentes. No son válidos los vídeos de YouTube.
• Guarda el documento multimedia.htm y súbelo a la plataforma.