1. 22 de julio de 2013Prof. Mara ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINMICAS Seminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINMICAS Facilitadora: Mara Zeballos Mdulo N2. HTML5 Elementos Audio y Video

2. 22 de julio de 2013Prof. Mara ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINMICAS Mdulo N2. HTML5 Elementos Audio y Video HTML5 ha revolucionado el panorama al introducir los elementos audio y vdeo. Esos dos nuevos elementos permiten insertar archivos multimedia "casi" de forma nativa, sin necesidad de aadir plugins propietarios. Sin embargo, todava nos encontramos con muchos problemas a la hora de usar elementos multimedia en HTML5; entre ellos, problemas de formato de audio y vdeo, y problemas de compatibilidad con los distintos navegadores. 3. 22 de julio de 2013Prof. Mara ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINMICAS Mdulo N2. HTML5 Elementos Audio y Video El elemento audio Insertar un archivo de audio (un simple sonido, una cancin, 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. 22 de julio de 2013Prof. Mara ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINMICAS Mdulo N2. 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 sera la sintaxis bsica para insertar el archivo de audio musica.mp3, que se encuentre en la misma ubicacin que el archivo .html 5. 22 de julio de 2013Prof. Mara ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINMICAS Mdulo N2. HTML5 Elementos Audio y Video El elemento audio Como es habitual, la apariencia del lector de audio depender del navegador. 6. 22 de julio de 2013Prof. Mara ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINMICAS Mdulo N2. 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 pgina 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 pgina web, de modo que est disponible para el usuario lo antes posible. Slo 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. 22 de julio de 2013Prof. Mara ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINMICAS Mdulo N2. HTML5 Elementos Audio y Video Formato de audio: Hay una especie de "guerra" de formatos de audio entre los navegadores. No existe ningn formato de audio que sea compatible "universalmente" con los cinco navegadores principales del mercado. Una solucin a esto es indicar varios archivos de fuentes de audio, usando el elemento source con su atributo src, en el elemento audio. Los navegadores abrirn y reproducirn el primer archivo de audio que sepan interpretar. 8. 22 de julio de 2013Prof. Mara ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINMICAS Mdulo N2. 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: 9. 22 de julio de 2013Prof. Mara ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINMICAS El elemento video Mdulo N2. HTML5 Elementos Audio y Video 10. 22 de julio de 2013Prof. Mara ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINMICAS Mdulo N2. HTML5 Elementos Audio y Video El elemento video Es igual de sencillo que aadir audio: para insertar un vdeo 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. 11. 22 de julio de 2013Prof. Mara ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINMICAS Mdulo N2. HTML5 Elementos Audio y Video El elemento video Como es habitual, la apariencia del lector de vdeo depender del navegador 12. 22 de julio de 2013Prof. Mara ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINMICAS Mdulo N2. 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 sera la sintaxis bsica: 13. 22 de julio de 2013Prof. Mara ZeballosSeminario HTML5 Y CSS EN EL DESARROLLO DE APLICACIONES WEB DINMICAS Mdulo N2. HTML5 Elementos Audio y Video Miro Video Converter le permitir convertir sus vdeos a los formatos .mp4, .webm, .ogv, e incluso a los formatos para iPhone y Android.