Etiquetas AUDIO y VIDEO (HTML 5)

La versión 5 de HTML incorpora nuevas etiquetas para incluir vídeos y audio en un documento HTML. Estas nuevas etiquetas nos permitirán tanto incluir un reproductor con un archivo de audio / video, cómo conectarlo con unna fuente de audio o vídeo en directo.

Tabla de contenido

• · Insertar sonido
• · Insertar vídeo
• · El formato de los archivos
• · Navegadores que no soporten HTML 5

Insertar sonido

Para insertar un sonido se utiliza la etiqueta <audio>, que tiene los siguientes atributos:

autobuffer - Cargar automáticamente el archivo ( true / false )
autoplay - Reproduce automáticamente el archivo
controls - Mostrar controles de reproducción
height - Altura del reproductor en píxels
loop - Reiniciar la reproducción al finalizar
type - Tipo de archivo ( audio/mp3, video/ogg, ... )
src - Url del archivo
width - Ancho del reproductor en píxels

Ejemplo:
 

000	<audio src="mp3/sonido.mp3" type="audio/mp3" controls />  Maximizar   Seleccionar   XML

 

Insertar vídeo

Para insertar un archivo de vídeo o enlazar con un vídeo en directo, usaremos <video>, que tiene los mismos atributos que <audio>, veamos un ejemplo:
 

000	<video src="video/presentacion.ogg" autoplay />  Maximizar   Seleccionar   XML

 

El formato de los archivos

Inicialmente el estándar HTML 5 recomendaba utilizar los formatos de audio y vídeo OGG Vorbis, sin embargo esto se cambió por presiones pasando a recomendar simplemente que todos los navegadores soporten el mismo formato. Debido a la recomendación inicial de usar OGG, todos los navegadores que han implementado las etiquetas <audio> y <video> lo han hecho soportando OGG, algunos cómo Opera han incluido formatos adicionales.

Pese a que todos los navegadores soportan OGG, HTML 5 permite indicar diferentes archivos con codificaciones alternativas para otros navegadores:
 

000 001 002 003

<video controls>    <source src="video.ogg" type="video/ogg" />    <source src="foo.mp4" type="video/mp4" />  </video>   Maximizar   Seleccionar   XML

 

Navegadores que no soporten HTML 5

Pese a que si bien en la actualidad no todos los navegadores soportan HTML 5 en su última versión, si que soportan casi todos las etiquetas <video> y <audio>. De todas formas, para las personas que no utilizan la última versión del navegador podemos insertar un reproductor de vídeo Flash cómo alternativa de la siguiente manera:
 

000 001 002

<video src="video.ogg" controls>     <!--  Versión para navegadores sin HTML 5 --> </video>    Maximizar   Seleccionar   XML