multimedia• iphone 5: 1136 x 640 px • ipad: 1024x768 • ipad (4ª generación): 2048x1536 para...

Multimedia

Índice

1 Transmisión de Audio y vídeo..................................................................................... 3

2 TV móvil y en Internet................................................................................................. 3

3 Formatos de audio........................................................................................................ 4

3.1 Formatos de audio en iOS........................................................................................4

3.2 Formatos de audio soportados en Android.............................................................. 5

4 Estándares de vídeo...................................................................................................... 5

4.1 Formatos de vídeo en iOS........................................................................................7

4.2 Formatos de vídeo en Android.................................................................................7

5 Perfiles de vídeo........................................................................................................... 8

5.1 Perfil de vídeo general............................................................................................. 8

5.2 Perfil de vídeo de alta calidad..................................................................................8

5.3 Perfil de vídeo para dispositivos limitados.............................................................. 8

6 Descarga progresiva de vídeo.......................................................................................9

6.1 Preparación para descarga progresiva......................................................................9

6.2 Limitaciones de la descarga progresiva................................................................. 11

7 Streaming de vídeo.....................................................................................................11

7.1 Streaming RTSP.....................................................................................................12

7.2 HTTP Live Streaming (HLS).................................................................................13

7.3 Ficheros del stream................................................................................................ 14

8 Audio y vídeo en HTML 5......................................................................................... 15

8.1 Audio......................................................................................................................15

8.2 Vídeo......................................................................................................................16

9 Audio y Vídeo en Sencha touch................................................................................. 18

10 Audio y Vídeo en JQuery Mobile.............................................................................18

11 Repositorios de vídeos..............................................................................................19

11.1 Plataforma YouTube............................................................................................ 19

Copyright © 2012-13 Dept. Ciencia de la Computación e IA All rights reserved.

11.2 Zencoder...............................................................................................................20

12 Podcast......................................................................................................................20

12.1 RSS feed...............................................................................................................21

12.2 Subscripción a un podcast.................................................................................... 22

12.3 Publicación de un podcast.................................................................................... 23

Multimedia

2Copyright © 2012-13 Dept. Ciencia de la Computación e IA All rights reserved.

1. Transmisión de Audio y vídeo

En esta sección vamos a ver los diferentes formas de transmisión y formatos de audio yvídeo que podemos utilizar tanto desde dispositivos móviles como para el acceso a travésde Web. Las principales formas de hacer llegar estos medios a un móvil o una web son:

• Streaming: Emisión de vídeo en directo, o transmisión de radio y TV en Internet.• 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.

En las siguientes secciones se explicará en detalle cada una de estas opciones así comolos formatos de audio y vídeo disponibles que podemos utilizar.

2. TV móvil y en Internet

La televisión móvil es un formato de televisión que se accede desde un dispositivo móvilusando el protocolo de transmisión DVB-H. Este protocolo está basado en el estándarDVB-T utilizado en la TDT, pero con algunas mejoras, como el time-slicing (basado en lamultiplexación en tiempo de la transmisión de los diferentes servicios, lo que permite unahorro de energía de hasta el 90%) y otras técnicas para eliminar el efecto Dopplerproducido en los dispositivos en movimiento.

Pero debido al bajo soporte del DVB-H, se ha popularizando mucho más el uso de la TVen Internet. La televisión por Internet, también llamada televisión IP o televisión online,es la televisión distribuida a través de Internet mediante el protocolo streaming detransmisión. Cualquier dispositivo con acceso a Internet de banda ancha puede utilizarla(sin necesidad de estar preparado para otro protocolo especial). Existen multitud deaplicaciones para las diferentes plataformas que nos permiten su visualización:

Multimedia


3. Formatos de audio

Un formato de archivo de audio es un contenedor multimedia que guarda una grabaciónde audio (música, voces, etc.). Lo que hace a un archivo distinto del otro son suspropiedades: cómo se almacenan los datos, si están comprimidos o no, sus capacidades dereproducción, etc. A continuación se analizan los formatos de audio que podemos utilizaren iOS y en Android.

3.1. Formatos de audio en iOS

