«

»

dic 22 2012

API Oficial de Youtube – Primeros Pasos

 

Debería estar en la cama pero aquí estoy, testeando un librería y escribiendo un post para que os despertéis el sábado con una gran noticia y podáis empezar desde ya a integrar vídeos de YouTube en vuestras apps. No se vosotros pero yo llevaba mucho tiempo esperándola  había intentado varias cosas pero ninguna terminaba de funcionar bien, a excepción de un librería de terceros que rulaba por ahí pero que solo reproducía a pantalla completa, pero bueno, eso ya es cosa del pasado, ahora ya tenemos API oficial de Youtube para Android y lo que toca es poner nuestros dedos a teclear código. Así que si quieres saber como, no dudes y sigue leyendo.

Si se os da bien el tema del ingles a continuación os dejo el vídeo de presentación oficial de la librería y si no tras el podréis seguir disfrutando del post.

 

 

Una de las principales ventajas de la librería es que esta basada en la integración con un servicio distribuido como parte de la app de YouTube para Android, abstrayéndonos por completo de la implementación de esta y de los posibles cambios que se produzcan en la misma. Tan solo deberemos añadir la librería a nuestro proyecto y asegurarnos que tenemos la versión adecuada de la App de YouTube, en este caso la 4.2.16.

 

Notice

Es necesaría la versión 4.2.16 de la App Oficial de YouTube.

 

Para los que les preocupe la fragmentación, según Google durante los próximos día se irán actualizando la app en las versiones que aún no lo haya hecho, incluyendo Froyo en adelante.

 

Si importais el proyecto de ejemplo que podemos descargar junto con la librería podremos comprobar lo que nos permite realizar:

  • Incrustar videos con controles nativos.
  • Reproduccion a pantalla completa.
  • PlayerFrament, reproductor compatible con Fragments.
  • Control del video y del Fullscreen con nuestros propios controles.
  • Y varios intents nuevos para lanzar eventos y comunicarnos con la App nativa de YouTube.
 
Si os pica más aun la curiosidad podéis ojear la API Reference Guide y empaparos en profundidad.

 

¡Vamos al tema! Una vez creado nuestro proyecto deberemos descargarnos la librería:

YouTube Android Player API – Download

 

Dentro del zip que descargaremos podremos encontrar dentro del directorio libs el jar que deberemos añadir a nuestro proyecto android. Y como os comente antes un directorio sample que incluye un proyecto de prueba bastante completo con todas las posibilidades que nos ofrece la librería.

Como también comente anteriormente es importante asegurarnos que disponemos de la versión de la app de YouTube necesaria antes de frutastarnos buscando errores que no están en nuestro código.

 

Si habéis trabajado con Google Maps v1 esta parte os sonará, al igual que en aquel caso, en este deberemos de disponer de una clave de uso que irá asociada a la firma de nuestra app, en este caso a los pares de valor huella de firma y nombre de paquete de la app. Para ello accedemos al siguiente link y seguimos las instrucciones:

Registrando nuestra aplicacion.

 

Notice

No equivocarnos y usar la huella MD5 de nuestra firma como en el caso de Google Maps, en este caso la huella a usar es la SHA1.

Notice

Para ejecutar keytool es necesario tener instalado el JDK.

Important!

Antes de volvernos loco buscando nuestra firma de desarrollo con la que la aplicación se firma automáticamente cada vez que ejecutamos desde Eclipse os indico donde se aloja según el sistema operativo:

Windows Vista y 7 c:users.androiddebug.keystore windows

Windows XP c:Documents and Settings.androiddebug.keystore

OSX y Linux ~/.android/debug.keystore

 

Una vez que tenemos nuestra clave de uso ahora si que si vamos al lío, y lo mejor, es mucho más sencillo de lo que imagináis. La API integra una view que es la que incrustaremos en nuestros layouts y es tan simple como se muestra a continuación:

 

	<com.google.android.youtube.player.YouTubePlayerView
		android:id="@+id/youtube_view"
		android:layout_width="match_parent"
		android:layout_height="wrap_content" />

 

Una vez tenemos nuestro layout construido a nuestro gusto deberemos preparar nuestro activity, con dos peculiaridades, extenderá de YouTubeBaseActivity e implementará YouTubePlayer.OnInitializedListener. Esto hará que debamos implementar dos métodos onInitializationFailure y onInitizalizationSuccess.

 

public class MainActivity extends YouTubeBaseActivity implements YouTubePlayer.OnInitializedListener  {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        // TODO
    }

    @Override
    public void onInitializationFailure(Provider arg0, YouTubeInitializationResult arg1) {
        // TODO       
    }

    @Override
    public void onInitializationSuccess(Provider provider, YouTubePlayer player, boolean wasRestored) {
        // TODO   
    }

}

 

