HTML5 Audio & Vídeo
Upcoming SlideShare
Loading in...5
×
 

HTML5 Audio & Vídeo

on

  • 2,723 views

 

Statistics

Views

Total Views
2,723
Views on SlideShare
2,493
Embed Views
230

Actions

Likes
1
Downloads
41
Comments
0

2 Embeds 230

http://www.josemalvarez.es 228
https://www.linkedin.com 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

HTML5 Audio & Vídeo HTML5 Audio & Vídeo Presentation Transcript

  • 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
  • Conceptos ClaveDiseño y Estilo Audio y Vídeo Dibujar Rich-AppsGeolocalización Semántica
  • Antecedentes Documentos Imágenes, animaciones, etc. MultimediaHTML Code Evolution 1.0 to 5.0 http://broadcast.rackspace.com/blog/HTMLtimeline/index.html View slide
  • Evolución View slide
  • Adobe Flash Microsoft Silverlight Algunas Ventajas… Visualmente atractivas Animaciones, etc.Independientes de formatos, códecs, etc. IDEs desarrollo
  • … y Problemas Soluciones PropietariasSoporte multidispositivo y plataforma Accesibilidad Metadatos Interoperabilidad Necesidad de plugins ….
  • 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 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>
  • 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.
  • 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>
  • 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
  • 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.w3schools.com/html5/html5_ref_av_dom. asp Soporte Depende delnavegador…formatos, etc.
  • 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 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)
  • <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
  • <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
  • <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()
  • <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
  • <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
  • A experimentar…
  • Tarea 4 Probar las propiedades, eventos y métodos de HTML5 audio/vídeohttp://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 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: cursoHtml5/audio-video/ejemplos/t7.html
  • 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=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.htmlhttp://dev.w3.org/html5/spec/single-page.html#error-codes
  • 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
  • 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: cursoHtml5/audio-video/ejemplos/t11.html
  • Ejemplo Combinación de vídeo y canvas para ir cambiando los coloresVer: http://rocha.la/fun-with-pixels-html5-video-canvas
  • Ejemplo Combinación de vídeo y canvas para hacer explotar la imagen del vídeoVer: 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
  • FallbackUsar Flash con HTML5 fallbackUsar 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>
  • 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>
  • Herramientas y APIS VideoJS player jPlayer Kaltura HTML5 ….http://html5video.org/wiki/HTML5_Player_Comparison
  • 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
  • Conclusiones Nuevas posibilidades multimedia Evolución natural de la web Computación ubicua Modelo abierto y accesibleProblemas 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 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