Dado que en los dispositivos iOS contamos con hardware de descompresión, podemosaprovecharlo para reproducir formatos comprimidos, como los siguientes:

• 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 (descomprimir) un fichero simultáneo, si se intentareproducir un segundo se hará por software. Lo cual resultará demasiado costoso porquese tendrá que realizar la descompresión también, en estos casos es preferible utilizar (enel audio secundario) un formato sin compresión.

Para los formatos sin compresión (o con compresión simple) no es necesario utilizar unhardware específico, pues se pueden reproducir por software con escaso coste. Esto nospermite reproducir varios sonidos simultáneos sin generar sobrecarga al sistema. Losformatos sin compresión son muy útiles para efectos de sonido, mientras que los queutilizan compresión lo son para reproductores de música.

Los formatos sin compresión soportados son:

• Linear PCM (sin compresión)• IMA4 (IMA/ADPCM)• iLBC (internet Low Bitrate Codec)

Multimedia


• µ-law y a-law

Todos estos formatos pueden ir encapsulados en ficheros de diferente tipo, como:

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

Siendo el formato preferido el CAFF (Core Audio File Format, desarrollado por Apple).Este tipo de fichero puede contener cualquiera de las codificaciones explicadasanteriormente, aunque también será preferible usar PCM (Little-Endian Integer 16-bit,LEI16).

En caso de haber problemas de espacio, para conseguir una mejor optimizaciónpodríamos usar "AAC" para música de fondo y "IMA4" para los efectos de sonido.

Para transformar de un formato a otro disponemos de herramientas como: afconvert,afinfo, afplay.

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

Por ejemplo, para transformar a PCM LEI16 empaquetado en CAFF usaremos:

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

3.2. Formatos de audio soportados en Android

En Android podemos reproducir ficheros de audio de diferentes tipos, tanto concompresión como sin compresión:

• AAC, HE-AACv1, HE-AACv2, empaquetados en ficheros de tipo: 3gp, mp4, m4a,aac (3.1+), ts (3.0+)

• AMR-NB, AMR-WB, empaquetados en ficheros de tipo: 3gp• Vorbis, empaquetado en ficheros de tipo: ogg, mkv (4.0+)• PCM, empaquetado en ficheros de tipo wav• FLAC (3.1+)• MP3• MIDI

4. Estándares de vídeo

El formato de vídeo indica el modo en que se guardan los datos de un archivo de vídeocon el fin de que puedan ser interpretados por el ordenador. Existen varios formatos devídeo de gran implantación: el QuickTime Movie (MOV), el AVI y el correspondiente al

Multimedia


estándar MPEG. El formato QuickTime Movie (MOV), creado por Apple, esmultiplataforma y en sus versiones más recientes permite interactuar con películas en 3Dy realidad virtual. El AVI (Audio Video Interleaved, audio vídeo intercalado) es unformato también multiplataforma. Tanto *.avi como *.mov son contenedores de audio yvídeo con lo que son formatos de archivo. A este archivo habría que especificarle el tipode video o audio que está conteniendo y que puede ser sin compresión o con lacompresión soportada por dicho fichero como pueden ser para los *.avi el divx, Dv-pal,etc. y para *.mov el sorenson, H.264, etc.

El formato correspondiente al estándar MPEG (Moving Pictures Experts Group) produceuna compresión de los datos con una pequeña pérdida de la calidad; desde su creación, seha definido el MPEG-1, utilizado en CD-ROM y Vídeo CD, el MPEG-2, usado en losDVD de Vídeo y la televisión digital, y el MPEG-4, que se emplea para transmitir vídeo eimágenes en ancho de banda reducido; es un formato adecuado para distribuir multimediaen la Web. El formato MPEG-4 es la base de actuales formatos como el divx, xvid o elH.264, siendo este último (H.264) un códec tan potente que soporta vídeos de granformato y calidad excelente con anchos de banda muy reducidos.

