html5 multimedia

566 views
475 views

Published on

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

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
566
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

html5 multimedia

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

×