Leccion 5 - Empieza una nueva era de navegadores web

1,064 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,064
On SlideShare
0
From Embeds
0
Number of Embeds
83
Actions
Shares
0
Downloads
42
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Leccion 5 - Empieza una nueva era de navegadores web

  1. 1. Instituto de Educación Secundaria Albayzín Curso de streaming de video y audioLección 5: Empieza una nueva era de navegadores webRaúl Jiménez Ortega | @hhkaos en twitterrauljimenezortega@gmail.com | www.rauljimenez.infoLicenciado bajo GFDL
  2. 2. Índice Tecnologías para el consumo de material multimedia:  Características Flash  Características HTML5  Ejemplos HTML5 Codecs  Repaso  Comparativas Reproductores de video
  3. 3. Objetivos de la lección Conocer las diferencias entre HTML5 y Flash Comprender las ventajas de HTML5 Conocer la situación actual del mercado de los codecs. Conocer algunos reproductores de videos.
  4. 4. Características de Flash FLV es un contenedor propietarios (Adobe) Por tanto no estandar Requiere de un plugin para el navegador Como formato de video soportan:  Bit Streams (variante de H.263)  On2 VP6 Como formato de audio soportan:  MP3, Nellymoser y ADPCM Alto nivel de compresión
  5. 5. Características HTML5 El estándar aún se encuentra en borrador. A falta de algunos cambios aparecen etiquetas: <audio>, <video> y <canvas> Permite ofrecer al navegador múltiples fuentes codificadas de diferente manera.
  6. 6. Etiqueta <video> HTML5  audio; valor:muted  autoplay; si se  controls; si se muestran los controles  height; altura del reproductor  width: ancho  loop; repetición  poster; imagen estática  preload; si el video empezará a cargarse tras la página.  src; URL del video
  7. 7. Etiqueta <audio> HTML5Similar a video existe funciona la etiqueta audio: autoplay controls loop preload src
  8. 8. Código de ejemploSoporte en varios formatos:<video autoplay controls> <source src="tu_video.ogv" type="video/ogg" /> <source src="tu_video.mp4" type="video/mp4" /> <object width="160" height="90" data="video.flv"> <param name="movie" value="tu_video.flv"> <embed src="tu_video.flv" width="160" height="90"> </object> <p>Tu navegador no soporta HTML5 ni Flash</p></video>
  9. 9. Ejemplos HTML5Ejemplos de las etiquetas <audio> y <video>  Video PiP  Video Cube  Podcast player  Video reflection  Canvas + Video
  10. 10. Codecs Veamos un breve resumen de la guerra de los codecs
  11. 11. Codecs A día de hoy aún no se ha decidido pero el debate se encuentra entre:  H.264/MPEG-4 AVC: ofrece un excelente nivel de calidad (patentado por MPEG-LA; Apple y Microsoft pertenence a este grupo)  VP8: liberado por Google en Mayo de 2010  OggTheora: desarrollado por la Fundación Xiph.org. Apoyo de Firefox. Dispone de versión para S.O. Móviles. Tanto VP8 como OggTheora usan licencia tipo BSD
  12. 12. Comparativa H.264 vs VP8
  13. 13. Comparativa H.264 vs VP8 (2)Más en: quavlive.com/video_codec_comparison
  14. 14. Proyecto WebM Es un proyecto para crear un formato de video abierto y libre HTML5. Contenedor multimedia Matroska para el codec de video VP8 y el codec de audio Vorbis. Ha recibido los apoyos de:  Empresas como: Mozilla, Opera y Google.  Además de otros 40 editores y fabricantes de software y hardware. Adobe Flash Player soportará también el formato.
  15. 15. Soporte codecs en navegadoresA 24 de Enero de 2010: Opera: Ogg/Theora. Firefox: Ogg/Theora. Epiphany: Ogg/Theora garantizado. Chrome: Ogg/Theora y H.264/MP4. Safari: H.264/MOV/M4V, puede reproducir Ogg/Theora con XiphQT components.
  16. 16. Reproductores El look-and-feel es un factor muy importante para que nuestro material sea más vistoso.
  17. 17. Reproductores de videoSe abre un mundo de posibilidades gracias a losnuevos reproductores libres como: VideoJS: disponible en Flash y HTML5 JWPlayer: disponible en Flash y HTML5 Flowplayer: disponible en Flash y HTML5 Y muchos más
  18. 18. Comparativa vitaminaweb.com
  19. 19. Dudas y aclaraciones Autor: Tambako the Jaguar – Flickr Licencia: http://creativecommons.org/licenses/by-nd/2.0/
  20. 20. Referencias H.264 patents: how much do they cost? WebM an open web media project Flumotion Streaming Software supports WebM live streaming Comparativa de reproductores de video

×