El desarrollo de Internet ha propiciado formatos que permiten visualizar vídeos a travésde la red, sin tener que descargar previamente el archivo completo; para esta finalidad, laempresa RealNetworks ha establecido RealVideo y Microsoft su formato de vídeocorrespondiente al Windows Media Player (Reproductor de Windows Media), ambos congran futuro en el desarrollo de la distribución de vídeo en tiempo real a través de Internet.

Una empresa especializada en desarrollar tecnologías de compresión de vídeo es On2Technologies, Inc., originalmente conocida como The Duck Corporation. Entre lastecnologías de compresión de vídeo que desarrolla On2 se encuentran los códec de vídeoTrueMotion 1 y 2, y desde VP3 a VP8, los cuales han sido liberados como código libre.Todos ellos han sido diseñados como alternativa a las tecnologías de vídeo de WindowsMedia Video, RealVideo, MPEG-4 y H.264/MPEG-4 AVC. Existen varias compañíasentre las cuales están Adobe (Macromedia), Apple Computer, RealNetworks, Skype yAOL entre otros, que han elegido las tecnologías de compresión de vídeo de On2 debidoa que los códecs ofrecen muy buena calidad de vídeo, la licencia cuesta menos y noposeen complicadas cuotas de licencias de patentes.

Resumiendo, los estándares de vídeo que más se utilizan actualmente son:

• Conjunto de especificaciones MPEG-4• Parte 2 (Visual, implementado en DivX, Xvid), compatible con H.263• Parte 10 (MPEG-4 AVC, Advance Video Coding), igual que H.264• Parte 14 (Formato de fichero .mp4)

• ITU-T serie H (Sistemas audiovisuales y multimedia)• H.263 (bajo bitrate para videoconferencia)• H.264 (alta calidad con menor bitrate)

• On2Technologies

Multimedia


• VP8 (formato de codificación abierto)• Licencia Creative Commons• libvpx codifica en este formato (licencia BSD)• Formato .webm (Video VP8 + Audio Vorbis)

4.1. Formatos de vídeo en iOS

El sistema operativo iOS soporta ficheros de tipo mov, mp4, m4v y 3gp, y los siguientesformatos de codificación:

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

• H.264, hasta 768 Kbps, 320x240, 30fps, Baseline Profile hasta nivel 1.3. AudioAAC-LC de hasta 160 Kbps, 48 kHz, stereo

• MPEG-4, hasta 2.5 Mbps, 640x480, 30fps, Simple Profile. Audio AAC-LC de hasta160 Kbps, 48 kHz, stereo

Sin embargo, los dispositivos modernos soportan mayores resoluciones, como:

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

Para estos nuevos dispositivos 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 hasta160 Kbps, 48kHz, stereo (.m4v, .mp4, y .mov)

• Motion JPEG (M-JPEG) hasta 35 Mbps, 1280 x 720, 30 fps. Audio ulaw, PCM stereo(.avi)

4.2. Formatos de vídeo en Android

En los dispositivos Android podremos utilizar cualquiera de los siguientes formatos devídeo:

• H.263, empaquetados en ficheros de tipo: 3pg, mp4• H.264 / MPEG 4-AVC Baseline Profile, empaquetados en ficheros de tipo: 3gp, mp4,

ts (3.0+)• MPEG-4 SP (Simple Profile), empaquetados en ficheros de tipo: 3gp• VP8 (Android 2.3.3+), empaquetados en ficheros de tipo: webm, mkv (4.0+)

Multimedia


5. Perfiles de vídeo

Dependiendo de los dispositivos que queramos soportar y de la calidad de vídeo que estossoporten podemos crear diferentes perfiles de formato de vídeo.

5.1. Perfil de vídeo general

La codificación H.264 es soportada por la mayoría de dispositivos. Por lo tanto, paraasegurarnos de que funcione en la mayor parte de smartphones, y en dispositivos iOS yAndroid sin problemas, podemos usar para el vídeo:

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

Y para el audio:

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

5.2. Perfil de vídeo de alta calidad

Pero el perfil de vídeo anterior desaprovecha las características de dispositivos de últimageneración como las últimas versiones de iPhone o iPad. Para aprovechar estosdispositivos podemos crear otro perfil de alta calidad, usando para el vídeo:

• 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

