Your SlideShare is downloading. ×
0
Curso HTML5 y elFuturo de la Web    Audio y Vídeo   19 de Julio 2012     Jose María Álvarez Rodríguez     WESO-Universidad...
Conceptos ClaveDiseño y Estilo   Audio y Vídeo   Dibujar         Rich-AppsGeolocalización     Semántica
Antecedentes                                Documentos                             Imágenes,                          anim...
Evolución
Adobe Flash         Microsoft Silverlight  Algunas Ventajas…        Visualmente atractivas          Animaciones, etc.Indep...
… y Problemas Soluciones PropietariasSoporte multidispositivo y       plataforma      Accesibilidad       Metadatos    Int...
Diversidad de  formatos
Diversidad denavegadores
Diversidad de dispositivoshttp://mobisynth.files.wordpress.com/2011/02/tar3.png
Solución previa    <embed src=“file.mid" autostart="false" loop="false"    height="45" width="170">1          <noembed>El ...
Tarea 0 Visitar sitios web de distribución deaudio y vídeo e identificar qué solución             técnica utilizan  Ejempl...
HTML5 en acción    Nuevos elementos(no admiten cierre en línea)  <audio></audio><audio src="gandalf_onering.mp3" controls>...
Tarea 1Ir a la página de clips de audio y hacer    un “poco de ruido” con HTML5 http://www.mediacollege.com/downloads/soun...
Tarea 2    Mostrar un vídeo con HTML5      http://www.mediaconverter.org/Ver: cursoHtml5/audio-video/ejemplos/t2.html
Especificación• http://www.w3.org/wiki/HTML/Elements/audio• http://www.w3.org/wiki/HTML/Elements/video• http://www.w3schoo...
Formatos de audioNavegador             MP3 Wav OggInternet Explorer 9Firefox 4.0Google Chrome 6Apple Safari 5Opera 10.6
Formatos de vídeoNavegador             MP4   WebM   OggInternet Explorer 9Firefox 4.0Google Chrome 6Apple Safari 5Opera 10.6
Tarea 3Chequear soporte de audio y vídeo de     distintos navegadores en:       http://html5test.com/
HTC Desire HDIPAD2
Especificación in    depth…
<audio> y <video>        PropiedadesaudioTracks   Devuelve el objeto AudioTrackList que contiene la lista de              ...
<audio> y <video>      PropiedadesdefaultMuted          Da valor o devuelve si el audio/video está silenciado por         ...
<audio> y <video>    PropiedadesplaybackRate   Da valor o devuelve la velocidad de ejecuciónplayed         Devuelve un obj...
<audio> y <video>       Métodos                 Añade una nueva pista al audio/videoaddTextTrack()                 Chequea...
<audio> y <video>         Eventosabort            Se ejecuta cuando un audio/video se aborta/finaliza                 Se e...
<audio> y <video>          Eventosloadstart      Se ejcuta cuando el navegador comienza a cargar el audio/videopause      ...
A experimentar…
Tarea 4   Probar las propiedades, eventos y    métodos de HTML5 audio/vídeohttp://www.w3.org/2010/05/video/mediaev        ...
Tarea 5• Añadir controles al vídeo poster, loop,                controls • Indicar tamaño (widht, height) del             ...
Tarea 5-Sol<video src="videos/frews-   intro.mp4“   poster="freews.jpg"   loop controls   width="420"   height="315"></vid...
Tarea 6Crear controles propios de load, play,          pause y volumenVer: cursoHtml5/audio-video/ejemplos/t6.html
Tarea 7Gestionar el evento “loadedmetadata” y   que muestra el tamaño del vídeo:       videoWidth y videoHeight Ver: curso...
Tarea 8   Crear el elemento vídeo con los    elementos source como hijosVer: 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=vi...
Tarea 9    Gestionar los errores que se pueden   producir durante la ejecución del vídeo   Ver: cursoHtml5/audio-video/eje...
Tarea 10 Introducir subtítulos en un idioma         Formato WebVTT          hh:mm:ss.mmm                http://dev.w3.org/...
WebVTT1 00:00:01,000 --> 00:00:03,000Hola, primeros 3 segundos...2 00:00:03,000 --> 00:00:05,000Otro texto...
Tarea 11   Combinación de vídeo y canvas.Crear un canvas que muestre la imagen         del vídeo cada 1 seg.Ver: cursoHtml...
Ejemplo   Combinación de vídeo y canvas para ir         cambiando los coloresVer: http://rocha.la/fun-with-pixels-html5-vi...
Ejemplo      Combinación de vídeo y canvas para       hacer explotar la imagen del vídeoVer: http://craftymind.com/factory...
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     ...
FallbackUsar Flash con HTML5       fallbackUsar HTML5 con Flash      fallback
Usar Flash con HTML5          fallback<object id="flowplayer" width="700" height="400"       data="http://releases.flowpla...
Usar HTML5 con Flash         fallback<video controls width=“420" height=“315">       <source src="videos/frews-intro.mp4" ...
Herramientas y        APIS       VideoJS player           jPlayer       Kaltura HTML5             ….http://html5video.org/...
Preguntas abiertas  Licencia de los contenidosStreaming desde tú dispositivo     Streaming adaptativo     Retrasos audio/v...
Conclusiones Nuevas posibilidades multimedia    Evolución natural de la web       Computación ubicua    Modelo abierto y a...
Enlaces interesantes•   http://html5-demos.appspot.com/•   http://www.w3schools.com/html5/html5_audio.asp•   http://www.w3...
Curso HTML5 y elFuturo de la Web    Audio y Vídeo   19 de Julio 2012     Jose María Álvarez Rodríguez     WESO-Universidad...
HTML5 Audio & Vídeo
HTML5 Audio & Vídeo
Upcoming SlideShare
Loading in...5
×

