Créer un client YouTube sur Android

Ce que vous allez créer

De nombreux clients YouTube tiers populaires sur Google Play, tels que Viral Popup et PlayTube, parviennent à offrir des fonctionnalités uniques et supplémentaires que l’application officielle YouTube ne propose pas. Si vous souhaitez créer vous-même une telle application, ce tutoriel est pour vous..

Dans ce didacticiel, nous créons notre propre client YouTube qui peut non seulement rechercher des vidéos sur YouTube, mais aussi les lire. Ce faisant, nous allons apprendre à utiliser l'API du lecteur Android YouTube et la bibliothèque cliente de l'API de données YouTube pour Java..

Conditions préalables

Assurez-vous de disposer de la dernière configuration d’ensemble Eclipse ADT. Vous pouvez le télécharger sur le site Web Android Developer..

Vous devez également disposer d'une clé de développeur pour utiliser l'API YouTube. Suivez les étapes sur le site Web des développeurs YouTube de Google pour en obtenir un..

1. Créer un nouveau projet

Lancez Eclipse et créez une nouvelle application Android. Nommez l'application, SimplePlayer. Choisissez un nom de package unique et définissez le SDK minimum requis à Android 2.2 et le SDK cible à Android 4.X (Aperçu L).

Nous allons créer le Activité nous désélectionner Créer une activité et cliquez terminer.

2. Ajouter des bibliothèques

Étape 1: Télécharger des bibliothèques

Vous aurez besoin des bibliothèques suivantes pour ce projet:

  • API du lecteur YouTube Android: Cette bibliothèque permet à votre application d’intégrer et de contrôler les vidéos YouTube de manière transparente. Au moment de la rédaction de ce manuel, la dernière version de cette bibliothèque est disponible. 1.0.0. Vous pouvez le télécharger à partir du site Web des développeurs Google..
  • Bibliothèque de clients YouTube Data API v3 pour Java: Cette bibliothèque permet à votre application de rechercher des informations sur YouTube. Nous allons l'utiliser pour permettre à notre application de rechercher des vidéos sur YouTube. Ceci est également disponible sur le site Web des développeurs de Google..
  • Picasso: Cette bibliothèque facilite la récupération et l'affichage des images distantes. Nous allons l'utiliser pour récupérer des vignettes de vidéos YouTube. La dernière version est actuellement 2.4.0 et vous pouvez le télécharger directement à partir du référentiel Maven.

Étape 2: Ajouter des bibliothèques

Pour ajouter l'API du lecteur YouTube Android, décompressez YouTubeAndroidPlayerApi-1.0.0.zip et copier le fichier YouTubeAndroidPlayerApi.jar au libs dossier de votre projet.

Pour ajouter la bibliothèque YouTube Data API v3 et ses dépendances, décompressez google-api-services-youtube-v3-rev124-java-1.19.0.zip et copiez les fichiers suivants sur le libs dossier de votre projet:

  • google-api-services-youtube-v3-rev124-1.19.0.jar
  • google-api-client-1.19.0.jar
  • google-oauth-client-1.19.0.jar
  • google-http-client-1.19.0.jar
  • jsr305-1.3.9.jar
  • google-http-client-jackson2-1.19.0.jar
  • jackson-core-2.1.3.jar
  • google-api-client-android-1.19.0.jar
  • google-http-client-android-1.19.0.jar

Enfin, pour ajouter Picasso, copiez picasso-2.4.0.jar au libs dossier de votre projet.

3. Modifier le manifeste

La seule autorisation dont notre application a besoin est android.permission.INTERNET accéder aux serveurs de YouTube. Ajouter ce qui suit à AndroidManifest.xml:

Notre application propose deux activités: une pour rechercher des vidéos et une pour les lire. Pour éviter de devoir gérer les changements d'orientation dans ce didacticiel, nous forçons les deux activités à utiliser uniquement le mode paysage. Déclarez les activités dans le manifeste en y ajoutant le code suivant:

      

4. Editez strings.xml

le res / values ​​/ strings.xml Le fichier contient les chaînes que notre application utilise. Mettez à jour son contenu comme indiqué ci-dessous:

 SimplePlayer Chercher Impossible d'initialiser le lecteur Youtube 

5. Créer une mise en page pour RechercherActivité

