html5 audio & vídeo
Post on 19-Oct-2014
2.743 views
DESCRIPTION
TRANSCRIPT
![Page 1: HTML5 Audio & Vídeo](https://reader034.vdocuments.net/reader034/viewer/2022051608/54444579afaf9fa4098b4849/html5/thumbnails/1.jpg)
Curso HTML5 y el
Futuro de la Web
Jose María Álvarez Rodríguez
WESO-Universidad de Oviedo
E-mail: [email protected]
WWW: http://josemalvarez.es
Audio y Vídeo
19 de Julio 2012
![Page 2: HTML5 Audio & Vídeo](https://reader034.vdocuments.net/reader034/viewer/2022051608/54444579afaf9fa4098b4849/html5/thumbnails/2.jpg)
Conceptos Clave
Diseño y Estilo Audio y Vídeo
Dibujar Rich-Apps
Geolocalización Semántica
![Page 3: HTML5 Audio & Vídeo](https://reader034.vdocuments.net/reader034/viewer/2022051608/54444579afaf9fa4098b4849/html5/thumbnails/3.jpg)
Antecedentes
http://broadcast.rackspace.com/blog/HTMLtimeline/index.html
Documentos
Imágenes,
animaciones, etc.
Multimedia
HTML Code Evolution 1.0 to 5.0
![Page 4: HTML5 Audio & Vídeo](https://reader034.vdocuments.net/reader034/viewer/2022051608/54444579afaf9fa4098b4849/html5/thumbnails/4.jpg)
Evolución
![Page 5: HTML5 Audio & Vídeo](https://reader034.vdocuments.net/reader034/viewer/2022051608/54444579afaf9fa4098b4849/html5/thumbnails/5.jpg)
Adobe Flash Microsoft Silverlight
Algunas Ventajas…
Visualmente atractivas
Animaciones, etc.
Independientes de formatos, códecs, etc.
IDEs desarrollo
![Page 6: HTML5 Audio & Vídeo](https://reader034.vdocuments.net/reader034/viewer/2022051608/54444579afaf9fa4098b4849/html5/thumbnails/6.jpg)
… y Problemas
Soluciones Propietarias
Soporte multidispositivo y
plataforma
Accesibilidad
Metadatos
Interoperabilidad
Necesidad de plugins
….
![Page 7: HTML5 Audio & Vídeo](https://reader034.vdocuments.net/reader034/viewer/2022051608/54444579afaf9fa4098b4849/html5/thumbnails/7.jpg)
Diversidad de
formatos
![Page 8: HTML5 Audio & Vídeo](https://reader034.vdocuments.net/reader034/viewer/2022051608/54444579afaf9fa4098b4849/html5/thumbnails/8.jpg)
Diversidad de
navegadores
![Page 9: HTML5 Audio & Vídeo](https://reader034.vdocuments.net/reader034/viewer/2022051608/54444579afaf9fa4098b4849/html5/thumbnails/9.jpg)
Diversidad de
dispositivos
http://mobisynth.files.wordpress.com/2011/02/tar3.png
![Page 10: HTML5 Audio & Vídeo](https://reader034.vdocuments.net/reader034/viewer/2022051608/54444579afaf9fa4098b4849/html5/thumbnails/10.jpg)
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
![Page 11: HTML5 Audio & Vídeo](https://reader034.vdocuments.net/reader034/viewer/2022051608/54444579afaf9fa4098b4849/html5/thumbnails/11.jpg)
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.
![Page 12: HTML5 Audio & Vídeo](https://reader034.vdocuments.net/reader034/viewer/2022051608/54444579afaf9fa4098b4849/html5/thumbnails/12.jpg)
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>
![Page 13: HTML5 Audio & Vídeo](https://reader034.vdocuments.net/reader034/viewer/2022051608/54444579afaf9fa4098b4849/html5/thumbnails/13.jpg)
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
![Page 14: HTML5 Audio & Vídeo](https://reader034.vdocuments.net/reader034/viewer/2022051608/54444579afaf9fa4098b4849/html5/thumbnails/14.jpg)
Tarea 2
Mostrar un vídeo con HTML5
Ver: cursoHtml5/audio-video/ejemplos/t2.html
http://www.mediaconverter.org/
![Page 15: HTML5 Audio & Vídeo](https://reader034.vdocuments.net/reader034/viewer/2022051608/54444579afaf9fa4098b4849/html5/thumbnails/15.jpg)
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.
![Page 16: HTML5 Audio & Vídeo](https://reader034.vdocuments.net/reader034/viewer/2022051608/54444579afaf9fa4098b4849/html5/thumbnails/16.jpg)
Navegador MP3 Wav Ogg
Internet Explorer 9
Firefox 4.0
Google Chrome 6
Apple Safari 5
Opera 10.6
Formatos de audio
![Page 17: HTML5 Audio & Vídeo](https://reader034.vdocuments.net/reader034/viewer/2022051608/54444579afaf9fa4098b4849/html5/thumbnails/17.jpg)
Navegador MP4 WebM Ogg
Internet Explorer 9
Firefox 4.0
Google Chrome 6
Apple Safari 5
Opera 10.6
Formatos de vídeo
![Page 18: HTML5 Audio & Vídeo](https://reader034.vdocuments.net/reader034/viewer/2022051608/54444579afaf9fa4098b4849/html5/thumbnails/18.jpg)
Tarea 3
Chequear soporte de audio y vídeo de distintos navegadores en:
http://html5test.com/
![Page 19: HTML5 Audio & Vídeo](https://reader034.vdocuments.net/reader034/viewer/2022051608/54444579afaf9fa4098b4849/html5/thumbnails/19.jpg)
![Page 20: HTML5 Audio & Vídeo](https://reader034.vdocuments.net/reader034/viewer/2022051608/54444579afaf9fa4098b4849/html5/thumbnails/20.jpg)
HTC Desire HD
IPAD2
![Page 21: HTML5 Audio & Vídeo](https://reader034.vdocuments.net/reader034/viewer/2022051608/54444579afaf9fa4098b4849/html5/thumbnails/21.jpg)
Especificación in
depth…
![Page 22: HTML5 Audio & Vídeo](https://reader034.vdocuments.net/reader034/viewer/2022051608/54444579afaf9fa4098b4849/html5/thumbnails/22.jpg)
<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)
![Page 23: HTML5 Audio & Vídeo](https://reader034.vdocuments.net/reader034/viewer/2022051608/54444579afaf9fa4098b4849/html5/thumbnails/23.jpg)
<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
![Page 24: HTML5 Audio & Vídeo](https://reader034.vdocuments.net/reader034/viewer/2022051608/54444579afaf9fa4098b4849/html5/thumbnails/24.jpg)
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
![Page 25: HTML5 Audio & Vídeo](https://reader034.vdocuments.net/reader034/viewer/2022051608/54444579afaf9fa4098b4849/html5/thumbnails/25.jpg)
<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
![Page 26: HTML5 Audio & Vídeo](https://reader034.vdocuments.net/reader034/viewer/2022051608/54444579afaf9fa4098b4849/html5/thumbnails/26.jpg)
<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
![Page 27: HTML5 Audio & Vídeo](https://reader034.vdocuments.net/reader034/viewer/2022051608/54444579afaf9fa4098b4849/html5/thumbnails/27.jpg)
<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
![Page 28: HTML5 Audio & Vídeo](https://reader034.vdocuments.net/reader034/viewer/2022051608/54444579afaf9fa4098b4849/html5/thumbnails/28.jpg)
A experimentar…
![Page 29: HTML5 Audio & Vídeo](https://reader034.vdocuments.net/reader034/viewer/2022051608/54444579afaf9fa4098b4849/html5/thumbnails/29.jpg)
Tarea 4
Probar las propiedades, eventos y métodos de HTML5 audio/vídeo
http://www.w3.org/2010/05/video/mediaev
ents.html
![Page 30: HTML5 Audio & Vídeo](https://reader034.vdocuments.net/reader034/viewer/2022051608/54444579afaf9fa4098b4849/html5/thumbnails/30.jpg)
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
![Page 31: HTML5 Audio & Vídeo](https://reader034.vdocuments.net/reader034/viewer/2022051608/54444579afaf9fa4098b4849/html5/thumbnails/31.jpg)
Tarea 5-Sol
<video src="videos/frews-
intro.mp4“
poster="freews.jpg"
loop controls
width="420"
height="315">
</video>
![Page 32: HTML5 Audio & Vídeo](https://reader034.vdocuments.net/reader034/viewer/2022051608/54444579afaf9fa4098b4849/html5/thumbnails/32.jpg)
Tarea 6
Crear controles propios de load, play, pause y volumen
Ver: cursoHtml5/audio-video/ejemplos/t6.html
![Page 33: HTML5 Audio & Vídeo](https://reader034.vdocuments.net/reader034/viewer/2022051608/54444579afaf9fa4098b4849/html5/thumbnails/33.jpg)
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
![Page 34: HTML5 Audio & Vídeo](https://reader034.vdocuments.net/reader034/viewer/2022051608/54444579afaf9fa4098b4849/html5/thumbnails/34.jpg)
Tarea 8
Crear el elemento vídeo con los elementos source como hijos
Ver: cursoHtml5/audio-video/ejemplos/t8.html
![Page 35: HTML5 Audio & Vídeo](https://reader034.vdocuments.net/reader034/viewer/2022051608/54444579afaf9fa4098b4849/html5/thumbnails/35.jpg)
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>
![Page 36: HTML5 Audio & Vídeo](https://reader034.vdocuments.net/reader034/viewer/2022051608/54444579afaf9fa4098b4849/html5/thumbnails/36.jpg)
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
![Page 37: HTML5 Audio & Vídeo](https://reader034.vdocuments.net/reader034/viewer/2022051608/54444579afaf9fa4098b4849/html5/thumbnails/37.jpg)
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/
![Page 38: HTML5 Audio & Vídeo](https://reader034.vdocuments.net/reader034/viewer/2022051608/54444579afaf9fa4098b4849/html5/thumbnails/38.jpg)
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...
![Page 39: HTML5 Audio & Vídeo](https://reader034.vdocuments.net/reader034/viewer/2022051608/54444579afaf9fa4098b4849/html5/thumbnails/39.jpg)
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
![Page 40: HTML5 Audio & Vídeo](https://reader034.vdocuments.net/reader034/viewer/2022051608/54444579afaf9fa4098b4849/html5/thumbnails/40.jpg)
Ejemplo
Combinación de vídeo y canvas para ir cambiando los colores
Ver: http://rocha.la/fun-with-pixels-html5-video-canvas
![Page 41: HTML5 Audio & Vídeo](https://reader034.vdocuments.net/reader034/viewer/2022051608/54444579afaf9fa4098b4849/html5/thumbnails/41.jpg)
Ejemplo
Combinación de vídeo y canvas para hacer explotar la imagen del vídeo
Ver: http://craftymind.com/factory/html5video/CanvasVideo.html
![Page 42: HTML5 Audio & Vídeo](https://reader034.vdocuments.net/reader034/viewer/2022051608/54444579afaf9fa4098b4849/html5/thumbnails/42.jpg)
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
![Page 43: HTML5 Audio & Vídeo](https://reader034.vdocuments.net/reader034/viewer/2022051608/54444579afaf9fa4098b4849/html5/thumbnails/43.jpg)
Fallback
Usar Flash con HTML5
fallback
Usar HTML5 con Flash
fallback
![Page 44: HTML5 Audio & Vídeo](https://reader034.vdocuments.net/reader034/viewer/2022051608/54444579afaf9fa4098b4849/html5/thumbnails/44.jpg)
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>
![Page 45: HTML5 Audio & Vídeo](https://reader034.vdocuments.net/reader034/viewer/2022051608/54444579afaf9fa4098b4849/html5/thumbnails/45.jpg)
<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
![Page 46: HTML5 Audio & Vídeo](https://reader034.vdocuments.net/reader034/viewer/2022051608/54444579afaf9fa4098b4849/html5/thumbnails/46.jpg)
Herramientas y
APIS
VideoJS player
jPlayer
Kaltura HTML5
…. http://html5video.org/wiki/HTML5_Player_Comparison
![Page 47: HTML5 Audio & Vídeo](https://reader034.vdocuments.net/reader034/viewer/2022051608/54444579afaf9fa4098b4849/html5/thumbnails/47.jpg)
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
![Page 48: HTML5 Audio & Vídeo](https://reader034.vdocuments.net/reader034/viewer/2022051608/54444579afaf9fa4098b4849/html5/thumbnails/48.jpg)
Conclusiones
Nuevas posibilidades multimedia
Evolución natural de la web
Computación ubicua
Modelo abierto y accesible
Problemas con formatos y versiones
Licencias, etc.
![Page 49: HTML5 Audio & Vídeo](https://reader034.vdocuments.net/reader034/viewer/2022051608/54444579afaf9fa4098b4849/html5/thumbnails/49.jpg)
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/
![Page 50: HTML5 Audio & Vídeo](https://reader034.vdocuments.net/reader034/viewer/2022051608/54444579afaf9fa4098b4849/html5/thumbnails/50.jpg)
![Page 51: HTML5 Audio & Vídeo](https://reader034.vdocuments.net/reader034/viewer/2022051608/54444579afaf9fa4098b4849/html5/thumbnails/51.jpg)
Curso HTML5 y el
Futuro de la Web
Jose María Álvarez Rodríguez
WESO-Universidad de Oviedo
E-mail: [email protected]
WWW: http://josemalvarez.es
Audio y Vídeo
19 de Julio 2012