Programación web para móviles · 2012-11-30 · • Funcionará en todos los dispositivos iOS y...

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óviles

Hay 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-AACv23gp, mp4, m4a, aac (3.1+), ts (3.0+)

• AMR-NB, AMR-WB3gp

• Vorbisogg, mkv (4.0+)

• PCMwav

• 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 Profile3gp, 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).

<audio src="archivo.mp3" controls> <p>Tu navegador no soporta el elemento audio</p></audio>

<audio src="archivo.mp3" controls> <p>Tu navegador no soporta el elemento audio</p></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:

<audio id="player" src="archivo.mp3"></audio><button onclick="document.getElementById(’player’).play();">Reproducir</button><button onclick="document.getElementById(’player’).pause();">Pausa</button><button onclick="document.getElementById(’player’).volume += 0.1;"> Subir Volumen</button><button onclick="document.getElementById(’player’).volume -= 0.1;"> Bajar Volumen</button>

<audio id="player" src="archivo.mp3"></audio><button onclick="document.getElementById(’player’).play();">Reproducir</button><button onclick="document.getElementById(’player’).pause();">Pausa</button><button onclick="document.getElementById(’player’).volume += 0.1;"> Subir Volumen</button><button onclick="document.getElementById(’player’).volume -= 0.1;"> Bajar Volumen</button>

<audio src="archivo.mp3" autoplay loop></audio><audio src="archivo.mp3" autoplay loop></audio>



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

<audio controls> <source src="archivo.ogg" type="audio/ogg" /> <source src="archivo.mp3" type="audio/mpeg" /> <object type="application/x-shockwave-flash" data="player.swf?soundFile=archivo.mp3"> <param name="movie" value="player.swf?soundFile=archivo.mp3" /> <a href="archivo.mp3">Descarga el archivo de audio</a> </object></audio>

<audio controls> <source src="archivo.ogg" type="audio/ogg" /> <source src="archivo.mp3" type="audio/mpeg" /> <object type="application/x-shockwave-flash" data="player.swf?soundFile=archivo.mp3"> <param name="movie" value="player.swf?soundFile=archivo.mp3" /> <a href="archivo.mp3">Descarga el archivo de audio</a> </object></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.

<video src="archivo.mp4" controls width="360" height="240" poster="poster.jpg"> </video>

<video src="archivo.mp4" controls width="360" height="240" poster="poster.jpg"> </video>



Soporte de múltiples formatos

• Podemos ofrecer formatos alternativos de vídeo para distintos navegadores

<video controls width="360" height="240" poster="poster.jpg"> <source src="archivo.ogv" type="video/ogg" /> <source src="archivo.mp4" type="video/mp4" /> <object type="application/x-shockwave-flash" width="360" height="240" data="player.swf?file=archivo.mp4"> <param name="movie" value="player.swf?file=archivo.mp4" /> <a href="archivo.mp4">Descarga la película</a> </object></video>

<video controls width="360" height="240" poster="poster.jpg"> <source src="archivo.ogv" type="video/ogg" /> <source src="archivo.mp4" type="video/mp4" /> <object type="application/x-shockwave-flash" width="360" height="240" data="player.swf?file=archivo.mp4"> <param name="movie" value="player.swf?file=archivo.mp4" /> <a href="archivo.mp4">Descarga la película</a> </object></video>



HLS en HTML5

• Podemos reproducir HLS desde HTML5 en Safari

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

<video src="http://localhost/~usuario/indice.m3u8" controls></video>

<video src="http://localhost/~usuario/indice.m3u8" controls></video>



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

<iframe src="http://www.youtube.com/embed/VIDEO_ID" width="320" height="190"></iframe>

<iframe src="http://www.youtube.com/embed/VIDEO_ID" width="320" height="190"></iframe>

<iframe src="http://www.youtube.com/watch?v=IExxe_hg9jg" width="320" height="240"></iframe>

<iframe src="http://www.youtube.com/watch?v=IExxe_hg9jg" width="320" height="240"></iframe>

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

http://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)

<?xml version="1.0" encoding="UTF-8"?><rss xmlns:itunes="http://www.itunes.com/dtds/podcast-1.0.dtd" version="2.0"> <channel>



<item>  </item>


... </channel></rss>

<?xml version="1.0" encoding="UTF-8"?><rss xmlns:itunes="http://www.itunes.com/dtds/podcast-1.0.dtd" version="2.0"> <channel>





... </channel></rss>



Información del canal<title>Servicios Multimedia para Dispositivos Móviles</title><link>http://jtech.ua.es/podcast/index.html</link><language>en-us</language><copyright>℗ & © 2012 Miguel Ángel Lozano</copyright><itunes:subtitle>Podcast sobre dispositivos móviles</itunes:subtitle><itunes:author>Miguel Ángel Lozano</itunes:author><itunes:summary>Resumen</itunes:summary><description>Descripción</description>

<itunes:owner> <itunes:name>Miguel Ángel Lozano</itunes:name> <itunes:email>[email protected]</itunes:email></itunes:owner><itunes:image href="http://jtech.ua.es/podcast/ios.jpg" />

<itunes:category text="Technology"> <itunes:category text="Gadgets"/></itunes:category><itunes:category text="TV & Film"/>

<title>Servicios Multimedia para Dispositivos Móviles</title><link>http://jtech.ua.es/podcast/index.html</link><language>en-us</language><copyright>℗ & © 2012 Miguel Ángel Lozano</copyright><itunes:subtitle>Podcast sobre dispositivos móviles</itunes:subtitle><itunes:author>Miguel Ángel Lozano</itunes:author><itunes:summary>Resumen</itunes:summary><description>Descripción</description>

<itunes:owner> <itunes:name>Miguel Ángel Lozano</itunes:name> <itunes:email>[email protected]</itunes:email></itunes:owner><itunes:image href="http://jtech.ua.es/podcast/ios.jpg" />

<itunes:category text="Technology"> <itunes:category text="Gadgets"/></itunes:category><itunes:category text="TV & Film"/>

http://jtech.ua.es/podcast/index.html

mailto:[email protected]



http://jtech.ua.es/podcast/index.html






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

<item> <title>Episodio 1</title> <itunes:author>Miguel Ángel Lozano</itunes:author> <itunes:subtitle>Características de los dispositivos</itunes:subtitle> <itunes:summary> Redes de telefonía móvil. Tipos de dispositivos. Plataformas de desarrollo </itunes:summary> <itunes:image href="http://www.jtech.ua.es/images/logo-especialista-moviles_mini.png" /> <enclosure url="http://localhost/~malozano/episodio1.mp3" length="169608456" type="audio/mpeg" /> <guid>http://localhost/~malozano/episodio1.mp3</guid> <pubDate>Mon, 5 Mar 2012 19:00:00 GMT</pubDate> <itunes:duration>1:28:20</itunes:duration> <itunes:keywords>dispositivos, moviles, redes, desarrollo</itunes:keywords></item>

<item> <title>Episodio 1</title> <itunes:author>Miguel Ángel Lozano</itunes:author> <itunes:subtitle>Características de los dispositivos</itunes:subtitle> <itunes:summary> Redes de telefonía móvil. Tipos de dispositivos. Plataformas de desarrollo </itunes:summary> <itunes:image href="http://www.jtech.ua.es/images/logo-especialista-moviles_mini.png" /> <enclosure url="http://localhost/~malozano/episodio1.mp3" length="169608456" type="audio/mpeg" /> <guid>http://localhost/~malozano/episodio1.mp3</guid> <pubDate>Mon, 5 Mar 2012 19:00:00 GMT</pubDate> <itunes:duration>1:28:20</itunes:duration> <itunes:keywords>dispositivos, moviles, redes, desarrollo</itunes:keywords></item>



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...?

Programación web para móviles · 2012-11-30 · • Funcionará en todos los dispositivos iOS y...

Documents

Transcript of Programación web para móviles · 2012-11-30 · • Funcionará en todos los dispositivos iOS y...