html5 multimedia

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 y Audio en HTML5 Francesc Pérez Fdez

Archivo externo estilo Archivo externo javascript

BODY SECTION

VIDEO

NAV

Tamaño reprod.

BOTONES BARRA

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.


Ø  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.


20 px


Ø  Damos estilo a los elementos HTML5.


720px

400px

600 px

100 px

Barra de progreso inicializada a cero

Se utiliza para superponer dos elementos


Ø  Damos funcionalidad al reproductor.


1. Cuando se cargue la ventana, el navegador ejecutará la función iniciar().

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().

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 play() y el texto del botón es cambiado

8. Se ejecuta la función estado cada segundo mientras el vídeo es reproducido.

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.

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

12. Si el usuario clica sobre la barra de progreso y la reproducción no ha finalizado ni parado se calcula el nuevo tiempo y el tamaño de la barra de progreso

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


•  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.



•  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.


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>.


Education

html5 multimedia