Integración de Medios

Patricio Mas

@patriciomas

Introducción

• Historia

• Formatos comunes

• Inserción de Video

• Inserción de Audio

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.

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

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>

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

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>