HTML5 Audio & Vídeo

2,563

Published on

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,563
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
43
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "HTML5 Audio & Vídeo"

  1. 1. Curso HTML5 y elFuturo 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. 2. Conceptos ClaveDiseño y Estilo Audio y Vídeo Dibujar Rich-AppsGeolocalización Semántica
  3. 3. Antecedentes Documentos Imágenes, animaciones, etc. MultimediaHTML Code Evolution 1.0 to 5.0 http://broadcast.rackspace.com/blog/HTMLtimeline/index.html
  4. 4. Evolución
  5. 5. Adobe Flash Microsoft Silverlight Algunas Ventajas… Visualmente atractivas Animaciones, etc.Independientes de formatos, códecs, etc. IDEs desarrollo
  6. 6. … y Problemas Soluciones PropietariasSoporte multidispositivo y plataforma Accesibilidad Metadatos Interoperabilidad Necesidad de plugins ….
  7. 7. Diversidad de formatos
  8. 8. Diversidad denavegadores
  9. 9. Diversidad de dispositivoshttp://mobisynth.files.wordpress.com/2011/02/tar3.png
  10. 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. 11. Tarea 0 Visitar sitios web de distribución deaudio y vídeo e identificar qué solución técnica utilizan Ejemplos: Youtube, Vimeo, Scribd, Hulu, Dalealplay, TV3, BBC, Marca, LNE, etc.
  12. 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. 13. Tarea 1Ir 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. 14. Tarea 2 Mostrar un vídeo con HTML5 http://www.mediaconverter.org/Ver: cursoHtml5/audio-video/ejemplos/t2.html
  15. 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 delnavegador…formatos, etc.
  16. 16. Formatos de audioNavegador MP3 Wav OggInternet Explorer 9Firefox 4.0Google Chrome 6Apple Safari 5Opera 10.6
  17. 17. Formatos de vídeoNavegador MP4 WebM OggInternet Explorer 9Firefox 4.0Google Chrome 6Apple Safari 5Opera 10.6
  18. 18. Tarea 3Chequear soporte de audio y vídeo de distintos navegadores en: http://html5test.com/
  19. 19. HTC Desire HDIPAD2
  20. 20. Especificación in depth…
  21. 21. <audio> y <video> PropiedadesaudioTracks Devuelve el objeto AudioTrackList que contiene la lista de pistas disponiblesautoplay Da valor o devuelve si el audio/video debería empezar cuando la página se cargabuffered Devuelve un objeto TimeRange que contiene las partes del audio/video en el buffercontroller Devuelve el objeto MediaController que contiene la información del controlador de audio/videocontrols 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/videocurrentSrc Devuelve la URL de un elemento audio/videocurrentTime Da valor o devuelve a la propiedad del tiempo de ejeución del elemento audio/video (en segundos)
  22. 22. <audio> y <video> PropiedadesdefaultMuted Da valor o devuelve si el audio/video está silenciado por omisióndefaultPlaybackRate Da valor o devuelve la velocidad del playbackduration Devuelve la longitud en segundosended Devuelve si el play ha finalizadoerror Devuelve un objeto MediaError con el error ocurridoloop Da valor o devuelve si el audio/video debe ejecutarse en buclemediaGroup Da valor o devuelve el grupo de elementos de audio/video para su gestiónmuted Da valor o devuelve si el audio/video está silenciadonetworkState Devuelve el estado de la conexión de redpaused Da valor o devuelve si el audio/video está parado
  23. 23. <audio> y <video> PropiedadesplaybackRate Da valor o devuelve la velocidad de ejecuciónplayed Devuelve un objeto TimeRanges indicando las partes del audio/video que se ha ejecutadopreload Da valor o devuelve el valor para indicar si el audio/video debe ser cargado cuando se carga la páginareadyState Devuelve el valor que indica si el audio/video está listo para ser reproductidoseekable Devuelve un objeto TimeRanges indicando las partes del audio/video que se pueden acceder directamenteseeking Devuelve el valor que indica si el usuario ha realizado un acceso directo al audio/videosrc Da valor o devuelve la dirección del recurso en reproducciónstartDate Devuelve un objeto Date que indica que el actual time offsettextTracks Devuelve un objeto TextTrackList object que indica las pistas textos disponiblesvideoTracks Devuelve un objeto VideoTrackList que indica las pistas de vídeo disponiblesvolume Da valor o devuelve el volumen del audio/video
  24. 24. <audio> y <video> Métodos Añade una nueva pista al audio/videoaddTextTrack() Chequea si el navegador puede reproducir ese tipocanPlayType() de audio/video Recarga el elemento de audio/videoload() Inicia la reproducción del audio/videoplay() Pausa de la reproducción en curso del audio/videopause()
  25. 25. <audio> y <video> Eventosabort Se ejecuta cuando un audio/video se aborta/finaliza Se ejecuta cuando el navegador comienza con lacanplay reproducción del audio/video Se ejecuta cuando el navegador puede ejecutar elcanplaythrough audio/video sin parar por el buffering Se ejecuta cuando cambia la duración del audio/videodurationchangeemptied Se ejecuta cuando la lista de reproducción es vacíaended Se ejecuta cuando la lista de reproducción finalizaerror Se ejecuta cuando se produce un error al cargar un audio/video Se ejecuta cuando el navegador ha cargado el frameloadeddata en ejecución del audio/video Se ejecuta cuando el navegador ha cargado losloadedmetadata metadatos del video
  26. 26. <audio> y <video> Eventosloadstart Se ejcuta cuando el navegador comienza a cargar el audio/videopause Se ejecuta cuando se pausa el audio/videoplay Se ejecuta cuando el navegador está en reproducción del audio/videoplaying Se ejecuta cuando el navegador está lista para reproducir después de una pausa o bien porque ha parado debido al bufferingprogress Se ejecuta cuando se está descargando el audio/videoratechange Se ejecuta cuando se varia la velocidad de reproducción del audio/videoseeked Se ejecuta cuando se finaliza de realizar un acceso directo a una parte del audio/videoseeking Se ejecuta cuando se utiliza el acceso a una parte determinada del audio/videostalled Se ejecuta cuando el navegador ha intentado acceder a los metadatos del video y éstos no están disponiblessuspend Se ejecuta cuando el navegador no es capaz de conseguir metadatostimeupdate Se ejecuta cuando se cambia la posición de reproducciónvolumechange Se ejecuta cuando se cambia el volumenwaiting Se ejecuta cuando se hace buffering del siguiente frame
  27. 27. A experimentar…
  28. 28. Tarea 4 Probar las propiedades, eventos y métodos de HTML5 audio/vídeohttp://www.w3.org/2010/05/video/mediaev ents.html
  29. 29. 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
  30. 30. Tarea 5-Sol<video src="videos/frews- intro.mp4“ poster="freews.jpg" loop controls width="420" height="315"></video>
  31. 31. Tarea 6Crear controles propios de load, play, pause y volumenVer: cursoHtml5/audio-video/ejemplos/t6.html
  32. 32. Tarea 7Gestionar el evento “loadedmetadata” y que muestra el tamaño del vídeo: videoWidth y videoHeight Ver: cursoHtml5/audio-video/ejemplos/t7.html
  33. 33. Tarea 8 Crear el elemento vídeo con los elementos source como hijosVer: cursoHtml5/audio-video/ejemplos/t8.html
  34. 34. 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>
  35. 35. Tarea 9 Gestionar los errores que se pueden producir durante la ejecución del vídeo Ver: cursoHtml5/audio-video/ejemplos/t9.htmlhttp://dev.w3.org/html5/spec/single-page.html#error-codes
  36. 36. 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
  37. 37. WebVTT1 00:00:01,000 --> 00:00:03,000Hola, primeros 3 segundos...2 00:00:03,000 --> 00:00:05,000Otro texto...
  38. 38. 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
  39. 39. Ejemplo Combinación de vídeo y canvas para ir cambiando los coloresVer: http://rocha.la/fun-with-pixels-html5-video-canvas
  40. 40. Ejemplo Combinación de vídeo y canvas para hacer explotar la imagen del vídeoVer: http://craftymind.com/factory/html5video/CanvasVideo.html
  41. 41. 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
  42. 42. FallbackUsar Flash con HTML5 fallbackUsar HTML5 con Flash fallback
  43. 43. 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>
  44. 44. 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>
  45. 45. Herramientas y APIS VideoJS player jPlayer Kaltura HTML5 ….http://html5video.org/wiki/HTML5_Player_Comparison
  46. 46. Preguntas abiertas Licencia de los contenidosStreaming desde tú dispositivo Streaming adaptativo Retrasos audio/vídeo Creación dinámica https://wiki.mozilla.org/Audio_Data_API
  47. 47. Conclusiones Nuevas posibilidades multimedia Evolución natural de la web Computación ubicua Modelo abierto y accesibleProblemas con formatos y versiones Licencias, etc.
  48. 48. 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/
  49. 49. Curso HTML5 y elFuturo 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×