Curso HTML5 y el

Futuro de la Web

Jose María Álvarez Rodríguez

WESO-Universidad de Oviedo

E-mail: josem.alvarez@weso.es

WWW: http://josemalvarez.es

Audio y Vídeo

19 de Julio 2012

Conceptos Clave

Diseño y Estilo Audio y Vídeo

Dibujar Rich-Apps

Geolocalización Semántica

Antecedentes

http://broadcast.rackspace.com/blog/HTMLtimeline/index.html

Documentos

Imágenes,

animaciones, etc.

Multimedia

HTML Code Evolution 1.0 to 5.0

Evolución

Adobe Flash Microsoft Silverlight

Algunas Ventajas…

Visualmente atractivas

Animaciones, etc.

Independientes de formatos, códecs, etc.

IDEs desarrollo

… y Problemas

Soluciones Propietarias

Soporte multidispositivo y

plataforma

Accesibilidad

Metadatos

Interoperabilidad

Necesidad de plugins

….

Diversidad de

formatos

Diversidad de

navegadores

Diversidad de

dispositivos

http://mobisynth.files.wordpress.com/2011/02/tar3.png

Solución previa <embed src=“file.mid" autostart="false" loop="false"

height="45" width="170">

<noembed>El navegador no soporta este

elemento.</noembed>

</embed>

<iframe width="420" height="315"

src="http://www.youtube.com/embed/7qA07K86Bfk"

frameborder="0" allowfullscreen>

</iframe>

<object width="420" height="315" >

<param name="movie"

value=" http://www.youtube.com/embed/7qA07K86Bfk "></param>

<param name="allowFullScreen" value="true"></param>

<embed src=" http://www.youtube.com/embed/7qA07K86Bfk "

type="application/x-shockwave-flash" width="425" height="344">

</embed>

</object>

1

2

3

Tarea 0

Visitar sitios web de distribución de audio y vídeo e identificar qué solución

técnica utilizan

Ejemplos: Youtube, Vimeo, Scribd, Hulu,

Dalealplay, TV3, BBC, Marca, LNE, etc.

HTML5 en acción

Nuevos elementos

(no admiten cierre en línea)

<audio></audio>

<video></video>

<audio src="gandalf_onering.mp3" controls></audio>

<video src="videos/arresto.mp4" autoplay></video>

Tarea 1

Ir a la página de clips de audio y hacer un “poco de ruido” con HTML5

http://www.mediacollege.com/downloads/sound-

effects/

Ver: cursoHtml5/audio-video/ejemplos/t1.html

Tarea 2

Mostrar un vídeo con HTML5

Ver: cursoHtml5/audio-video/ejemplos/t2.html

http://www.mediaconverter.org/

Especificación • http://www.w3.org/wiki/HTML/Elements/audio

• http://www.w3.org/wiki/HTML/Elements/video

• http://www.w3schools.com/html5/html5_ref_av_dom.

asp

Soporte

Depende del

navegador…formatos, etc.

Navegador MP3 Wav Ogg

Internet Explorer 9

Firefox 4.0

Google Chrome 6

Apple Safari 5

Opera 10.6

Formatos de audio

Navegador MP4 WebM Ogg

Internet Explorer 9

Firefox 4.0

Google Chrome 6

Apple Safari 5

Opera 10.6

Formatos de vídeo

Tarea 3

Chequear soporte de audio y vídeo de distintos navegadores en:

http://html5test.com/

HTC Desire HD

IPAD2

Especificación in

depth…

<audio> y <video>

Propiedades audioTracks Devuelve el objeto AudioTrackList que contiene la lista de

pistas disponibles autoplay Da valor o devuelve si el audio/video debería empezar

cuando la página se carga

buffered Devuelve un objeto TimeRange que contiene las partes del audio/video en el buffer

controller Devuelve el objeto MediaController que contiene la información del controlador de audio/video

controls Da valor o devuelve si el elemento de audio/video debe mostrar controles (play, etc.)

crossOrigin Da valor o devuelve la configuración CORS del audio/video

currentSrc Devuelve la URL de un elemento audio/video

currentTime Da valor o devuelve a la propiedad del tiempo de ejeución del elemento audio/video (en segundos)

<audio> y <video>

Propiedades defaultMuted Da valor o devuelve si el audio/video está silenciado por

omisión defaultPlaybackRate Da valor o devuelve la velocidad del playback

duration Devuelve la longitud en segundos

ended Devuelve si el play ha finalizado

error Devuelve un objeto MediaError con el error ocurrido

loop Da valor o devuelve si el audio/video debe ejecutarse en bucle

