1. Curso HTML5 y el
Futuro de la Web
Audio y Vídeo
19 de Julio 2012
Jose María Álvarez Rodríguez
WESO-Universidad de Oviedo
E-mail: josem.alvarez@weso.es
WWW: http://josemalvarez.es

2. Conceptos Clave
Diseño y Estilo Audio y Vídeo
Dibujar Rich-Apps
Geolocalización Semántica

3. Antecedentes
Documentos
Imágenes,
animaciones, etc.
Multimedia
HTML Code Evolution 1.0 to 5.0 http://broadcast.rackspace.com/blog/HTMLtimeline/index.html

4. Evolución

5. Adobe Flash Microsoft Silverlight
Algunas Ventajas…
Visualmente atractivas
Animaciones, etc.
Independientes de formatos, códecs, etc.
IDEs desarrollo

6. … y Problemas
Soluciones Propietarias
Soporte multidispositivo y
plataforma
Accesibilidad
Metadatos
Interoperabilidad
Necesidad de plugins
….

7. Diversidad de
formatos

8. Diversidad de
navegadores

9. Diversidad de
dispositivos
http://mobisynth.files.wordpress.com/2011/02/tar3.png

10. Solución previa
<embed src=“file.mid" autostart="false" loop="false"
height="45" width="170">
1 <noembed>El navegador no soporta este
elemento.</noembed>
</embed>
<object width="420" height="315" >
<param name="movie"
value=" http://www.youtube.com/embed/7qA07K86Bfk "></param>
2 <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>
<iframe width="420" height="315"
src="http://www.youtube.com/embed/7qA07K86Bfk"
3 frameborder="0" allowfullscreen>
</iframe>

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

12. HTML5 en acción
Nuevos elementos
(no admiten cierre en línea)
<audio></audio>
<audio src="gandalf_onering.mp3" controls></audio>
<video></video>
<video src="videos/arresto.mp4" autoplay></video>

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

14. Tarea 2
Mostrar un vídeo con HTML5
http://www.mediaconverter.org/
Ver: cursoHtml5/audio-video/ejemplos/t2.html

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

16. Formatos de audio
Navegador MP3 Wav Ogg
Internet Explorer 9
Firefox 4.0
Google Chrome 6
Apple Safari 5
Opera 10.6

17. Formatos de vídeo
Navegador MP4 WebM Ogg
Internet Explorer 9
Firefox 4.0
Google Chrome 6
Apple Safari 5
Opera 10.6

18. Tarea 3
Chequear soporte de audio y vídeo de
distintos navegadores en:
http://html5test.com/

20. HTC Desire HD
IPAD2

21. Especificación in
depth…

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

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

24. <audio> y <video>
Propiedades
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

25. <audio> y <video>
Métodos
Añade una nueva pista al audio/video
addTextTrack()
Chequea si el navegador puede reproducir ese tipo
canPlayType() de audio/video
Recarga el elemento de audio/video
load()
Inicia la reproducción del audio/video
play()
Pausa de la reproducción en curso del audio/video
pause()

26. <audio> y <video>
Eventos
abort Se ejecuta cuando un audio/video se aborta/finaliza
Se ejecuta cuando el navegador comienza con la
canplay reproducción del audio/video
Se ejecuta cuando el navegador puede ejecutar el
canplaythrough audio/video sin parar por el buffering
Se ejecuta cuando cambia la duración del audio/video
durationchange
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
Se ejecuta cuando el navegador ha cargado el frame
loadeddata en ejecución del audio/video
Se ejecuta cuando el navegador ha cargado los
loadedmetadata metadatos del video

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

28. A experimentar…

29. Tarea 4
Probar las propiedades, eventos y
métodos de HTML5 audio/vídeo
http://www.w3.org/2010/05/video/mediaev
ents.html

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

31. Tarea 5-Sol
<video src="videos/frews-
intro.mp4“
poster="freews.jpg"
loop controls
width="420"
height="315">
</video>

32. Tarea 6
Crear controles propios de load, play,
pause y volumen
Ver: cursoHtml5/audio-video/ejemplos/t6.html

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

34. Tarea 8
Crear el elemento vídeo con los
elementos source como hijos
Ver: cursoHtml5/audio-video/ejemplos/t8.html

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

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

37. Tarea 10
Introducir subtítulos en un idioma
Formato WebVTT
hh:mm:ss.mmm
http://dev.w3.org/html5/webvtt/
Los subtítulos deben estar en un servidor web.
Ver: cursoHtml5/audio-video/ejemplos/t10.html

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

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

40. Ejemplo
Combinación de vídeo y canvas para ir
cambiando los colores
Ver: http://rocha.la/fun-with-pixels-html5-video-canvas

41. Ejemplo
Combinación de vídeo y canvas para
hacer explotar la imagen del vídeo
Ver: http://craftymind.com/factory/html5video/CanvasVideo.html

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

43. Fallback
Usar Flash con HTML5
fallback
Usar HTML5 con Flash
fallback

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

45. Usar HTML5 con Flash
fallback
<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>

46. Herramientas y
APIS
VideoJS player
jPlayer
Kaltura HTML5
….
http://html5video.org/wiki/HTML5_Player_Comparison

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

48. Conclusiones
Nuevas posibilidades multimedia
Evolución natural de la web
Computación ubicua
Modelo abierto y accesible
Problemas con formatos y versiones
Licencias, etc.

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

51. Curso HTML5 y el
Futuro de la Web
Audio y Vídeo
19 de Julio 2012
Jose María Álvarez Rodríguez
WESO-Universidad de Oviedo
E-mail: josem.alvarez@weso.es
WWW: http://josemalvarez.es