Introducción a la nueva forma de integración de multimedios en HTML5. Cómo se hacía antes y cómo se debe hacer ahora.

1. Integración de Medios
Patricio Mas
@patriciomas

2. Introducción
• Historia
• Formatos comunes
• Inserción de Video
• Inserción de Audio

3. Historia
• HTML se creó para desplegar archivos
de texto.
• Luego se pudo incluir color, tipografías
e incluso imágenes.
• Pero la única forma de incluir sonido,
animaciones y video era ocupando
programas externos (como flash).
• HTML5 facilita esta integración.

4. Formatos comunes: Video
• Existen muchos formatos de video:
MPEG / AVI / WMV / Quicktime / RealVideo
/ Flash / Ogg / WebM / MP4
• Se recomienda MP4
– Buena relación calidad/peso
– Soportado por HTML5
– Recomendado por YouTube

5. Inserción de Video
En HTML5 se inserta videos ocupando el elemento <video> .
El atributo controls agrega botones play, pausa, y volumen.
El texto entre las etiquetas <video></video> se mostrará en
navegadores que no reconozcan el elemento <video>.
Se pueden incluir varios elementos <source>. El navegador
cargará el primer formato que reconozca.
<video width="320" height="240" controls>
<source src=”pelicula.mp4" type="video/mp4">
<source src="pelicula.ogg" type="video/ogg">
Tu navegador no permite el elemento video.
</video>

6. Formatos comunes: Audio
• Existen muchos formatos de audio:
MIDI / RealAudio / WMA / AAC / WAV /
Ogg / MP3 / MP4
• Se recomienda MP3
– Buena relación calidad/peso
– HTML5 reconoce MP3, Wav y Ogg

7. Inserción de Audio
En HTML5 se inserta audios ocupando el elemento <audio> .
El atributo controls agrega botones play, pausa, y volumen.
El texto entre las etiquetas <audio></audio> se mostrará en
navegadores que no reconozcan el elemento <audio>.
Se pueden incluir varios elementos <source>. El navegador
cargará el primer formato que reconozca.
<audio width="320" height="240" controls>
<source src=”cancion.mp3" type=”audio/mp3">
<source src=”cancion.ogg" type=”audio/ogg">
Tu navegador no permite el elemento audio.
</video>