Y para el audio:

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

5.3. Perfil de vídeo para dispositivos limitados

Si queremos extender el soporte a dispositivos antiguos, deberemos ofrecer también unperfil de vídeo de menor complejidad que los anteriores:

• Fichero 3GP, codificación MPEG-4 (Parte 2)

Multimedia


• Resolución 176x144 - 320x240• Framerate máximo de 5-15 fps• Bitrate máximo de vídeo 52 - 192 kpbs

Y para el audio:

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

6. Descarga progresiva de vídeo

Nos referimos a una "descarga progresiva" cuando los archivos de vídeo se almacenan enun servidor Web convencional (sin infraestructura adicional) y la descarga se realiza através de HTTP o HTTPS. La descarga HTTP (progresiva) es el método más común parala transferencia de archivos en Internet: cuando visita una Web, todos los elementos quela componen, textos e imágenes, se transfieren de esta manera. Una de las Webs másconocidas que utiliza este sistema es YouTube, además las nuevas etiquetas para vídeo deHTML 5 están preparadas para este tipo de uso.

Cuando se solicita un vídeo de esta forma el servidor Web comienza a transferir latotalidad del archivo, quedando almacenado temporalmente en el dispositivo local.Además, es posible visualizar el vídeo mientras se realiza esta descarga.

Las principales ventajas de este sistema es que solo se requiere un servidor Webconvencional y que una vez transferido el vídeo se puede visualizar desde cualquier puntosin necesidad de volver a cargar o esperar. Pero también tiene desventajas importantes:produce un mal uso del ancho de banda pues descarga todo el vídeo al principio usandotodo el ancho de banda disponible, cuando a lo mejor el usuario solo quiere visualizar unaparte de éste.

En Android sólo podemos acceder al vídeo mediante el protocolo HTTP. Aunque a partirde la versión 3.0 de Android ya se permite también el uso de HTTPS.

6.1. Preparación para descarga progresiva

Para utilizar este tipo de reproducción es necesario que el formato de los vídeos losoporte. Esto es debido a que el cliente debe poder obtener la información del vídeo antesde iniciar la descarga o reproducción. Para esto la cabecera del archivo debe de estarcodificada de forma que el formato se indique antes que el contenido. En la siguienteimagen se muestra el esquema de codificación de un vídeo (mov, mp4). En este caso, parapermitir la descarga progresiva, la sección MOOV (con los metadatos del vídeo) debe irsiempre antes que MDAT (con los datos de la película), pero después de FTYP.

El vídeo (mov, mp4) está dividido en átomos, donde:

Multimedia


• ftyp: Formato de la película.• moov: Contiene metadatos.• wide: Permite ampliar moov.• mdat: Contiene datos de la película.

En caso de que las cabeceras no estén en el orden correcto (pues hay aplicaciones que noguardan los vídeos de esta forma), será necesario modificar el vídeo para corregirlo. Estaoperación se denomina Fast start, y existen muchas herramientas que nos pueden ayudara realizar este proceso:

• QTIndexSwapper: Aplicación Flash http://renaun.com/blog/code/qtindexswapper/• mp4-FastStart: Aplicación para Windows http://www.datagoround.com/lab/• QuickTime: http://support.apple.com/kb/HT2438• QTFastStart: Aplicación Python https://github.com/danielgtaylor/qtfaststart

En la siguiente imagen se muestra un esquema de este proceso, en el que si intentamosreproducir un archivo con un formato incorrecto nos aparecerá un aviso indicando que setiene que descargar todo el vídeo antes de la reproducción. Por lo que tendremos quecorregir las cabeceras de este archivo.

Multimedia


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

http://www.datagoround.com/lab/

http://support.apple.com/kb/HT2438

https://github.com/danielgtaylor/qtfaststart

6.2. Limitaciones de la descarga progresiva

Además de las desventajas que ya se han comentado (como el mal uso del ancho debanda) existen otras referentes a restricciones impuestas por Apple para la publicación enla App Store. Pues no nos va a permitir descargar:

• Vídeos de más de 10 minutos• Vídeos de más de 5Mb

