Instituto de Educación Secundaria Albayzín              Curso de streaming               de video y audioLección 5: Empiez...
Índice   Tecnologías para el consumo de material multimedia:       Características Flash       Características HTML5   ...
Objetivos de la lección   Conocer las diferencias entre HTML5 y Flash   Comprender las ventajas de HTML5   Conocer la s...
Características de Flash   FLV es un contenedor propietarios (Adobe)   Por tanto no estandar   Requiere de un plugin pa...
Características HTML5   El estándar aún se encuentra en borrador.   A falta de algunos cambios aparecen etiquetas:    <a...
Etiqueta <video> HTML5     audio; valor:muted     autoplay; si se     controls; si se muestran los controles     heigh...
Etiqueta <audio> HTML5Similar a video existe funciona la etiqueta audio:   autoplay   controls   loop   preload   src
Código de ejemploSoporte en varios formatos:<video autoplay controls> <source src="tu_video.ogv" type="video/ogg" /> <sour...
Ejemplos HTML5Ejemplos de las etiquetas <audio> y <video>      Video PiP      Video Cube      Podcast player      Vide...
Codecs Veamos un breve resumen de la guerra de los                  codecs
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 exce...
Comparativa H.264 vs VP8
Comparativa H.264 vs VP8 (2)Más en: quavlive.com/video_codec_comparison
Proyecto WebM   Es un proyecto para crear un formato de video abierto    y libre HTML5.   Contenedor multimedia Matroska...
Soporte codecs en navegadoresA 24 de Enero de 2010:   Opera: Ogg/Theora.   Firefox: Ogg/Theora.   Epiphany: Ogg/Theora ...
Reproductores    El look-and-feel es un factor     muy importante para que  nuestro material sea más vistoso.
Reproductores de videoSe abre un mundo de posibilidades gracias a losnuevos reproductores libres como:   VideoJS: disponi...
Comparativa vitaminaweb.com
Dudas y aclaraciones      Autor: Tambako the Jaguar – Flickr         Licencia: http://creativecommons.org/licenses/by-nd/2...
Referencias   H.264 patents: how much do they cost?   WebM an open web media project   Flumotion Streaming Software sup...
Próxima SlideShare
Cargando en…5
×

Leccion 5 - Empieza una nueva era de navegadores web

1.028 visualizaciones

Publicado el

0 comentarios
0 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Sin descargas
Visualizaciones
Visualizaciones totales
1.028
En SlideShare
0
De insertados
0
Número de insertados
72
Acciones
Compartido
0
Descargas
41
Comentarios
0
Recomendaciones
0
Insertados 0
No insertados

No hay notas en la diapositiva.

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

×