leccion 5 - empieza una nueva era de navegadores web
TRANSCRIPT
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
Índice
Tecnologías para el consumo de material multimedia:
Características Flash
Características HTML5
Ejemplos HTML5
Codecs
Repaso
Comparativas
Reproductores de video
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.
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
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.
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
Etiqueta <audio> HTML5
Similar a video existe funciona la etiqueta audio: autoplay controls loop preload src
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>
Ejemplos HTML5
Ejemplos de las etiquetas <audio> y <video>
Video PiP
Video Cube
Podcast player
Video reflection
Canvas + Video
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 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
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 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.
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.
Reproductores
El look-and-feel es un factor
muy importante para que
nuestro material sea más vistoso.
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
Comparativa vitaminaweb.com
Dudas y aclaraciones
Autor: Tambako the Jaguar – Flickr
Licencia: http://creativecommons.org/licenses/by-nd/2.0/
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