En estos casos será necesario utilizar el protocolo de transmisión streaming (actualmenteel sistema aceptado por Apple es el HTTP Live Streaming), además este mismo protocoloes el utilizado para las transmisiones en directo.

7. Streaming de vídeo

El streaming es la distribución de multimedia a través de una red de computadoras demanera que el usuario consume el producto al mismo tiempo que se descarga. La palabrastreaming se refiere a que se trata de una corriente continua (sin interrupción). Este tipode tecnología funciona mediante un búfer de datos que va almacenando lo que se vadescargando para luego mostrarse al usuario. Esto se contrapone al mecanismo dedescarga de archivos, que requiere que el usuario descargue los archivos por completopara poder acceder a ellos. El término se aplica habitualmente a la difusión de audio o

Multimedia


vídeo, siendo el protocolo principal usado para la transmisión de televisión y radio porInternet.

Este protocolo tiene varias ventajas frente a la descarga progresiva:

• Se puede comenzar la reproducción en cualquier punto de un vídeo sin necesidad deesperar a que se descargue todo el contenido. La reproducción es prácticamenteinmediata.

• Ahorro de ancho de banda pues sólo se transfiere (descarga) el fragmento de vídeoque visionan los usuarios (más un pequeño "buffer").

• Más protección para los vídeos, porque el archivo de vídeo no se almacena en elordenador de los usuarios; por lo tanto, resulta más difícil de copiar.

El protocolo recomendado actualmente para el streaming de vídeo es el HTTP LiveStreaming. Este protocolo está soportado por los dispositivos iOS y Android a partir de laversión 3.0 (sólo ficheros MPEG-2 TS). Para versiones anteriores de Android podemosutilizar RTSP (RTP, SDP).

7.1. Streaming RTSP

El protocolo de flujo en tiempo real (del inglés Real Time Streaming Protocol) establecey controla uno o muchos flujos sincronizados de datos, ya sean de audio o de vídeo.RTSP es un protocolo no orientado a conexión, en lugar de esto el servidor mantiene unasesión asociada a un identificador, en la mayoría de los casos RTSP usa TCP para datosde control del reproductor y UDP para los datos de audio y vídeo aunque también puedeusar TCP en caso de que sea necesario.

La aplicación VLC nos facilita la creación de un servidor de streaming con RTSP. En lasiguiente imagen se muestra una captura de las opciones de configuración necesarias deesta aplicación.

Multimedia


Para más información consultar la direcciónhttp://www.videolan.org/doc/streaming-howto/en/ch04.html.

7.2. HTTP Live Streaming (HLS)

HTTP Live Streaming (también conocido como HLS) es un protocolo de comunicacióndesarrollado por Apple para el streaming de contenidos multimedia basado en HTTP. Sufuncionamiento se basa en la segmentación del contenido en pequeños ficheros o trozos atransmitir. Estos segmentos se descargan utilizando el protocolo HTTP. Según sereproduce el contenido, y dependiendo de la conexión, el cliente puede seleccionarmodificar el bitrate de los archivos descargados (simplemente seleccionando el siguientesegmento con una compresión diferente). El primer fichero a transmitir es el playlist (unfichero con extensión m3u8) con los metadatos de la transmisión, como número desegmentos, bitrates disponibles, etc.

Dado que HLS funciona utilizando el protocolo estándar HTTP, no tiene problemas paraatravesar firewalls o servidores proxy. Esto no es así en otros protocolos basados en UDP,como por ejemplo RTP. Este protocolo es adecuado para su utilización en emisiones endirecto o para vídeo bajo demanda (VOD, usado en la televisión por Internet).

Para crear un servidor HLS se puede utilizar un servidor web ordinario, lo único quenecesitamos es proceso previo del vídeo o audio para realizar su codificación ysegmentación. En la siguiente imagen se muestra un esquema típico de un servidor HLS.

Multimedia


http://www.videolan.org/doc/streaming-howto/en/ch04.html

7.3. Ficheros del stream

Como ya se ha explicado, el protocolo HLS se basa en la segmentación del contenido enpequeños paquetes y en la generación de un fichero de índice denominado playlist conextensión ".m3u8" que contendrá las referencias a los segmentos que lo componen.

