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