Programación web para móvilesexpertojava.ua.es/dadm/restringido/web/traspas/sesion07... · 2012. 11. 30. · • Se puede utilizar un servidor web ordinario • Necesitamos además

Experto en Desarrollo de Aplicaciones para Dispositivos Móviles

© 2012-2013 Depto. Ciencia de la Computación e IA

Programación webpara móvilesSesión 7: Multimedia


© 2012-2013 Depto. Ciencia de la Computación e IAProgramación web para móviles Multimedia - 2

Contenidos

• Formatos de audio y vídeo

• Formas de transmisión• Descarga progresiva• Streaming

• Reproducción de audio y vídeo• HTML 5, Sencha Touch, JQuery Mobile

• Repositorios de vídeos

• Podcasts



Audio y vídeo en dispositivos móvilesHay distintas formas de hacer llegar estos medios al móvil

• Streaming

Emisión de vídeo en directo• Descarga progresiva

Podemos reproducir el vídeo mientras se descarga• Podcast

El dispositivo se sincroniza con nuestras suscripciones• Integrado en aplicaciones

El contenido se distribuye dentro de una aplicación



Formatos de audio con compresión (iOS)• Contamos con hardware de descompresión

• AAC (MPEG-4 Advanced Audio Coding)• ALAC (Apple Lossless)• HE-AAC (MPEG-4 High Efficiency AAC, no software)• MP3 (MPEG-1 audio layer 3)

• El hardware sólo puede reproducir un fichero simultáneo

• Un segundo fichero se reproduciría por software• Esto resulta demasiado costoso

• Útil para reproductores de música



Formatos de audio sin compresión (iOS)• Sin compresión o con compresión simple

• No es necesario hardware específico• Se pueden reproducir por software con escaso coste

• Formatos soportados:• Linear PCM (sin compresión)• IMA4 (IMA/ADPCM)• iLBC (internet Low Bitrate Codec)• µ-law y a-law

• Permiten reproducir varios sonidos simultáneos con escaso coste• Útil para efectos de sonido



Formatos de fichero para audio (iOS)• Podemos reproducir ficheros de audio de diferentes tipos

• .wav• .mp3• .aac• .aiff• .caf

• El formato preferido es CAFF (Core Audio File Format)• Puede contener cualquiera de las codificaciones anteriores



Formatos de audio preferidos (iOS)• PCM Little-Endian Integer 16-bit (LEI16)

• Empaquetado en un fichero CAFF

• Si hay problema de espacio• AAC para música de fondo• IMA4 para efectos de sonido

• Herramientas afconvert, afinfo, afplay

• Por ejemplo, para PCM LEI16 en CAFF:

afconvert -d [out data format] -f [out file format] [in file] [out file] afconvert -d [out data format] -f [out file format] [in file] [out file]

afconvert -f caff -d LEI16 sonido.wav sonido.cafafconvert -f caff -d LEI16 sonido.wav sonido.caf



Formatos de audio soportados (Android)• AAC, HE-AACv1, HE-AACv2

3gp, mp4, m4a, aac (3.1+), ts (3.0+)• AMR-NB, AMR-WB

3gp• Vorbis

ogg, mkv (4.0+)• PCM

wav• FLAC (3.1+)• MP3• MIDI



Formatos de vídeo (iOS)• Soporta ficheros mov, mp4, m4v y 3gp

• Formatos de codificación soportados

• H.264, hasta 1.5 Mbps, 640 x 480, 30 fps, versión de baja complejidad del H.264 Baseline Profile (no es estándar). Audio AAC-LC de hasta 160 Kbps, 48 kHz, stereo

• H.264, hasta 768 Kbps, 320 x 240, 30 fps, Baseline Profile hasta nivel 1.3. Audio AAC-LC de hasta 160 Kbps, 48 kHz, stereo

• MPEG-4, hasta 2.5 Mbps, 640 x 480, 30 frames per second, Simple Profile. Audio AAC-LC de hasta 160 Kbps, 48 kHz, stereo



Formatos de vídeo avanzados (iOS)• Los dispositivos modernos soportan mayores resoluciones

• iPhone 3G/3GS: 640x480• iPhone 4: 960x640• iPhone 5: 1136x640• iPad: 1024x768 • iPad (4ª generación): 2048x1536

• A partir de iPhone 4/iPad, los formatos de vídeo admitidos son• H.264 hasta 720p, 30 fps, Main Profile nivel 3.1. Audio AAC-LC de hasta