Cada uno de los segmentos se almacena en un fichero con extensión ".ts" que seráreferenciado mediante el fichero de índice. El playlist puede ser actualizado cuando seañaden nuevos segmentos. Además los segmentos pueden sobrescribirse para permitiremisiones en directo utilizando únicamente un número de segmentos fijo.

A continuación se incluye un ejemplo de un fichero de índice con 3 segmentos de 10segundos 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

La codificación de los ficheros de segmentos ".ts" se realiza utilizando:

• MPEG-2 Transport Stream• Vídeo H.264• Audio AAC

Para segmentar un vídeo disponemos de varias herramientas. Por ejemplo, en Macpodemos utilizar "mediafilesegmenter" para trocear un fichero de vídeo o"mediastreamsegmenter" para crear los segmentos a partir de un flujo de datos. EnLinux podemos realizar la misma operación utilizando "ffmpeg" o "mpgtx".

Multimedia


8. Audio y vídeo en HTML 5

Una de las características más importantes que se han incorporado en HTML 5 es elsoporte para la reproducción de audio y vídeo directamente con etiquetas HTML. Esdecir, no es necesario utilizar un reproductor flash como hasta ahora. El único problemaes que al ser una característica nueva solamente es soportado por las últimas versiones delos navegadores y además existen algunas diferencias entre ellos. En las siguientessecciones se explica el funcionamiento de estas nuevas etiquetas.

8.1. Audio

El nuevo elemento audio permite insertar archivos sonoros en diferentes formatos,incluyendo mp3 y ogg. Además provee de una interfaz de control sobre la reproduccióndel mismo con una API en JavaScript sin necesidad de plugins de ningún tipo (comoFlash). Añadir un reproductor de audio en HTML5 es muy simple:

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

</audio>

En Firefox obtendríamos un resultado similar a:

El texto que se encuentra entre las etiquetas "audio" solo es tenido en cuenta pornavegadores que no soporten la nueva etiqueta. El atributo “controls” indica al navegadorque muestre los controles de reproducción. En caso de no activarlo no se visualizaríanada, pero podríamos controlar la reproducción mediante funciones JavaScript, de laforma:

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

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

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

Multimedia


El formato de audio a utilizar vendrá impuesto por el navegador usado y no por elestándar:

Códec IE>=9 Firefox Chrome Safari Opera

Ogg Vorbis no sí sí no sí

WAV PCM no sí sí sí sí

MP3 sí no sí sí sí

AAC sí no sí sí sí

Speex no no sí no no

Como puede verse, combinando Vorbis y MP3 podremos ofrecer audio a todos losnavegadores mayoritarios. Existe una forma de definir más de un archivo de audio para laetiqueta "audio", en lugar de usar el atributo “src”, utilizaremos la etiqueta “source” parapoder definir múltiples archivos. Estas etiquetas se irán leyendo de arriba a abajo hastaque el navegador encuentre un formato soportado. De esta manera podremos dar soporte atodos los 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>

En este ejemplo hemos añadido además una tercera línea con un reproductor Flash por sino fuesen soportados ninguno de los formatos anteriores, y un link directo de descargapara aquellos que tampoco soporten Flash. Así estaremos ofreciendo nuestro contenido atodos los navegadores y dispositivos manteniendo unas buenas prácticas en cuanto aaccesibilidad del contenido se refiere.

8.2. Vídeo

La nueva especificación de HTML5 soporta la inclusión de vídeo en las páginas web deforma nativa. La etiqueta "video" no especifica el formato del mismo sino que el uso deuno u otro vendrá impuesto por el fabricante del navegador:

Códec IE>=9 Firefox Chrome Safari Opera

Ogg Theora no sí sí no sí

H.264 sí no no sí no

VP8 no sí sí no sí

Multimedia


