![Page 1: Leccion 5 - Empieza una nueva era de navegadores web](https://reader033.vdocuments.net/reader033/viewer/2022052600/557b4298d8b42a0d388b46a2/html5/thumbnails/1.jpg)
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 [email protected] | www.rauljimenez.infoLicenciado bajo GFDL
![Page 2: Leccion 5 - Empieza una nueva era de navegadores web](https://reader033.vdocuments.net/reader033/viewer/2022052600/557b4298d8b42a0d388b46a2/html5/thumbnails/2.jpg)
Índice
Tecnologías para el consumo de material multimedia:
Características Flash
Características HTML5
Ejemplos HTML5
Codecs
Repaso
Comparativas
Reproductores de video
![Page 3: Leccion 5 - Empieza una nueva era de navegadores web](https://reader033.vdocuments.net/reader033/viewer/2022052600/557b4298d8b42a0d388b46a2/html5/thumbnails/3.jpg)
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.
![Page 4: Leccion 5 - Empieza una nueva era de navegadores web](https://reader033.vdocuments.net/reader033/viewer/2022052600/557b4298d8b42a0d388b46a2/html5/thumbnails/4.jpg)
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
![Page 5: Leccion 5 - Empieza una nueva era de navegadores web](https://reader033.vdocuments.net/reader033/viewer/2022052600/557b4298d8b42a0d388b46a2/html5/thumbnails/5.jpg)
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.
![Page 6: Leccion 5 - Empieza una nueva era de navegadores web](https://reader033.vdocuments.net/reader033/viewer/2022052600/557b4298d8b42a0d388b46a2/html5/thumbnails/6.jpg)
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
![Page 7: Leccion 5 - Empieza una nueva era de navegadores web](https://reader033.vdocuments.net/reader033/viewer/2022052600/557b4298d8b42a0d388b46a2/html5/thumbnails/7.jpg)
Etiqueta <audio> HTML5
Similar a video existe funciona la etiqueta audio: autoplay controls loop preload src
![Page 8: Leccion 5 - Empieza una nueva era de navegadores web](https://reader033.vdocuments.net/reader033/viewer/2022052600/557b4298d8b42a0d388b46a2/html5/thumbnails/8.jpg)
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>
![Page 9: Leccion 5 - Empieza una nueva era de navegadores web](https://reader033.vdocuments.net/reader033/viewer/2022052600/557b4298d8b42a0d388b46a2/html5/thumbnails/9.jpg)
Ejemplos HTML5
Ejemplos de las etiquetas <audio> y <video>
Video PiP
Video Cube
Podcast player
Video reflection
Canvas + Video
![Page 10: Leccion 5 - Empieza una nueva era de navegadores web](https://reader033.vdocuments.net/reader033/viewer/2022052600/557b4298d8b42a0d388b46a2/html5/thumbnails/10.jpg)
Codecs
Veamos un breve resumen de la guerra de los codecs
![Page 11: Leccion 5 - Empieza una nueva era de navegadores web](https://reader033.vdocuments.net/reader033/viewer/2022052600/557b4298d8b42a0d388b46a2/html5/thumbnails/11.jpg)
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
![Page 12: Leccion 5 - Empieza una nueva era de navegadores web](https://reader033.vdocuments.net/reader033/viewer/2022052600/557b4298d8b42a0d388b46a2/html5/thumbnails/12.jpg)
Comparativa H.264 vs VP8
![Page 13: Leccion 5 - Empieza una nueva era de navegadores web](https://reader033.vdocuments.net/reader033/viewer/2022052600/557b4298d8b42a0d388b46a2/html5/thumbnails/13.jpg)
Comparativa H.264 vs VP8 (2)
Más en: quavlive.com/video_codec_comparison
![Page 14: Leccion 5 - Empieza una nueva era de navegadores web](https://reader033.vdocuments.net/reader033/viewer/2022052600/557b4298d8b42a0d388b46a2/html5/thumbnails/14.jpg)
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.
![Page 15: Leccion 5 - Empieza una nueva era de navegadores web](https://reader033.vdocuments.net/reader033/viewer/2022052600/557b4298d8b42a0d388b46a2/html5/thumbnails/15.jpg)
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.
![Page 16: Leccion 5 - Empieza una nueva era de navegadores web](https://reader033.vdocuments.net/reader033/viewer/2022052600/557b4298d8b42a0d388b46a2/html5/thumbnails/16.jpg)
Reproductores
El look-and-feel es un factor
muy importante para que
nuestro material sea más vistoso.
![Page 17: Leccion 5 - Empieza una nueva era de navegadores web](https://reader033.vdocuments.net/reader033/viewer/2022052600/557b4298d8b42a0d388b46a2/html5/thumbnails/17.jpg)
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
![Page 18: Leccion 5 - Empieza una nueva era de navegadores web](https://reader033.vdocuments.net/reader033/viewer/2022052600/557b4298d8b42a0d388b46a2/html5/thumbnails/18.jpg)
Comparativa vitaminaweb.com
![Page 19: Leccion 5 - Empieza una nueva era de navegadores web](https://reader033.vdocuments.net/reader033/viewer/2022052600/557b4298d8b42a0d388b46a2/html5/thumbnails/19.jpg)
Dudas y aclaraciones
Autor: Tambako the Jaguar – Flickr
Licencia: http://creativecommons.org/licenses/by-nd/2.0/
![Page 20: Leccion 5 - Empieza una nueva era de navegadores web](https://reader033.vdocuments.net/reader033/viewer/2022052600/557b4298d8b42a0d388b46a2/html5/thumbnails/20.jpg)
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