Inicio > MAF / ADF Mobile > MAF tips: Embeber vídeos de YouTube en una página AMX

MAF tips: Embeber vídeos de YouTube en una página AMX

avanttic-MAF-tipsA raíz de una consulta que vi en un foro, me pareció interesante mostrar un forma de poder visualizar vídeos de YouTube en una aplicación MAF. Se trata de algo sencillo, ya que YouTube nos proporciona un reproductor HTML5 que puede incrustarse perfectamente en una página AMX. MAF nos facilita el componente verbatim con el que podemos escribir directamente código HTML. Mediante este componente podemos incorporar cualquier tipo de elemento HTML en nuestras páginas AMX. El uso de un componente verbatim es muy sencillo: lo añadimos a la página y dentro de él incluimos un elemento CDATA con el código HTML deseado.

Hay que tener presente que estamos escribiendo código HTML; si queremos ejecutar código Javascript dentro de un componente verbatim, debemos insertarlo con un tag “script”.

Ejemplo uso A continuación vamos a ver cómo insertar el reproductor de YouTube en un componente verbatim. Antes de proceder es interesante consultar la documentación que nos ofrece Google sobre el reproductor. En la documentación se nos facilita el código Javascript necesario para inicializar el reproductor. El proceso consiste en descargar el código Javascript necesario e insertarlo en la página HTML base. Una vez descargado el código, se ejecuta el método onYouTubeIframeAPIReady que nos permite crear e inicializar un objeto “player”. Para renderizar el reproductor, la API hace uso internamente de un iframe, pero necesita un placeholder para poder saber dónde debe incrustarlo. Para realizar una prueba rápida, basta con coger el código de ejemplo que está disponible en la documentación de Google e incrustarlo en un componente verbatim. Así de fácil. Inserción código Youtube en componente AMX Hay que tener en cuenta que para poder mostrar el reproductor y los vídeos debemos incluir los dominios que son necesarios en la whitelist de nuestra aplicación. Si no los incluimos, el framework impide que se puedan resolver y no podremos descargar los Javascripts necesarios ni el contenido del vídeo. Los dominios que hace falta incluir son los siguientes: Whitelist En este enlace podéis encontrar una aplicación de ejemplo que consiste en 2 pantallas, la principal con una lista de vídeos precargada y otra de detalle que reproduce el vídeo. Al seleccionar un elemento en la lista de vídeos disponibles, la aplicación navega a la página de detalle donde se carga el reproductor.

  1. Aún no hay comentarios.
  1. No trackbacks yet.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: