Experto en Desarrollo de Aplicaciones para Dispositivos Móviles Programación web para móviles

Transcripción

1 Programación web para móviles Sesión 7: Multimedia Depto. Ciencia de la Computación e IA

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 Multimedia - 2

3 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 Multimedia - 3

4 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 Multimedia - 4

5 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 Multimedia - 5

6 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 Multimedia - 6

7 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 afconvert -d -d[out data format] -f -f[out file format] [in [in file] [out file] Por ejemplo, para PCM LEI16 en CAFF: afconvert -f -f caff -d -d LEI16 sonido.wav sonido.caf Multimedia - 7

8 Formatos de audio soportados (Android) AAC, HE-AACv1, HE-AACv2 AMR-NB, AMR-WB Vorbis PCM FLAC (3.1+) MP3 MIDI 3gp, mp4, m4a, aac (3.1+), ts (3.0+) 3gp ogg, mkv (4.0+) wav Multimedia - 8

9 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 Multimedia - 9

10 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) Multimedia - 10

11 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 ) webm, mkv (4.0+) Multimedia - 11

12 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 khz Bitrate máximo de audio 128 kbps Funcionará en todos los dispositivos ios y Android Multimedia - 12

13 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 khz Bitrate máximo de audio 160 kbps Multimedia - 13

14 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 176x x240 Framerate máximo de 5-15 fps Bitrate máximo de vídeo kpbs Audio AAC-LC (Low Complexity) Sample rate de audio khz Bitrate máximo de audio kpbs Multimedia - 14

15 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 Multimedia - 15

16 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 Multimedia - 16

17 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 ( Multimedia - 17

18 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 Multimedia - 18

19 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) Multimedia - 19

20 Streaming RTSP con VLC Multimedia - 20

21 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) Multimedia - 21

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

23 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 Multimedia - 23

24 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, #EXTINF:10, #EXTINF:10, #EXT-X-ENDLIST Multimedia - 24

25 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 el elemento audio</p> </audio> Multimedia - 25

26 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: <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> 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 src="archivo.mp3" autoplay loop></audio> Multimedia - 26

27 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. Multimedia - 27

28 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 <a href="archivo.mp3">descarga el el archivo de de audio</a> </object> </audio> Multimedia - 28

29 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: Multimedia - 29

30 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> Multimedia - 30

31 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 <a href="archivo.mp4">descarga la la película</a> </object> </video> Multimedia - 31

32 HLS en HTML5 Podemos reproducir HLS desde HTML5 en Safari Utilizamos la etiqueta <video>, igual que para cualquier otro vídeo <video src=" controls> </video> Multimedia - 32

33 Audio y Vídeo en JQuery Mobile En JQuery Mobile podemos utilizar directamente las nuevas etiquetas de "audio" y "video" disponibles en HTML 5. Multimedia - 33

34 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" } ] }); Multimedia - 34

35 Plataforma YouTube Multimedia - 35

36 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 <iframe src=" width="320" height="190"></iframe> Por ejemplo <iframe src=" width="320" height="240"></iframe> Multimedia - 36

37 Repositorios de vídeos Existen servicios que nos permiten alojar vídeos en un repositorio Por ejemplo, Zencoder 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 Multimedia - 37

38 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 Multimedia - 38

39 Formatos del podcast Podemos publicar contenidos en diferentes formatos Audio Vídeo.m4a (audio/x-m4a).mp3 (audio/mpeg).mov (video/quicktime).mp4 (video/mp4).m4v (video/x-m4v) Libros y documentos.pdf (application/pdf).epub (document/x-epub) Multimedia - 39

40 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 <?xml version="1.0" encoding="utf-8"?> <rss <rss xmlns:itunes=" version="2.0"> <channel>  --> <item>  --> </item> <item>  --> </item> </channel> </rss> Multimedia - 40

41 Información del canal <title>servicios Multimedia para Dispositivos Móviles</title> <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:owner><itunes:image href=" /> /> <itunes:category text="technology"> <itunes:category text="gadgets"/> </itunes:category> <itunes:category text="tv & Film"/> Multimedia - 41

42 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> <item> <title>episodio 1</title> <title>episodio 1</title> <itunes:author>miguel Ángel Lozano</itunes:author> <itunes:author>miguel Ángel Lozano</itunes:author> <itunes:subtitle>características de los dispositivos</itunes:subtitle> <itunes:subtitle>características de los dispositivos</itunes:subtitle> <itunes:summary> <itunes:summary> Redes de telefonía móvil. Tipos de dispositivos. Plataformas de desarrollo Redes de telefonía móvil. Tipos de dispositivos. Plataformas de desarrollo </itunes:summary> </itunes:summary> <itunes:image href=" /> <itunes:image href=" /> <enclosure url=" <enclosure url=" length=" " type="audio/mpeg" /> length=" " type="audio/mpeg" /> <guid> <guid> <pubdate>mon, 5 Mar :00:00 GMT</pubDate> <pubdate>mon, 5 Mar :00:00 GMT</pubDate> <itunes:duration>1:28:20</itunes:duration> <itunes:duration>1:28:20</itunes:duration> <itunes:keywords>dispositivos, moviles, redes, desarrollo</itunes:keywords> <itunes:keywords>dispositivos, moviles, redes, desarrollo</itunes:keywords> </item> </item> Multimedia - 42

43 Subscripción al podcast Podemos suscribirnos desde itunes Avanzado > Suscribirse a un podcast... En Android podemos utilizar Google Listen Multimedia - 43

44 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 Multimedia - 44

45 Preguntas...? Multimedia - 45