160 Kbps, 48kHz, stereo (.m4v, .mp4, y .mov)• MPEG-4 hasta 2.5 Mbps, 640 x 480, 30 fps, Simple Profile. Audio AAC-LC

de hasta 160 Kbps, 48kHz, stereo (.m4v, .mp4, y .mov)• Motion JPEG (M-JPEG) hasta 35 Mbps, 1280 x 720, 30 fps. Audio ulaw,

PCM stereo (.avi)



Formatos de vídeo (Android)• H.263

3pg, mp4• H.264 / MPEG 4-AVC Baseline Profile

3gp, mp4, ts (3.0+)• MPEG-4 SP (Simple Profile)

3gp• VP8 (Android 2.3.3+)

webm, mkv (4.0+)



Perfil de vídeo general• La codificación H.264 es soportada por la mayoría de dispositivos• Para asegurarnos de que funcione en la mayor parte de

smartphones podemos usar:• H.264 Baseline Profile• Resolución 480 x 320• Framerate máximo de 30 fps• Bitrate máximo de vídeo 1500 kbps

• Audio AAC• Sample rate de audio 44100 kHz• Bitrate máximo de audio 128 kbps

• Funcionará en todos los dispositivos iOS y Android



Perfil de vídeo de alta calidad• El perfil anterior desaprovecha las características de dispositivos

como iPhone 4 y iPad• Podemos crear otro perfil para aprovechar estos dispositivos:

• Vídeo H.264 Baseline Profile• Resolución 1280 x 720• Framerate máximo de 30 fps• Bitrate máximo de vídeo 5000 kbps

• Audio AAC• Sample rate de audio 48000 kHz• Bitrate máximo de audio 160 kbps



Perfil de vídeo para dispositivos limitados• Si queremos extender el soporte a dispositivos antiguos,

deberemos ofrecer también un perfil de vídeo de menor complejidad que los anteriores:

• Fichero 3GP, codificación MPEG-4 (Parte 2)• Resolución 176x144 - 320x240• Framerate máximo de 5-15 fps• Bitrate máximo de vídeo 52 - 192 kpbs

• Audio AAC-LC (Low Complexity)• Sample rate de audio 16000 kHz• Bitrate máximo de audio 16 - 24 kpbs



Descarga progresiva de vídeo• El vídeo se almacena temporalmente en el dispositivo local• Podemos reproducir el vídeo durante la descarga• Utilizamos protocolo HTTP/HTTPS para descargar el vídeo

• Podemos utilizar cualquier servidor web, sin infraestructura adicional

• En Android sólo podemos acceder al vídeo mediante HTTP• A partir de Android 3.0 también se permite HTTPS

• Es el sistema que encontramos en muchos repositorios de vídeos• Por ejemplo YouTube

• Es el sistema utilizado habitualmente por HTML5



Preparación para descarga progresiva• El cliente debe poder obtener la información del

vídeo• Debe proporcionarse antes que el contenido

• Mover estos datos al principio del fichero• Metadatos en la cabecera del vídeo

• El vídeo (mov, mp4) está dividido en átomos• ftyp Formato de la película• moov Contiene metadatos• wide Permite ampliar moov• mdat Contiene datos de la película

• moov debe ir siempre antes que mdat, pero después de ftyp



Fast start• Consiste en mover el átomo moov al comienzo del fichero• Algunas herramientas lo añaden al final• Podemos moverlo sin recodificar el vídeo