mediaGroup Da valor o devuelve el grupo de elementos de audio/video para su gestión

muted Da valor o devuelve si el audio/video está silenciado

networkState Devuelve el estado de la conexión de red

paused Da valor o devuelve si el audio/video está parado

playbackRate Da valor o devuelve la velocidad de ejecución

played Devuelve un objeto TimeRanges indicando las partes del audio/video que se ha ejecutado

preload Da valor o devuelve el valor para indicar si el audio/video debe ser cargado cuando se carga la página

readyState Devuelve el valor que indica si el audio/video está listo para ser reproductido

seekable Devuelve un objeto TimeRanges indicando las partes del audio/video que se pueden acceder directamente

seeking Devuelve el valor que indica si el usuario ha realizado un acceso directo al audio/video

src Da valor o devuelve la dirección del recurso en reproducción

startDate Devuelve un objeto Date que indica que el actual time offset

textTracks Devuelve un objeto TextTrackList object que indica las pistas textos disponibles

videoTracks Devuelve un objeto VideoTrackList que indica las pistas de vídeo disponibles

volume Da valor o devuelve el volumen del audio/video

<audio> y <video>

Propiedades

<audio> y <video>

Métodos

addTextTrack() Añade una nueva pista al audio/video

canPlayType() Chequea si el navegador puede reproducir ese tipo de audio/video

load() Recarga el elemento de audio/video

play() Inicia la reproducción del audio/video

pause() Pausa de la reproducción en curso del audio/video

<audio> y <video>

Eventos abort Se ejecuta cuando un audio/video se aborta/finaliza

canplay Se ejecuta cuando el navegador comienza con la reproducción del audio/video

canplaythrough Se ejecuta cuando el navegador puede ejecutar el audio/video sin parar por el buffering

durationchange Se ejecuta cuando cambia la duración del audio/video

emptied Se ejecuta cuando la lista de reproducción es vacía

ended Se ejecuta cuando la lista de reproducción finaliza

error Se ejecuta cuando se produce un error al cargar un audio/video

loadeddata Se ejecuta cuando el navegador ha cargado el frame en ejecución del audio/video

loadedmetadata Se ejecuta cuando el navegador ha cargado los metadatos del video

<audio> y <video>

Eventos loadstart Se ejcuta cuando el navegador comienza a cargar el audio/video

pause Se ejecuta cuando se pausa el audio/video play Se ejecuta cuando el navegador está en reproducción del audio/video

playing Se ejecuta cuando el navegador está lista para reproducir después de una pausa o bien porque ha parado debido al buffering

progress Se ejecuta cuando se está descargando el audio/video

ratechange Se ejecuta cuando se varia la velocidad de reproducción del audio/video

seeked Se ejecuta cuando se finaliza de realizar un acceso directo a una parte del audio/video

seeking Se ejecuta cuando se utiliza el acceso a una parte determinada del audio/video

stalled Se ejecuta cuando el navegador ha intentado acceder a los metadatos del video y éstos no están disponibles

suspend Se ejecuta cuando el navegador no es capaz de conseguir metadatos

timeupdate Se ejecuta cuando se cambia la posición de reproducción

volumechange Se ejecuta cuando se cambia el volumen waiting Se ejecuta cuando se hace buffering del siguiente frame

A experimentar…

Tarea 4

Probar las propiedades, eventos y métodos de HTML5 audio/vídeo

http://www.w3.org/2010/05/video/mediaev

ents.html

Tarea 5

• Añadir controles al vídeo poster, loop, controls

• Indicar tamaño (widht, height) del mismo

Ver: cursoHtml5/audio-video/ejemplos/t5.html

Tarea 5-Sol

<video src="videos/frews-

intro.mp4“

poster="freews.jpg"

loop controls

width="420"

height="315">

</video>

Tarea 6

Crear controles propios de load, play, pause y volumen

Ver: cursoHtml5/audio-video/ejemplos/t6.html

Tarea 7

Gestionar el evento “loadedmetadata” y que muestra el tamaño del vídeo:

videoWidth y videoHeight

Ver: cursoHtml5/audio-video/ejemplos/t7.html

Tarea 8

Crear el elemento vídeo con los elementos source como hijos

Ver: cursoHtml5/audio-video/ejemplos/t8.html

Tarea 8-Sol

<video poster="freews.jpg" controls width="420"

height="315">

<source src="videos/frews-intro.mp4"

type='video/mp4; codecs="avc1.42E01E,

mp4a.40.2"'>

</source>

<source src="videos/frews-intro.ogg"

type='video/ogg; codecs="theora,

vorbis"'>

</source>

</video>

Tarea 9

Gestionar los errores que se pueden producir durante la ejecución del vídeo

Ver: cursoHtml5/audio-video/ejemplos/t9.html

http://dev.w3.org/html5/spec/single-page.html#error-codes

Tarea 10

Introducir subtítulos en un idioma Formato WebVTT hh:mm:ss.mmm

Ver: cursoHtml5/audio-video/ejemplos/t10.html

Los subtítulos deben estar en un servidor web.

http://dev.w3.org/html5/webvtt/

WebVTT

1 00:00:01,000 --> 00:00:03,000

Hola, primeros 3 segundos...

2 00:00:03,000 --> 00:00:05,000

Otro texto...

Tarea 11

Combinación de vídeo y canvas. Crear un canvas que muestre la imagen

del vídeo cada 1 seg.

Ver: cursoHtml5/audio-video/ejemplos/t11.html

Ejemplo

Combinación de vídeo y canvas para ir cambiando los colores

Ver: http://rocha.la/fun-with-pixels-html5-video-canvas

Ejemplo

Combinación de vídeo y canvas para hacer explotar la imagen del vídeo

Ver: http://craftymind.com/factory/html5video/CanvasVideo.html

Tarea 12

Combinación de vídeo y canvas. Crear un canvas que muestre la imagen

pixelada del vídeo en el fondo de la página.

Ver: cursoHtml5/audio-video/ejemplos/t12.html

Fallback

Usar Flash con HTML5

fallback

Usar HTML5 con Flash

fallback

Usar Flash con HTML5

fallback

<object id="flowplayer" width="700" height="400"

data="http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf"

type="application/x-shockwave-flash">

<param name="movie" value="videos/frews-intro.mp4 ">

<video controls width="700" height="400">

<source src="videos/frews-intro.mp4" type="video/mp4">

<source src="videos/frews-intro.ogg" type="video/ogg">

<img src="freews.jpg" alt=“Freews intro">

<p>No hay soporte ni de HTML5 video ni Flash.</p>

<p>Descargar vídeo

<a href="videos/frews-intro.mp4">MP4 H.264</a>

o <a href="videos/frews-intro.ogg">Ogg Theora</a>.

</p>

</video>

</object>

<video controls width=“420" height=“315">

<source src="videos/frews-intro.mp4" type="video/mp4">

<source src="videos/frews-intro.ogg" type="video/ogg">

<object id="flowplayer" width="700" height="400“

data="flowplayer-3.2.7.swf“

type="application/x-shockwave-flash">

<param name="movie" value="flowplayer-3.2.7.swf">

<param name="flashvars"

value='config={"clip":"videos/frews-intro.mp4.mp4"}'>

<img src="freews.jpg" alt=“Freews intro">

<p>No hay soporte ni de HTML5 video ni Flash.</p>

<p>Descargar vídeo

<a href="videos/frews-intro.mp4">MP4 H.264</a>

o <a href="videos/frews-intro.ogg">Ogg Theora</a>.

</p>

</object>

</video>

Usar HTML5 con Flash

fallback

Herramientas y

APIS

VideoJS player

jPlayer

Kaltura HTML5

…. http://html5video.org/wiki/HTML5_Player_Comparison

Preguntas abiertas

Licencia de los contenidos

Streaming desde tú dispositivo

Streaming adaptativo

Retrasos audio/vídeo

Creación dinámica

https://wiki.mozilla.org/Audio_Data_API

Conclusiones

Nuevas posibilidades multimedia

Evolución natural de la web

Computación ubicua

Modelo abierto y accesible

Problemas con formatos y versiones

Licencias, etc.

Enlaces interesantes • http://html5-demos.appspot.com/

• http://www.w3schools.com/html5/html5_audio.asp

• http://www.w3schools.com/html5/html5_video.asp

• https://developer.mozilla.org/En/Media_formats_supported_by_t

he_audio_and_video_elements

• http://html5video.org/

• http://net.tutsplus.com/tutorials/html-css-techniques/html5-

audio-and-video-what-you-must-know/

• http://html5demos.com/

• http://html5-demos.appspot.com/

• https://developer.mozilla.org/en/Using_audio_and_video_in_Fir

efox

• https://github.com/etianen/html5media

• http://html5doctor.com/

• http://diveintohtml5.info/video.html

• http://caniuse.com/

• http://www.html5rocks.com/en/

Curso HTML5 y el

Futuro de la Web

Jose María Álvarez Rodríguez

WESO-Universidad de Oviedo

E-mail: josem.alvarez@weso.es

WWW: http://josemalvarez.es

Audio y Vídeo

19 de Julio 2012