Étape 1: Créer une mise en page

RechercherActivité a besoin des vues suivantes:

  • Éditer le texte: pour permettre à l'utilisateur de saisir les mots-clés de recherche
  • ListView: pour afficher les résultats de la recherche
  • LinearLayout: cette vue sert de vue parent aux vues susmentionnées

Créer un nouveau fichier nommé layout / activity_search.xml et ajoutez-y le code suivant:

    

Étape 2: Mise en page des résultats de recherche

Chaque résultat de recherche fait référence à une vidéo sur YouTube et nous avons besoin d'une présentation pour afficher des informations sur cette vidéo. Par conséquent, chaque élément de la ListView doit contenir les vues suivantes:

  • ImageView: pour afficher la vignette de la vidéo
  • Affichage: pour afficher le titre de la vidéo
  • Affichage: pour afficher la description de la vidéo
  • Disposition relative: cette vue agit comme la vue parente des autres vues

Créer un fichier nommé layout / video_item.xml et ajoutez-y le code suivant:

     

6. Créer une mise en page pour PlayerActivity

Étape 1: Créer une mise en page

PlayerActivity a besoin des vues suivantes:

  • YouTubePlayerView: lire des vidéos sur YouTube
  • LinearLayout: cette vue est la vue parente de YouTubePlayerView

Créer un nouveau fichier nommé layout / activity_player.xml et ajoutez-y le code suivant:

   

7. Créer VideoItem

Créez une nouvelle classe Java nommée VideoItem.java. Nous utilisons cette classe pour stocker les informations suivantes sur une vidéo YouTube:

  • Identifiant YouTube
  • Titre
  • la description
  • URL miniature

Tous les éléments ci-dessus sont stockés sous forme de chaînes. Après avoir ajouté les accesseurs et les setters pour chacun d’eux, VideoItem.java Le fichier doit avoir le contenu suivant:

package com.hathi.simpleplayer; Classe publique VideoItem private String title; description de chaîne privée; private String thumbnailURL; identifiant de chaîne privée; public String getId () return id;  public void setId (String id) this.id = id;  public String getTitle () return title;  public void setTitle (Titre de la chaîne) this.title = title;  public String getDescription () return description;  public void setDescription (Description de la chaîne) this.description = description;  public String getThumbnailURL () return thumbnailURL;  public void setThumbnailURL (Vignette de chaîne) this.thumbnailURL = thumbnail; 

8. Créer une classe d'assistance

Pour éviter de devoir traiter avec l’API de données YouTube directement dans notre Activité, créer une nouvelle classe Java et nommez-la YoutubeConnector.java. Cette classe a les variables de membre suivantes:

  • un exemple de Youtube classe qui sera utilisée pour communiquer avec l'API YouTube
  • une instance de YouTube.Search.List représenter une requête de recherche
  • la clé de l'API YouTube en tant que statique Chaîne

Nous initialisons les variables ci-dessus dans le constructeur. Pour initialiser l'instance de Youtube, la YouTube.Builder la classe doit être utilisée. Les classes qui seront responsables de la connexion réseau et du traitement JSON sont transmises au constructeur..

Une fois initialisé, son chercher Cette méthode est utilisée pour créer une requête de recherche. le liste Cette méthode est ensuite utilisée pour mentionner les détails souhaités dans les résultats de la recherche. Pour ce tutoriel, nous allons avoir besoin d’un identifiant et fragment pour chaque résultat de recherche. De ceux-ci, nous extrayons les champs suivants:

  • id / videoId
  • extrait / titre
  • extrait / description
  • extrait / vignettes / défaut / url

La clé API du développeur doit être envoyée avec chaque demande de recherche. le setKey méthode est utilisée à cette fin. Nous utilisons également le setType méthode pour limiter les résultats de la recherche à vidéos seulement. À ce stade, la classe devrait ressembler à ceci:

