1. Instituto de Educación Secundaria Albayzín
Curso de streaming
de video y audio
Lección 5: Empieza una nueva era de navegadores web
Raúl Jiménez Ortega | @hhkaos en twitter
rauljimenezortega@gmail.com | www.rauljimenez.info
Licenciado bajo GFDL

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. 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. 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. 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. 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. Etiqueta <audio> HTML5
Similar a video existe funciona la etiqueta audio:
 autoplay
 controls
 loop
 preload
 src

8. Código de ejemplo
Soporte 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. Ejemplos HTML5
Ejemplos de las etiquetas <audio> y <video>
 Video PiP
 Video Cube
 Podcast player
 Video reflection
 Canvas + Video

10. Codecs
Veamos un breve resumen de la guerra de los
codecs

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. Comparativa H.264 vs VP8

13. Comparativa H.264 vs VP8 (2)
Más en: quavlive.com/video_codec_comparison

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. Soporte codecs en navegadores
A 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. Reproductores
El look-and-feel es un factor
muy importante para que
nuestro material sea más vistoso.

17. Reproductores de video
Se abre un mundo de posibilidades gracias a los
nuevos 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. Comparativa vitaminaweb.com

19. Dudas y aclaraciones
Autor: Tambako the Jaguar – Flickr
Licencia: http://creativecommons.org/licenses/by-nd/2.0/

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