El elemento "video" dispone de los atributos “autoplay”, “loop” y “preload”, para activarla auto-reproducción, para indicar que se reproduzca en bucle y para activar/desactivar laprecarga del vídeo. Asimismo puedes utilizar los controles que te ofrece el navegador deforma nativa utilizando el atributo "controls" o bien puedes ofrecer tus propios controlesen JavaScript (de forma similar a como lo vimos en la sección anterior). Dado que elvídeo ocupa un espacio, también podremos definir sus dimensiones con los atributos“width” y “height”. E incluso podemos indicar una imagen para que se muestre antes dela reproducción mediante el atributo “poster”:

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

Con lo que obtendríamos un resultado similar a:

Al igual que con la etiqueta audio, para dar soporte a todos los navegadores podemosespecificar diferentes fuentes de vídeo con distintos formatos. También podemos añadir elplugin de Flash a través de la etiqueta object e incluso incluir un link de descarga, por sininguno de los formatos anteriores fuese compatible. A continuación se incluye unejemplo:

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

8.2.1. HLS en HTML5

La nueva etiqueta "video" de HTML 5 también soporta la reproducción de vídeoutilizando el protocolo HLS. Para esto simplemente tenemos que indicar el fichero deíndice (.m3u8) en el atributo "src" de la etiqueta. A continuación se muestra un código de

Multimedia


ejemplo:

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

9. Audio y Vídeo en Sencha touch

La API de Sencha Touch proporciona funcionalidad para controlar elementos de audio yvídeo. Sin embargo, en realidad realiza una conversión a las etiquetas nativas de HTML 5y genera código javascript para su control (a través de su API).

Estos componentes se pueden añadir como "items" de un panel, por ejemplo, para elelemento vídeo:

var pnl = new Ext.Panel({fullscreen: true,items: [

{xtype : 'video',width : 175,height : 98,url : "videofile.mov",posterUrl: 'imagefile.png'

}]

});

Donde "url" es la dirección del vídeo y "posterUrl" una imagen opcional que se mostraráantes de la visualización. El código para el componente de "audio" sería el siguiente:

var pnl = new Ext.Panel({fullscreen: true,items: [

{xtype: 'audio',url : "audiofile.mp3"

}]

});

En la API de Sencha Touch se puede encontra mucha más información, como el resto demétodos que podemos utilizar para el control de estos elementos, en las siguientestenemos disponible toda esta información:http://docs.sencha.com/touch/1-1/#!/api/Ext.Videohttp://docs.sencha.com/touch/1-1/#!/api/Ext.Audio

10. Audio y Vídeo en JQuery Mobile

En JQuery Mobile podemos utilizar directamente las nuevas etiquetas de "audio" y

Multimedia


http://docs.sencha.com/touch/1-1/#!/api/Ext.Video

http://docs.sencha.com/touch/1-1/#!/api/Ext.Audio

"video" disponibles en HTML 5.

11. Repositorios de vídeos

Existen servicios que nos permiten alojar vídeos en un repositorio y posteriormenteacceder a ellos desde nuestras aplicaciones, como por ejemplo: YouTube o Zencoder.

11.1. Plataforma YouTube

Podemos aprovechar la plataforma YouTube para subir vídeos y acceder a ellos desdenuestras aplicaciones, ya sea desde una página Web o desde una aplicación Web paramóvil. En este segundo caso nos tenemos que asegurar de activar la opción "Hacer queeste vídeo esté disponible en teléfonos móviles y en TV" en la sección de"Configuración" del vídeo que hayamos subido. En la siguiente imagen se muestra unacaptura de esta opción:

Para utilizar un vídeo de YouTube en una página Web (ya sea un vídeo que hemos subidonosotros o cualquier otro) podemos obtener el código HTML desde las opciones queaparecen debajo del propio vídeo: apretamos sobre el botón "Share" para mostrar lasopciones de compartir, y elegimos la opción "Embed", que nos mostrará el código HTMLque tenemos que añadir a nuestra Web. Este código utiliza la etiqueta "iframe" parainsertar el vídeo, de la forma:

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

donde "VIDEO_ID" será el identificador del propio vídeo, por ejemplo:

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

Si lo reproducimos en una aplicación web para móvil obtendríamos un resultado similar

Multimedia


al siguiente:

11.2. Zencoder

