Curso HTML5 y el

Futuro de la Web

Jose Mara lvarez Rodrguez
WESO-Universidad de Oviedo
E-mail: josem.alvarez@weso.es
WWW: http://josemalvarez.es

Audio y Vdeo
19 de Julio 2012

Conceptos Clave
Diseo y Estilo Audio y Vdeo
Dibujar Rich-Apps
Geolocalizacin
Semntica
Antecedentes
http://broadcast.rackspace.com/blog/HTMLtimeline/index.html
Documentos
Imgenes,
animaciones, etc.
Multimedia
HTML Code Evolution 1.0 to 5.0
Evolucin
Adobe Flash Microsoft Silverlight
Algunas Ventajas

Visualmente atractivas
Animaciones, etc.
Independientes de formatos, cdecs, 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
Solucin 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 distribucin de
audio y vdeo e identificar qu solucin
tcnica utilizan
Ejemplos: Youtube, Vimeo, Scribd, Hulu,
Dalealplay, TV3, BBC, Marca, LNE, etc.
HTML5 en accin
Nuevos elementos
(no admiten cierre en lnea)

<audio></audio>

<video></video>
<audio src="gandalf_onering.mp3" controls></audio>
<video src="videos/arresto.mp4" autoplay></video>
Tarea 1
Ir a la pgina 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 vdeo con HTML5
Ver: cursoHtml5/audio-video/ejemplos/t2.html
http://www.mediaconverter.org/
Especificacin
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
navegadorformatos, 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 vdeo
Tarea 3
Chequear soporte de audio y vdeo de
distintos navegadores en:
http://html5test.com/
HTC Desire HD
IPAD2
Especificacin 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 debera empezar
cuando la pgina 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
informacin 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 configuracin CORS del
audio/video
currentSrc
Devuelve la URL de un elemento audio/video
currentTime
Da valor o devuelve a la propiedad del tiempo de
ejeucin del elemento audio/video (en segundos)
<audio> y <video>
Propiedades
defaultMuted
Da valor o devuelve si el audio/video est silenciado por
omisin
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 gestin
muted
Da valor o devuelve si el audio/video est silenciado
networkState
Devuelve el estado de la conexin de red
paused
Da valor o devuelve si el audio/video est parado
playbackRate
Da valor o devuelve la velocidad de ejecucin
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 pgina
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 direccin del recurso en reproduccin
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 vdeo
disponibles
volume
Da valor o devuelve el volumen del audio/video
<audio> y <video>
Propiedades
<audio> y <video>
Mtodos
addTextTrack()
Aade 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 reproduccin del audio/video
pause()
Pausa de la reproduccin 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
reproduccin 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 duracin del audio/video
emptied Se ejecuta cuando la lista de reproduccin es vaca
ended Se ejecuta cuando la lista de reproduccin 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 ejecucin 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 reproduccin del audio/video
playing Se ejecuta cuando el navegador est lista para reproducir despus 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 reproduccin 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 estn disponibles
suspend Se ejecuta cuando el navegador no es capaz de conseguir metadatos
timeupdate Se ejecuta cuando se cambia la posicin de reproduccin
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
mtodos de HTML5 audio/vdeo
http://www.w3.org/2010/05/video/mediaev
ents.html
Tarea 5
Aadir controles al vdeo poster, loop,
controls
Indicar tamao (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 tamao del vdeo:
videoWidth y videoHeight
Ver: cursoHtml5/audio-video/ejemplos/t7.html
Tarea 8
Crear el elemento vdeo 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 ejecucin del vdeo
Ver: cursoHtml5/audio-video/ejemplos/t9.html
http://dev.w3.org/html5/spec/single-page.html#error-codes
Tarea 10
Introducir subttulos en un idioma
Formato WebVTT
hh:mm:ss.mmm
Ver: cursoHtml5/audio-video/ejemplos/t10.html
Los subttulos 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
Combinacin de vdeo y canvas.
Crear un canvas que muestre la imagen
del vdeo cada 1 seg.
Ver: cursoHtml5/audio-video/ejemplos/t11.html
Ejemplo
Combinacin de vdeo y canvas para ir
cambiando los colores
Ver: http://rocha.la/fun-with-pixels-html5-video-canvas
Ejemplo
Combinacin de vdeo y canvas para
hacer explotar la imagen del vdeo
Ver: http://craftymind.com/factory/html5video/CanvasVideo.html
Tarea 12
Combinacin de vdeo y canvas.
Crear un canvas que muestre la imagen
pixelada del vdeo en el fondo de la
pgina.
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 vdeo
<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 vdeo
<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/vdeo
Creacin dinmica

https://wiki.mozilla.org/Audio_Data_API
Conclusiones
Nuevas posibilidades multimedia
Evolucin natural de la web
Computacin 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 Mara lvarez Rodrguez
WESO-Universidad de Oviedo
E-mail: josem.alvarez@weso.es
WWW: http://josemalvarez.es

Audio y Vdeo
19 de Julio 2012