En el onCreate nos encargaremos de inicializar la vista e indicar la clave que usaremos para acceder al servicio mientras en el metodo onInitializationSuccess nos encargaremos de indicar que video queremos visualizar mediante el codigo del mismo que podemos extraer de la url de cualquier video de youtube. 

 

Finalmente la cosa quedaría asi:

 

public class MainActivity extends YouTubeBaseActivity implements YouTubePlayer.OnInitializedListener  {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        YouTubePlayerView youTubeView = (YouTubePlayerView) findViewById(R.id.youtube_view);
        youTubeView.initialize("AIzaSyDSsi8u2Hug6yQ93r5op-_82loXpbAbpyA", this);
    }

    @Override
    public void onInitializationFailure(Provider arg0, YouTubeInitializationResult arg1) {
        Toast.makeText(this, "Error inicializando YouTube View", Toast.LENGTH_LONG).show();        
    }

    @Override
    public void onInitializationSuccess(Provider provider, YouTubePlayer player, boolean wasRestored) {
        if (!wasRestored) {
            player.loadVideo("wKJ9KzGQq0w");
          }    
    }

}

 

Notice

No olvidar incluir el permiso de acceso a internet en nuestro Android Manifest:

<uses-permission android:name=”android.permission.INTERNET”/>

 

Si ejecutamos ya podremos ver el resultado y disfrutar del vídeo completamente integrado dentro de nuestra app. Como os comente la librería permite mucho más control y esto es solo una primera toma de contacto para ver lo sencilla que se plantea.

 

Si os quedáis con ganas de mas yo ojearía el ejemplo que acompaña la librería, ya que este toca todas o casi todas las funcionalidades que ofrece y no pinta ser muy complicado. Espero que lo disfrutéis, yo me voy a la cama que me lo he ganado.

 

¡Saludos Devs!

 

Important!

Según indica Google es una versión experimental, así que seguro que mas pronto que tarde veremos novedades en la misma.

 

Sitio Oficial | Google Developers

Acerca del autor

JMPergar

Mobile Developer at @BeRepublic & Founder of @AndroCode. Silver Speaker & Member of Core Team at @GDGBarcelona.

  • Juan

    He seguido todos los pasos , instalado todo, y he generado la clave para utilizar la aplicacion ( entiendo que no hay que certificarla, ya que la voy a usar solo yo en modo de prueba, solo he generado la clave segun los pasos propuestos en :

    https://developers.google.com/youtube/android/player/register

    y la he utilizado en la linea:

    youTubeView.initialize(“clave”, this);

    tras esto instalo la aplicacion en un terminal android donde uso la version de youtube 4.4.11.

    Bueno pues la aplicacion me da error al iniciarla, no hace absolutamente nada, el codigo es el mismo que esta propuesto aqui ( con las librerias importadas y el permiso de internet dado).

    Alguien podria ayudarme? Un saludo!

  • Jared

    Buenas juan, a mi me pasa exactamente igual, al abrir la activity donde tengo puesta esta api se cierra y el logcat dice que es en la linea donde tengo la clave de la api. ¿alguien que nos ayude?

    • Jack

      logre corregir el problema, consiste en la carpeta libs hay q meter el jar de youtube no solo meterlo desde build path si no meter el jar en esa carpeta

  • Jack

    el mismo problema q la anterior, realice todo incluso en android code, pero nada, se cierra apenas abre

    • Javi

      Aunque un poco tarde, contestaré.

      Puede que se os cierre la app porque no habeis incluido la activity en el AndroidManifest, es algo muy simple pero muy común que se olvide incluir.
      Saludos!

      P.D: Me funcionó a la perfección, gracias!

    • Javi

      P.D.2: Si no es eso, y os sigue dando problemas, probad a poner aquí los errores del logCat a ver si así se os puede ayudar. ;)

      • https://www.facebook.com/djsinnerinsession Jack Sn

        gracias por responder, resulta q minutos despues de comentar aqui encontre la solucion, la cual la deje como respuesta a un comentario de arriba donde tambien tuvo problemas intentando ayudar, gracias ;)

  • junior

    amigo excelente post pero sere sincero soy nuevo en el mundo developer, me gustaria saber como se abre el ejeplo con eclipce!

  • David Estuardo Aguilar Morales

    me podrian decir como hago para poder crear ese youtubePlayer.loadvideos(” “); en un metodo para agregar mas de un video. nose si me explico

    Tengo una listView que muestra categorias por ejemplo musica y los item de los listView son Pop,reggaeton,rock,salsa y cuando el usuario de tap en cualquiera las las categorias del List quiero que muestre un video segun el ritmo que el usuario selecciona