Ver más en http://www.francescperez.net/templates/original/html/si/articulos/art_2_html5m.html

1. Video y Audio en HTML5
Francesc Pérez Fdez
1.
Vídeo en HTML5
•
HTML5 ha introducido un elemento para insertar y reproducir video en un documento HTML. El elemento <video>
utiliza etiquetas de apertura y cierre.
•
Creando nuestro propio reproductor de vídeo:
Ø Utilizaremos un documento HTML con la estructura siguiente.
VIDEO
Archivo externo
estilo
Archivo externo
javascript
Tamaño reprod.
Los formatos OGG y MP4
son contenedores de audio
y vídeo. OGG utiliza
Thedora para codificar
vídeo y Vorbis para el
audio. MP4 utiliza H.264
para codificar vídeo y AAC
para el audio. Ahora mismo,
OGG es reconocido por
Firefox, Chrome y Opera;
MP4 por Safari, IE y Crome.
BOTONES
BARRA
BODY
SECTION
NAV

2. Video y Audio en HTML5
1.
Francesc Pérez Fdez
Vídeo en HTML5
Ø
HTML5 también incorpora otros atributos relevantes además de los mostrados ene l ejemplo anterior:
Ø controls: muestra controles de vídeo provistos por el navegador por defecto.
Ø autoplay: el navegador empezará a reproducir el vídeo tan pronto como pueda
Ø loop: el navegador comenzará a reproducir el vídeo tan pronto como llegue al final.
Ø poster: el navegador mostrará una imagen mientras esperamos a que el vídeo sea reproducido.
Ø preload: este atributo puede recibir tres valores:
ü None: indica que el vídeo no debe ser cacheado
ü Metadata: recomienda al navegador que trate de recoger información acerca de la fuente.
ü Auto: sugiere al navegador descargar el archivo tan pronto como sea posible.

3. Video y Audio en HTML5
1.
Francesc Pérez Fdez
Vídeo en HTML5
Ø
Barra de progreso
inicializada a cero
Damos estilo a los elementos HTML5.
Se utiliza para superponer
dos elementos
400px
100 px
720px
20 px
600 px

4. Video y Audio en HTML5
1.
Francesc Pérez Fdez
Vídeo en HTML5
Ø
Damos funcionalidad al reproductor.
2. Tamaño máximo de la barra
de progreso.
3. Referenciamos cada uno de
los elementos del reproductor.
4. Cuando el usuario haga click
sobre el botón reproducir se
ejecutará la función presionar().
5. Cuando el usuario haga click
sobre la barra de progreso se
ejecutará la función mover().
11. Si la reproducción ha
finalizado inicializamos la barra
de progreso, cambiamos el texo
del botón y cesamos de
ejecutar la función estado
9. Si la reproducción no ha
finalizado calculamos el tamaño
de la barra de progreso.
10. Cálculo tamaño barra progreso:
Valor del tiempo en el que se
encuentra el vídeo por el tamaño
máximo de la barra, entre la
duración total del vídeo.
8. Se ejecuta la función estado cada
segundo mientras el vídeo es
reproducido.
6. Si el reproductor no está
pausado ni finalizado se ejecuta
el método pause() y el texto del
botón es cambiado
7. En cualquier otro estado el
reproductor ejecuta el método 12. Si el usuario clica sobre la
barra de progreso y la
play() y el texto del botón es
reproducción no ha finalizado
cambiado
ni parado se calcula el nuevo
tiempo y el tamaño de la barra
de progreso
1. Cuando se cargue la ventana, el
navegador ejecutará la función iniciar().
Posición clic del
ratón
Distancia entre el
extremo izquierdo
de la barra de
progreso y el lado
izquierda de la
página web

5. Video y Audio en HTML5
Francesc Pérez Fdez
1.
Vídeo en HTML5
•
A parte de paused y ended existen otros propiedades JS que permiten reunir información acerca del estado
del reproductor:
Ø paused: retorna true si la reproducción está pausada o no ha comenzado.
Ø ended: retorna true si la reproducción ha finalizado.
Ø duration: duración de la reproducción en segundo.
Ø currentTime: tiempo de ejecución de la reproducción
Ø error: retorna el valor del error ocurrido
Ø buffered: ofrece información sobre la parte del archivo que ya fue cargada en el buffer.
•
En el diseño del reproductor solo hemos tenido en cuenta el evento onload. HTML5 incorpora nuevos eventos
relacionados con la reproducción de vídeo:
Ø progress: evento disparado periódicamente para informar acerca del progreso de la descarga del
medio. Información disponible a través del atributo buffered.
Ø canplaythrough: evento disparado cuando el medio completo puede ser reproducido sin interrupción. El
estado es establecido considerando la actual tasa de descarga y asumiendo que seguirá siendo la
misma durante el resto de proceso
Ø ended: evento disparado cuando el reproductor llega al final del medio.
Ø play: evento disparado cuando el reproductor es reproducido.
Ø error: evento disparado cuando ocurre un error.
•
HTML5 también incorpora métodos para esta API:
Ø play(): comienza o continua la reproducción
Ø pause(): pausa la reproducción
Ø load(): descarga el archivo del medio
Ø canplaytype(format): indica si el formato del archivo que queremos utilizar es soportado por el
navegador o no.

6. Video y Audio en HTML5
1.
Vídeo en HTML5
•
Actualmente no existe un formato de audio y vídeo estándar para la web. Existen varios contenedores y
codificadores disponibles:
Ø OGG: codificador de vídeo Theora y audio Vorbis. Gratuito.
Ø MP4 : codificador de vídeo H.264 y audio AAC. Pago.
Ø FLV: codificador de vídeo VP6 y H.264; y audio MP3 y ACC. Pago.
Ø WEBM : codificador de vídeo VP8 y audio Vorbis . Gratuito.
•
Listado de los navegadores web y los codificadores que utilizan:
Ø Firefox: codificador de vídeo Theora y audio Vorbis.
Ø Chrome: codificador de vídeo Theora y audio Vorbis y codificador de vídeo H.264 y audio AAC.
Ø Opera: codificador de vídeo Theora y audio Vorbis.
Ø Safari: codificador de vídeo H.264 y audio AAC.
Ø IE: codificador de vídeo H.264 y audio AAC.
Francesc Pérez Fdez

7. Video y Audio en HTML5
2.
Audio en HTML5
•
El audio no es tan popular como el vídeo en la web pero se encuentra aún disponible ganando su propio
mercado en shows de radio y podcasts. HTML5 provee un nuevo elemento <audio> para reproducir un
archivo de audio en un documento HTML. Este elemento comparte casi todos los atributos, métodos,
propiedades y eventos que el elemento <video>.
Francesc Pérez Fdez