Ediciones ENI Editorial | líder en informática
El multimedia
La etiqueta <video>
La etiqueta <video> ha dado mucho de qué hablar ya que permite añadir, fácilmente, un vídeo en nuestra página, lo que no era el caso con las antiguas versiones de HTML
Es posible configurar el navegador para que cargue directamente el vídeo y lo lea (autoplay). Si se incluye la propiedad controls en la etiqueta vídeo, permite mostrar automáticamente botones para gestionar el vídeo, posicionar la lectura en el lugar deseado, iniciar o pausar la reproducción, poner el vídeo en pantalla completa o ajustar el sonido.
<video controls autoplay src='../video/danza.mp4'></video> El problema que podemos encontrar con este tipo de código HTML es que no todos los navegadores reconocen los archivos codificados en MP4.
Será conveniente, por tanto, codificar el vídeo en distintos formatos para que se muestre correctamente en todos los navegadores.
Como ocurre con el audio, los navegadores permiten leer distintos formatos de vídeo, pero no existe ningún formato de vídeo que se reconozca en todos los navegadores.
Los formatos que se utilizan son MP4, OGV y WebM.
La etiqueta <video> puede contener distintas fuentes distintas (de hecho, el mismo vídeo pero en distintos formatos). De este modo podrá leerse en todos los navegadores.
A continuación se muestra una tabla que muestra la compatibilidad de los formatos de vídeo con los distintos navegadores.
|
Navegador |
MP4 |
OGV |
WebM |
|
Chrome |
Sí |
Sí |
Sí |
|
Firefox |
No |
Sí |
Sí |
|
Edge |
Sí |
No |
No |
|
Opera |
No |
Sí |
Sí |
|
Safari |
Sí |
No |
No |
Esta tabla se muestra a título informativo, aunque podría cambiar. De todos modos, es conveniente...
Los codecs de vídeo
Los formatos MP4, OGV o WebM son distintos formatos para implementar un vídeo en un archivo. La codificación es diferente, así como la calidad y el peso de los archivos.
Existe una infinidad de codecs, cada uno con sus ventajas e inconvenientes.
Por ejemplo, la informática siempre se debate entre calidad y rapidez. Si el vídeo debe comprimirse para poder utilizarlo en Internet, tendremos que hacerlo de manera que mantenga cierta calidad, aunque la lectura tenga que ser lo más ligera posible. Esto es lo que permiten hacer los codecs anteriores. Por el contrario, si el archivo de vídeo debe utilizarse en un espectáculo en vivo y el vídeo debe entrelazarse con la música como hacen ciertas herramientas de VJing (un DJ pasa discos, el VJing consiste en pasar videos), será preferible que el archivo no esté comprimido.
Un archivo comprimido requiere tiempo de procesamiento en el ordenador para mostrarse correctamente. Si lo único que hace el ordenador es leer el vídeo, puede leerlo y decodificarlo de manera muy rápida y fluida. Por el contrario, si el equipo tiene que leer el vídeo, descomprimirlo, analizar el sonido y modificar los parámetros del vídeo para que "pegue" bien con el sonido, entonces será preferible que el archivo de vídeo no esté comprimido. Ocupará mucho más espacio...
La etiqueta <audio>
Para reproducir un sonido en HTML5 disponemos de la etiqueta <audio>.
Es posible utilizarla parametrizándola para que muestre los botones de control para reproducir, poner en pausa, detener o incluso cambiar el volumen de la pista de audio.
La etiqueta <audio> posee una propiedad preload que permite cambiar el comportamiento de la precarga automática del sonido. Es posible, también, agregar el parámetro autoplay para que el sonido empiece su reproducción automáticamente una vez se cargue la página, o incluso configurar el parámetro loop para que el sonido se reproduzca en bucle.
<audio preload="auto" src="../audio/JohnDunbarTheme.mp3"
autoplay loop ></audio> Si bien puede resultar interesante tener algo de sonido cuando el ratón pasa por encima de algún elemento como un botón, por ejemplo, el usuario no apreciará, necesariamente, el tener una música que se reproduzca sin su permiso en cuanto visite el sitio.
Para mostrar los botones de control de sonido basta con agregar el valor booleano controls.
<audio preload="auto" src="../audio/JohnDunbarTheme.mp3" controls >
</audio> El siguiente ejemplo permite reproducir un sonido personalizando el lector de audio.
<audio preload="auto" id="sonido">
<source...Los codecs de audio
Los navegadores no saben leer todos los formatos de audio:
|
Navegador |
WAV |
MP3 |
OGG |
|
Chrome |
Sí |
Sí |
Sí |
|
Firefox |
Sí |
No |
Sí |
|
Edge |
No |
Sí |
No |
|
Opera |
Sí |
No |
Sí |
|
Safari |
Sí |
Sí |
No |
Esta lista se muestra a modo de referencia, aunque puede variar con el tiempo, dado que existen nuevos codecs que hacen su aparición sucesivamente.
A título informativo, el formato WAV es un formato no comprimido que recupera una señal de audio con una mejor calidad que el resto de formatos. Por el contrario, aumenta el tamaño del archivo, que podrá ser hasta diez veces más grande.
Dado que los navegadores no trabajan con un formato de audio en común, será preciso generar los archivos de audio con tres codecs para estar seguro de que el sonido es compatible con todos los navegadores.
El siguiente sitio de la Wikipedia agrupa en una única página gran parte de los codecs de audio, vídeo y demás utilizados con mayor frecuencia: http://en.wikipedia.org/wiki/List_of_codecs