traspas

Transcripción

traspas

Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
Programación web
para móviles
Sesión 7: Multimedia
© 2012-2013 Depto. Ciencia de la Computación e IA Experto en Desarrollo de Aplicaciones para Dispositivos Móviles
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
Programación web para móviles
© 2012-2013 Depto. Ciencia de la Computación e IA
Multimedia - 2
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
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
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
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
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
afconvert -d
-d [out
[out data
data format]
format] -f-f [out
[out file
file format]
format] [in
[in file]
file] [out
[out file]
file]
• Por ejemplo, para PCM LEI16 en CAFF:
afconvert
afconvert -f-f caff
caff -d
-d LEI16
LEI16 sonido.wav
sonido.wav sonido.caf
sonido.caf
Multimedia - 7
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
Multimedia - 8
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 AACLC 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
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
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+)
Multimedia - 11
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
Multimedia - 12
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
• Bitrate máximo de audio 160 kbps
Multimedia - 13
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)
• Bitrate máximo de audio 16 - 24 kpbs
Multimedia - 14
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
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
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/)
Multimedia - 17
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
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
Streaming RTSP con VLC
Multimedia - 20
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
Servidor HLS
• Se puede utilizar un servidor web ordinario
• Necesitamos además un codificador y segmentador de flujos
Multimedia - 22
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
Fichero de índice
• Ejemplo de fichero de índice (playlist .M3U8)
• Contiene 3 segmentos de 10 segundos de duración
#EXTM3U
#EXTM3U
#EXT-X-TARGETDURATION:10
#EXT-X-TARGETDURATION:10
#EXT-X-MEDIA-SEQUENCE:1
#EXT-X-MEDIA-SEQUENCE:1
#EXTINF:10,
#EXTINF:10,
http://media.example.com/segment0.ts
#EXTINF:10,
#EXTINF:10,
#EXTINF:10,
#EXTINF:10,
#EXT-X-ENDLIST
#EXT-X-ENDLIST
Multimedia - 24
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
<audio src="archivo.mp3"
src="archivo.mp3" controls>
controls>
<p>Tu
<p>Tu navegador
navegador no
no soporta
soporta el
el elemento
elemento audio</p>
audio</p>
</audio>
</audio>
Multimedia - 25
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
<audioid="player"
id="player"src="archivo.mp3"></audio>
src="archivo.mp3"></audio>
<button
onclick="document.getElementById(’player’).play();">Reproducir</button>
<button onclick="document.getElementById(’player’).play();">Reproducir</button>
<button
<buttononclick="document.getElementById(’player’).pause();">Pausa</button>
onclick="document.getElementById(’player’).pause();">Pausa</button>
<button
onclick="document.getElementById(’player’).volume
<button onclick="document.getElementById(’player’).volume+=
+=0.1;">
0.1;">
Subir
Volumen</button>
Subir Volumen</button>
<button
<buttononclick="document.getElementById(’player’).volume
onclick="document.getElementById(’player’).volume-=
-=0.1;">
0.1;">
Bajar
Volumen</button>
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
<audio src="archivo.mp3"
src="archivo.mp3" autoplay
autoplay loop></audio>
loop></audio>
Multimedia - 26
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
Soporte de múltiples navegadores
• Podemos ofrecer formatos alternativos para diferentes
navegadores
<audio
<audiocontrols>
controls>
<source
<sourcesrc="archivo.ogg"
src="archivo.ogg"type="audio/ogg"
type="audio/ogg"/>
/>
<source
src="archivo.mp3"
type="audio/mpeg"
<source src="archivo.mp3" type="audio/mpeg"/>
/>
<object
type="application/x-shockwave-flash"
data="player.swf?soundFile=archivo.mp3">
<object type="application/x-shockwave-flash" data="player.swf?soundFile=archivo.mp3">
<param
<paramname="movie"
name="movie"value="player.swf?soundFile=archivo.mp3"
value="player.swf?soundFile=archivo.mp3" />
/>
<a
href="archivo.mp3">Descarga
el
archivo
de
audio</a>
<a href="archivo.mp3">Descarga el archivo de audio</a>
</object>
</object>
</audio>
</audio>
Multimedia - 28
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
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
<video src="archivo.mp4"
src="archivo.mp4" controls
controls
width="360"
width="360" height="240"
height="240" poster="poster.jpg">
poster="poster.jpg">
</video>
</video>
Multimedia - 30
Soporte de múltiples formatos
• Podemos ofrecer formatos alternativos de vídeo para
distintos navegadores
<video
<video controls
controls width="360"
height="240" poster="poster.jpg">
poster="poster.jpg">
<source
<source src="archivo.ogv"
src="archivo.ogv" type="video/ogg"
type="video/ogg" />
/>
<source
src="archivo.mp4"
type="video/mp4"
<source src="archivo.mp4" type="video/mp4" />
/>
<object
<object type="application/x-shockwave-flash"
type="application/x-shockwave-flash" width="360"
height="240"
data="player.swf?file=archivo.mp4">
data="player.swf?file=archivo.mp4">
<param
<param name="movie"
name="movie" value="player.swf?file=archivo.mp4"
value="player.swf?file=archivo.mp4" />
/>
<a
href="archivo.mp4">Descarga
la
película</a>
<a href="archivo.mp4">Descarga la película</a>
</object>
</object>
</video>
</video>
Multimedia - 31
HLS en HTML5
• Podemos reproducir HLS desde HTML5 en Safari
• Utilizamos la etiqueta <video>, igual que para cualquier
otro vídeo
<video
<videosrc="http://localhost/~usuario/indice.m3u8"
src="http://localhost/~usuario/indice.m3u8" controls>
controls>
</video>
</video>
Multimedia - 32
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
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
Plataforma YouTube
Multimedia - 35
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
<iframe src="http://www.youtube.com/embed/VIDEO_ID"
src="http://www.youtube.com/embed/VIDEO_ID"
width="320"
width="320" height="190"></iframe>
height="190"></iframe>
• Por ejemplo
<iframe
<iframe src="http://www.youtube.com/watch?v=IExxe_hg9jg"
src="http://www.youtube.com/watch?v=IExxe_hg9jg"
width="320"
width="320" height="240"></iframe>
height="240"></iframe>
Multimedia - 36
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
Multimedia - 37
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
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)
Multimedia - 39
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"
version="1.0" encoding="UTF-8"?>
encoding="UTF-8"?>
<rss
xmlns:itunes="http://www.itunes.com/dtds/podcast-1.0.dtd"
<rss xmlns:itunes="http://www.itunes.com/dtds/podcast-1.0.dtd" version="2.0">
version="2.0">
<channel>
<channel>
<!-
-->
<item>
<item>
<!-
-->
</item>
</item>
<item>
<item>
<!-
-->
</item>
</item>
...
...
</channel>
</channel>
</rss>
</rss>
Multimedia - 40
Información del canal
<title>Servicios
<title>Servicios Multimedia
Multimedia para
para Dispositivos
Dispositivos Móviles</title>
Móviles</title>
<link>http://jtech.ua.es/podcast/index.html</link>
<link>http://jtech.ua.es/podcast/index.html</link>
<language>en-us</language>
<language>en-us</language>
<copyright>℗
<copyright>℗ &
& ©
© 2012
2012 Miguel
Miguel Ángel
Ángel Lozano</copyright>
Lozano</copyright>
<itunes:subtitle>Podcast
<itunes:subtitle>Podcast sobre
sobre dispositivos
dispositivos móviles</itunes:subtitle>
móviles</itunes:subtitle>
<itunes:author>Miguel
Ángel
Lozano</itunes:author>
<itunes:author>Miguel Ángel Lozano</itunes:author>
<itunes:summary>Resumen</itunes:summary>
<itunes:summary>Resumen</itunes:summary>
<description>Descripción</description>
<description>Descripción</description>
<itunes:owner>
<itunes:owner>
<itunes:name>Miguel
<itunes:name>Miguel Ángel
Ángel Lozano</itunes:name>
Lozano</itunes:name>
<itunes:email>[email protected]</itunes:email>
<itunes:email>[email protected]</itunes:email>
</itunes:owner><itunes:image
</itunes:owner><itunes:image href="http://jtech.ua.es/podcast/ios.jpg"
href="http://jtech.ua.es/podcast/ios.jpg" />
/>
<itunes:category
<itunes:category text="Technology">
text="Technology">
<itunes:category
<itunes:category text="Gadgets"/>
text="Gadgets"/>
</itunes:category>
</itunes:category>
<itunes:category
<itunes:category text="TV
text="TV &
& Film"/>
Film"/>
Multimedia - 41
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: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="http://www.jtech.ua.es/images/logo-especialista-moviles_mini.png" />
<itunes:image href="http://www.jtech.ua.es/images/logo-especialista-moviles_mini.png" />
<enclosure url="http://localhost/~malozano/episodio1.mp3"
<enclosure url="http://localhost/~malozano/episodio1.mp3"
length="169608456" type="audio/mpeg" />
length="169608456" type="audio/mpeg" />
<guid>http://localhost/~malozano/episodio1.mp3</guid>
<guid>http://localhost/~malozano/episodio1.mp3</guid>
<pubDate>Mon, 5 Mar 2012 19:00:00 GMT</pubDate>
<pubDate>Mon, 5 Mar 2012 19: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
Subscripción al podcast
• Podemos suscribirnos desde iTunes
• Avanzado > Suscribirse a un podcast ...
• En Android podemos utilizar Google Listen
Multimedia - 43
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
¿Preguntas...?
Multimedia - 45

traspas

Transcripción

Documentos relacionados

U2 y Apple regalan el último álbum de la banda Irlandesa “Songs Of

Amazon contra iTunes (ahora sí)

EXPERIENCIA LABORAL VICTOR VILLEGAS VERDUZCO