Html5 audio y video

682 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
682
On SlideShare
0
From Embeds
0
Number of Embeds
221
Actions
Shares
0
Downloads
21
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Html5 audio y video

  1. 1. 22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS Seminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS Facilitadora: María Zeballos Módulo N°2. HTML5 Elementos Audio y Video
  2. 2. 22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS Módulo N°2. HTML5 Elementos Audio y Video HTML5 ha revolucionado el panorama al introducir los elementos audio y vídeo. Esos dos nuevos elementos permiten insertar archivos multimedia "casi" de forma nativa, sin necesidad de añadir plugins propietarios. Sin embargo, todavía nos encontramos con muchos problemas a la hora de usar elementos multimedia en HTML5; entre ellos, problemas de formato de audio y vídeo, y problemas de compatibilidad con los distintos navegadores.
  3. 3. 22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS Módulo N°2. HTML5 Elementos Audio y Video El elemento audio Insertar un archivo de audio (un simple sonido, una canción, una entrevista, un podcast...) es muy sencillo: para eso tenemos el elemento audio. Similar a una imagen (img), tiene un atributo indisociable el src, que sirve para indicar la ruta de acceso al archivo de la fuente de audio.
  4. 4. 22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS Módulo N°2. HTML5 Elementos Audio y Video El elemento audio Para permitir que el usuario pueda controlar el audio: iniciarlo, ponerlo en pausa o pararlo; en el elemento audio, simplemente habrá que utilizar el atributo booleano controls para que se inserte la barra de control nativa del navegador. Esta sería la sintaxis básica para insertar el archivo de audio musica.mp3, que se encuentre en la misma ubicación que el archivo .html <audio src="musica.mp3" controls></audio>
  5. 5. 22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS Módulo N°2. HTML5 Elementos Audio y Video El elemento audio Como es habitual, la apariencia del lector de audio dependerá del navegador.
  6. 6. 22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS Módulo N°2. HTML5 Elementos Audio y Video Otros atributos para el audio: • autoplay: este atributo booleano inicia la lectura del archivo de audio en cuanto se encuentre disponible, al cargarse la página web. • loop: este atributo booleano permite reproducir el sonido en bucle. • preload: indica al navegador que deberá cargar el archivo de audio cuando cargue la página web, de modo que esté disponible para el usuario lo antes posible. <audio src="musica.ogg" controls preload autoplay loop></audio> Sólo para ejemplo del la sintaxis de estos atributos: uno al lado del otro, sin necesidad de un valor. NO ES QUE TENGAN QUE USARSE TODOS, de hecho preload será ignorado si usa autoplay.
  7. 7. 22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS Módulo N°2. HTML5 Elementos Audio y Video Formato de audio: Hay una especie de "guerra" de formatos de audio entre los navegadores. No existe ningún formato de audio que sea compatible "universalmente" con los cinco navegadores principales del mercado. Una solución a esto es indicar varios archivos de fuentes de audio, usando el elemento source con su atributo src, en el elemento audio. Los navegadores abrirán y reproducirán el primer archivo de audio que sepan interpretar.
  8. 8. 22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS Módulo N°2. HTML5 Elementos Audio y Video Formato de audio: Con los formatos .mp3 y .ogg estaremos abarcando los cinco navegadores principales del mercado. Esta es la sintaxis que debemos usar: <audio controls preload> <source src="musica.mp3"> <source src="musica.ogg"> </audio>
  9. 9. 22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS El elemento video Módulo N°2. HTML5 Elementos Audio y Video
  10. 10. 22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS Módulo N°2. HTML5 Elementos Audio y Video El elemento video Es igual de sencillo que añadir audio: para insertar un vídeo deberá utilizar el elemento video con el atributo src. Se tienen los mismos atributos que vimos para el audio, con las mismas funcionalidades: controls, preload, loop y autoplay. <video src="video.mp4" controls preload></video>
  11. 11. 22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS Módulo N°2. HTML5 Elementos Audio y Video El elemento video Como es habitual, la apariencia del lector de vídeo dependerá del navegador
  12. 12. 22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS Módulo N°2. HTML5 Elementos Audio y Video El elemento video Nuevamente nos encontramos ante la "guerra de formatos". Al igual que para el audio, puede utilzar el nuevo elemento source con su atributo indisociable src. Esta sería la sintaxis básica: <video> <source src="video.mp4"> <source src="video.ogg"> <source src="video.webm"> </video>
  13. 13. 22 de julio de 2013Prof. María ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINÁMICAS Módulo N°2. HTML5 Elementos Audio y Video Miro Video Converter le permitirá convertir sus vídeos a los formatos .mp4, .webm, .ogv, e incluso a los formatos para iPhone y Android.

×