Otro ejemplo de repositorio de vídeos es Zencoder (http://zencoder.com). La filosofía deesta herramienta es diferente, nos permite subir vídeos que se almacenarán y codificaránautomáticamente en múltiples formatos para su acceso. Además da soporte de acceso paratodo tipo de dispositivos y permite realizar streaming de los vídeos.

12. Podcast

El podcasting consiste en la distribución de archivos multimedia (normalmente audio ovídeo, que puede incluir texto como subtítulos y notas) mediante un sistema de redifusión(RSS) que permita suscribirse y usar un programa que lo descarga para que el usuario loescuche en el momento que quiera.

El término podcast surge como contracción de iPod y broadcast (transmisión).Inicialmente se refería a las emisiones de audio, pero posteriormente se ha usado deforma común para referirse a emisiones multimedia, de vídeo y/o audio, audiolibros oincluso documentos.

El contenido de estos podcast debe de estar disponible para la sincronización con eldispositivo mediante diferentes medios:

• Descarga directa (por cable, wifi o a través de la red móvil).• Suscripción para la descarga automática cuando hayan nuevos capítulos disponibles.• Reproducción online sin necesidad de descarga.

Además estos podcast se pueden publicar en diferentes formatos, dependiendo de su tipo:

• Audio:• .m4a (audio/x-m4a)

Multimedia


http://zencoder.com

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

12.1. RSS feed

La suscripción a un podcast se realiza a través de una fuente RSS, el cual nos permitedifundir la información actualizada a los usuarios. RSS son las siglas de Really SimpleSyndication, un formato XML para indicar o compartir contenido en la web. El formatopermite distribuir contenidos a través del navegador o utilizando un software diseñadopara leer estos contenidos RSS.

Las etiquetas principales del documento XML del RSS son: "rss" que será la etiquetacontenedora global, "channel" que indicará el canal de distribución, y una etiqueta "item"por cada uno de los episodios. A continuación se incluye un ejemplo de una estructurabásica:

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

<item>

</item>

...</channel>

</rss>

El podcast se define como un canal (channel), el cuan deberá contener al menos lasetiquetas "title", "link" y "description". Además de una serie de etiquetas opcionales coninformación de idioma, autor, etc.

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

Multimedia

<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"/>

El canal contiene varios episodios (items), cuyas etiquetas básicas son "title", "link" y"description". Para añadir nuevos episodios simplemente tenemos que añadir un nuemoelemento "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 dedesarrollo</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>

En las direcciones http://www.apple.com/itunes/podcasts/specs.html yhttp://www.w3schools.com/rss/rss_item.asp podemos encontrar mucha más informaciónsobre como generar un podcast y distribuirlo.

12.2. Subscripción a un podcast

Existen multitud de herramientas que permiten la suscripción a un podcast, por ejemplo através de web algunas de las más conocidas son: Google Reader, Bloglines, MyYahoo!,Netvibes, o FeedReader.

Pero también podemos utilizar aplicaciones de escritorio, como iTunes (usando la opción"Avanzado > Suscribirse a un podcast ...") o la nueva aplicación de iOS llamada"podcast".

Multimedia


http://www.apple.com/itunes/podcasts/specs.html

http://www.w3schools.com/rss/rss_item.asp

En Android podemos utilizar Google Listen. A continuación se muestran algunas capturasde esta herramienta:

12.3. Publicación de un podcast

Existen multitud de páginas para la publicación de podcast, esto dependerá de la temáticadel mismo. Por ejemplo, en España algunas de las más famosas son ivoox o los podcastde rtve.es, que nos permiten escuchar de forma offline los programas de radio además desuscribirnos.

Pero una de las fuentes más famosas y utilizadas es la App Store, donde podemos solicitarla publicación de un podcast. Para esto, utilizando nuestra cuenta de iTunes, deberemosentrar en la iTunes Store, en la sección de Podcast, y pulsar sobre "Enviar un podcast".

Multimedia


Multimedia


multimedia• iphone 5: 1136 x 640 px • ipad: 1024x768 • ipad (4ª generación): 2048x1536 para...

Documents