package com.hathi.simpleplayer; public class YoutubeConnector privé YouTube youtube; requête privée YouTube.Search.List; // Votre clé de développeur va ici public static final String KEY = "AIzaSQZZQWQQWMGziK9H_qRxz8g-V6eDL3QW_Us"; public YoutubeConnector (contexte de contexte) youtube = new YouTube.Builder (new NetHttpTransport (), new JacksonFactory (), new HttpRequestInitializer (), @Override public void initialize (HttpRequest hr) lève IOException ). setApplicationName (content.getString (R.string.app_name)). Build (); try query = youtube.search (). list ("id, extrait"); query.setKey (KEY); query.setType ("video"); query.setFields ("éléments (id / videoId, snippet / title, snippet / description, snippet / thumbnails / default / url)");  catch (IOException e) Log.d ("YC", "Impossible d'initialiser:" + e); 

Ensuite, nous créons une méthode nommée chercher pour effectuer la recherche en fonction des mots-clés de l'utilisateur. Cette méthode accepte les mots-clés en tant que Chaîne paramètre. le question variable setQ méthode est utilisée pour définir les mots-clés.

Nous exécutons ensuite la requête en utilisant son exécuter méthode. Les résultats sont retournés sous la forme d'un SearchListResponse exemple. Nous parcourons les éléments de résultat et créons un nouveau liste de VideoItem objets, qui sera la valeur de retour de cette méthode. Après avoir ajouté le traitement d’erreur approprié, le chercher méthode devrait ressembler à ceci:

liste publique search (Mots clés de chaîne) query.setQ (mots clés); try SearchListResponse response = query.execute (); liste results = response.getItems (); liste items = new ArrayList(); for (résultat SearchResult: results) VideoItem item = new VideoItem (); item.setTitle (result.getSnippet (). getTitle ()); item.setDescription (result.getSnippet (). getDescription ()); item.setThumbnailURL (result.getSnippet (). getThumbnails (). getDefault (). getUrl ()); item.setId (result.getId (). getVideoId ()); items.add (item);  retourner les articles;  catch (IOException e) Log.d ("YC", "Impossible de rechercher:" + e); return null;  

9. Créer RechercherActivité

Créer une nouvelle classe nommée SearchActivity.java. Cette classe a des champs qui représentent les vues que nous avons mentionnées dans activity_search.xml. Il a aussi un Gestionnaire faire des mises à jour sur le fil de l'interface utilisateur.

dans le onCreate méthode, nous initialisons les vues et ajoutons un OnEditorActionListener au Éditer le texte savoir quand l'utilisateur a fini d'entrer les mots-clés.

Classe publique SearchActivity étend Activity private EditText searchInput; liste privée videosFound; gestionnaire de gestionnaire privé; @Override protected void onCreate (Bundle savedInstanceState) super.onCreate (savedInstanceState); setContentView (R.layout.activity_search); searchInput = (EditText) findViewById (R.id.search_input); videosFound = (ListView) findViewById (R.id.videos_found); handler = new Handler (); searchInput.setOnEditorActionListener (nouveau TextView.OnEditorActionListener () @Override public boolean onEditorAction (TextView v, int actionId, événement KeyEvent) return false; return true;);  

Vous devez avoir remarqué l'appel à la searchOnYoutube méthode. Définissons la méthode maintenant. Dans cette méthode, nous créons un nouveau Fil initialiser un YoutubeConnector par exemple et exécuter son chercher méthode. Un nouveau thread est nécessaire, car les opérations réseau ne peuvent pas être effectuées sur le thread d'interface utilisateur principal. Si vous oubliez de le faire, vous ferez face à une exception d'exécution. Une fois les résultats disponibles, le gestionnaire est utilisé pour mettre à jour l'interface utilisateur.

liste privée Résultats de la recherche; void privé searchOnYoutube (mot-clé final) new Thread () public void run () YoutubeConnector yc = new YoutubeConnector (SearchActivity.this); searchResults = yc.search (mots-clés); handler.post (new Runnable () public void run () updateVideosFound (););  .début(); 

dans le updateVideosFound méthode, nous générons un ArrayAdapter et le transmettre au ListView pour afficher les résultats de la recherche. dans le getView méthode de l'adaptateur, on gonfle le video_item.xml mettre en page et mettre à jour ses vues pour afficher des informations sur le résultat de la recherche.

La bibliothèque Picasso charge Cette méthode est utilisée pour récupérer la vignette de la vidéo et la dans méthode est utilisée pour le transmettre à la ImageView.