• QTIndexSwapper (http://renaun.com/blog/code/qtindexswapper/)

http://renaun.com/blog/code/qtindexswapper/



Limitaciones de la descarga progresiva• Restricciones de Apple para publicar en la App Store

• No nos permiten descargar• Vídeos de más de 10 minutos• Vídeos de más de 5Mb

• En los casos anteriores debemos utilizar streaming• El sistema aceptado por Apple es HTTP Live Streaming

• Para emisiones en directo también necesitamos streaming



Protocolos para streaming de vídeo• El protocolo recomendado actualmente es HTTP Live

Streaming

• Soportado por• Dispositivos iOS• Dispositivos Android a partir de 3.0 (sólo ficheros MPEG-2 TS)

• En versiones anteriores podemos utilizar RTSP (RTP, SDP)



Streaming RTSP con VLC



HTTP Live Streaming (HLS)• Protocolo de streaming basado en HTTP desarrollado por

Apple• Segmenta el contenido en pequeños ficheros• Los segmentos se descargan por HTTP• Permite modificar el bitrate durante la reproducción

• Funciona sobre protocolo HTTP• No tiene problema para atravesar firewalls

• Se puede utilizar para• Emisiones en directo• Video bajo demanda (VOD)



Servidor HLS• Se puede utilizar un servidor web ordinario• Necesitamos además un codificador y segmentador de flujos



Ficheros del stream• El acceso a un vídeo se hace mediante el playlist (.M3U8)

• Contiene referencias a los segmentos que lo componen• Cada segmento es un fichero .ts• Se actualiza cada vez que se añade un nuevo segmento• Los segmentos pueden sobrescribirse en emisiones en directo

• Ficheros de segmentos .ts• MPEG-2 Transport Stream• Vídeo H.264• Audio AAC

• Se generan mediante un stream segmenter: • mediafilesegmenter, mediastreamsegmenter, ffmpeg, mpgtx



Fichero de índice• Ejemplo de fichero de índice (playlist .M3U8)

• Contiene 3 segmentos de 10 segundos de duración

#EXTM3U#EXT-X-TARGETDURATION:10#EXT-X-MEDIA-SEQUENCE:1#EXTINF:10,http://media.example.com/segment0.ts#EXTINF:10,http://media.example.com/segment1.ts#EXTINF:10,http://media.example.com/segment2.ts#EXT-X-ENDLIST

#EXTM3U#EXT-X-TARGETDURATION:10#EXT-X-MEDIA-SEQUENCE:1#EXTINF:10,http://media.example.com/segment0.ts#EXTINF:10,http://media.example.com/segment1.ts#EXTINF:10,http://media.example.com/segment2.ts#EXT-X-ENDLIST



Audio en HTML5• Permite insertar y reproducir archivos sonoros en

diferentes formatos. • Provee una API en JavaScript sin necesidad de plugins de

ningún tipo (como Flash).

Tu navegador no soporta el elemento audio

Tu navegador no soporta el elemento audio



Atributos del reproductor de audio• El atributo “controls” indica al navegador que muestre los

controles de reproducción. • En caso de no activarlo no se visualizaría nada, pero podríamos

controlar la reproducción mediante funciones JavaScript:

• También podemos usar los atributos “autoplay” y “loop” para que se auto-reproduzca y para que se cree un bucle de reproducción infinito:

ReproducirPausa

Subir Volumen

Bajar Volumen

ReproducirPausa

Subir Volumen

Bajar Volumen



Formatos de audio soportados• No hay ningún formato estándar soportado por todos los

navegadores

• Como puede verse, combinando Vorbis y MP3 podremos ofrecer audio a todos los navegadores mayoritarios.



Soporte de múltiples navegadores• Podemos ofrecer formatos alternativos para diferentes

navegadores

Descarga el archivo de audio

Descarga el archivo de audio



Vídeo• HTML5 soporta la inclusión de vídeo en las páginas web

de forma nativa. • No especifica el formato del mismo sino que el uso de uno

u otro vendrá impuesto por el fabricante del navegador:



Atributos del vídeo• Atributos:

• “autoplay” - auto-reproducción• “loop” - reproducción en bucle• “preload” - activar/desactivar la precarga del vídeo• “width” y “height” - definir dimensiones de la ventana

• También podemos utilizar controles JavaScript.



Soporte de múltiples formatos• Podemos ofrecer formatos alternativos de vídeo para

distintos navegadores

Descarga la película

Descarga la película



HLS en HTML5• Podemos reproducir HLS desde HTML5 en Safari

• Utilizamos la etiqueta , igual que para cualquier otro vídeo



Audio y Vídeo en JQuery Mobile

• En JQuery Mobile podemos utilizar directamente las

nuevas etiquetas de "audio" y "video" disponibles en

HTML 5.



Audio y Vídeo en Sencha Touch• Sencha Touch proporciona funcionalidad para controlar elementos de audio y

vídeo. • En realidad realiza una conversión a las etiquetas nativas de HTML 5 y

genera código javascript para su control. var pnl = new Ext.Panel({ fullscreen: true, items: [ { xtype : 'video', width : 175, height : 98, url : "video.mov", posterUrl: 'image.png' } ]});

var pnl = new Ext.Panel({ fullscreen: true, items: [ { xtype: 'audio', url : "audio.mp3" } ]});



Plataforma YouTube



Incrustar vídeo de YouTube con HTML5• Podemos introducir en nuestras páginas vídeos de YouTube• Utilizaremos un elemento iframe• Deberemos proporcionar la URL del vídeo

• Por ejemplo

http://www.youtube.com/watch?v=IExxe_hg9jghttp://www.youtube.com/watch?v=IExxe_hg9jg



Repositorios de vídeos• Existen servicios que nos permiten alojar vídeos en un

repositorio

• Por ejemplo, Zencoder• http://zencoder.com

• Los vídeos de almacenan en múltiples formatos• Se codifican automáticamente al subirlos a la nube• Se da soporte a todos los tipos de dispositivos

• Podemos acceder a ellos vía HTTP Live Streaming

http://zencoder.com/



Podcast• Podcast = iPod + broadcast

• Audio• Vídeo• Documentos

• El contenido se sincroniza con el dispositivo• Por cable o Wi-Fi• No necesita acceso a través de la red del móvil• Se pueden utilizar offline

• Contenido multimedia episódico• Podemos suscribirnos y recibir nuevos episodios



Formatos del podcast• Podemos publicar contenidos en diferentes formatos

• Audio.m4a (audio/x-m4a) .mp3 (audio/mpeg)

• Vídeo.mov (video/quicktime).mp4 (video/mp4).m4v (video/x-m4v)

• Libros y documentos.pdf (application/pdf).epub (document/x-epub)



RSS feed• Los contenidos del podcast se publican en un documento XML• El podcast se define como un canal (channel)• El canal contiene varios episodios (items)

...

...



Información del canalServicios Multimedia para Dispositivos Móvileshttp://jtech.ua.es/podcast/index.htmlen-us℗ & © 2012 Miguel Ángel LozanoPodcast sobre dispositivos móvilesMiguel Ángel LozanoResumenDescripción

Miguel Ángel Lozano [email protected]

Servicios Multimedia para Dispositivos Móvileshttp://jtech.ua.es/podcast/index.htmlen-us℗ & © 2012 Miguel Ángel LozanoPodcast sobre dispositivos móvilesMiguel Ángel LozanoResumenDescripción

Miguel Ángel Lozano [email protected]

http://jtech.ua.es/podcast/index.htmlmailto:[email protected]:[email protected]:[email protected]://jtech.ua.es/podcast/index.htmlmailto:[email protected]:[email protected]:[email protected]



Información de los episodios• Si queremos soportar múltiples formatos, debemos crear otro feed• Añadimos nuevos episodios añadiendo un nuevo item a la lista

Episodio 1 Miguel Ángel Lozano Características de los dispositivos Redes de telefonía móvil. Tipos de dispositivos. Plataformas de desarrollo http://localhost/~malozano/episodio1.mp3 Mon, 5 Mar 2012 19:00:00 GMT 1:28:20 dispositivos, moviles, redes, desarrollo

Episodio 1 Miguel Ángel Lozano Características de los dispositivos Redes de telefonía móvil. Tipos de dispositivos. Plataformas de desarrollo http://localhost/~malozano/episodio1.mp3 Mon, 5 Mar 2012 19:00:00 GMT 1:28:20 dispositivos, moviles, redes, desarrollo



Subscripción al podcast• Podemos suscribirnos desde iTunes

• Avanzado > Suscribirse a un podcast ...

• En Android podemos utilizar Google Listen



Envío de podcast• Podemos solicitar que Apple lo publique en la App Store

• Necesitamos una cuenta de iTunes

• Entramos en iTunes Store, y en la sección Podcasts



¿Preguntas...?

Slide 1Slide 2Slide 3Slide 4Slide 5Slide 6Slide 7Slide 8Slide 9Slide 10Slide 11Slide 12Slide 13Slide 14Slide 15Slide 16Slide 17Slide 18Slide 19Slide 20Slide 21Slide 22Slide 23Slide 24Slide 25Slide 26Slide 27Slide 28Slide 29Slide 30Slide 31Slide 32Slide 33Slide 34Slide 35Slide 36Slide 37Slide 38Slide 39Slide 40Slide 41Slide 42Slide 43Slide 44Slide 45

Programación web para móvilesexpertojava.ua.es/dadm/restringido/web/traspas/sesion07... · 2012. 11. 30. · • Se puede utilizar un servidor web ordinario • Necesitamos además

Documents