void privé updateVideosFound () ArrayAdapter adaptateur = new ArrayAdapter(getApplicationContext (), R.layout.video_item, searchResults) @Override public Voir getView (int position, View convertView, ViewGroup parent) if (convertView == null) convertView = getLayoutInflater (). gonfler (R.layout.). video_item, parent, false);  ImageView thumbnail = (ImageView) convertView.findViewById (R.id.video_thumbnail); TextView title = (TextView) convertView.findViewById (R.id.video_title); Description TextView = (TextView) convertView.findViewById (R.id.video_description); VideoItem searchResult = searchResults.get (position); Picasso.with (getApplicationContext ()). Load (searchResult.getThumbnailURL ()). Dans (miniature); title.setText (searchResult.getTitle ()); description.setText (searchResult.getDescription ()); renvoyer convertView; ; videosFound.setAdapter (adaptateur);  

Enfin, nous avons besoin d’une méthode qui définit le OnItemClickListener du ListView afin que l'utilisateur puisse cliquer sur un résultat de recherche et regarder la vidéo correspondante. Appelons cette méthode addClickListener et appelez-le à la fin de la onCreate méthode.

Lorsqu'un élément de la liste est exploité, nous créons un nouveau Intention pour le PlayerActivity et transmettez l'ID de la vidéo. Une fois la Intention est créé, le startActivity méthode est utilisée pour lancer le PlayerActivity.

addClickListener () videosFound.setOnItemClickListener (nouveau AdapterView.OnItemClickListener () @Override public void onItemClick (AdapterView av, vue v, int pos, id long) intention de l'intention = nouvelle intention (getApplicationContext (), PlayerActivity.class); intent.putExtra ("VIDEO_ID", searchResults.get (pos) .getId ()); startActivity (intention); ); 

10. Créer PlayerActivity

Créez une nouvelle classe Java nommée PlayerActivity.java qui hérite de YouTubeBaseActivity. C’est important, car seules les sous-classes du YouTubeBaseActivity peut utiliser le YouTubePlayerView.

Cette classe a une seule variable membre qui représente le YouTubePlayerView nous avons mentionné dans le activity_player.xml fichier de mise en page. Ceci est initialisé dans le onCreate méthode en invoquant la méthode initialize du YouTubePlayerView classe, en passant dans la clé API du développeur.

Ensuite, notre classe doit implémenter la OnInitializedListener interface pour savoir quand l'initialisation est terminée. L'interface a deux méthodes, nommées onInitializationFailure et onInitializationSuccess.

En cas de succès, le cueVideo Cette méthode est utilisée pour afficher la vidéo YouTube. En cas d'échec, un Pain grillé est montré qui dit à l'utilisateur que l'initialisation a échoué.

C'est ce que le PlayerActivity la classe devrait ressembler à:

Classe publique PlayerActivity étend YouTubeBaseActivity implémente OnInitializedListener private YouTubePlayerView playerView; @Override protected void onCreate (Bundle Bundle) super.onCreate (Bundle); setContentView (R.layout.activity_player); playerView = (YouTubePlayerView) findViewById (R.id.player_view); playerView.initialize (YoutubeConnector.KEY, ceci);  @Override public void onInitializationFailure (fournisseur fournisseur, résultat YouTubeInitializationResult) Toast.makeText (this, getString (R.string.failed), Toast.LENGTH_LONG) .show ();  @Override public void onInitializationSuccess (fournisseur, lecteur YouTubePlayer, booléen restauré) si (! Restauré) player.cueVideo (getIntent (). GetStringExtra ("VIDEO_ID"));  

11. Compiler et exécuter

Notre client YouTube est maintenant prêt à être déployé sur un appareil Android. Il est installé sur presque tous les appareils Android populaires, mais assurez-vous que l'application YouTube est installée et à jour sur l'appareil, car notre application en dépend..

Une fois déployé, vous devriez pouvoir saisir une requête pour rechercher des vidéos sur YouTube, puis cliquer sur un résultat pour commencer à lire la vidéo correspondante..

Conclusion

Vous savez maintenant comment intégrer des vidéos YouTube dans votre application Android. Vous avez également appris à utiliser la bibliothèque cliente de l'API Google et à interagir avec YouTube. L'API du lecteur Android fournit de nombreuses méthodes pour contrôler la lecture des vidéos et vous pouvez les utiliser pour créer des applications très créatives. Reportez-vous au guide de référence complet pour en savoir plus sur l'API..