Maak een YouTube-client op Android

Wat je gaat creëren

Er zijn veel populaire YouTube-clients van derden op Google Play, zoals Viral Popup en PlayTube, die een aantal unieke en extra functies bieden die de officiële YouTube-app niet biedt. Als je zelf zo'n app wilt bouwen, is deze tutorial iets voor jou.

In deze tutorial maken we onze eigen YouTube-client die niet alleen naar video's op YouTube kan zoeken, maar deze ook kan afspelen. Daarbij leren we hoe we gebruik kunnen maken van de YouTube Android Player API en de YouTube Data API-clientbibliotheek voor Java.

voorwaarden

Zorg dat u de nieuwste Eclipse ADT-bundel hebt ingesteld. Je kunt het downloaden op de Android Developer-website.

Je moet ook een ontwikkelaarsleutel hebben om de YouTube API te gebruiken. Volg de stappen op Google's YouTube-ontwikkelaarswebsite om er een te krijgen.

1. Maak een nieuw project

Start Eclipse op en maak een nieuwe Android-applicatie. Geef de applicatie een naam, SimplePlayer. Kies een unieke pakketnaam en stel de minimaal vereiste SDK naar Android 2.2 en de doel SDK naar Android 4.X (L Preview).

We gaan het maken Activiteit onszelf dus deselecteer Activiteit maken en klik Af hebben.

2. Bibliotheken toevoegen

Stap 1: download bibliotheken

U heeft de volgende bibliotheken nodig voor dit project:

  • YouTube Android Player API: Met deze bibliotheek kan je app YouTube-video's naadloos insluiten en besturen. Op het moment van schrijven is de nieuwste versie van deze bibliotheek 1.0.0. Je kunt het downloaden van de website van Google Developers.
  • YouTube Data API v3 Clientbibliotheek voor Java: Met deze bibliotheek kan je app informatie opvragen op YouTube. We gaan het gebruiken om onze app in staat te stellen naar video's op YouTube te zoeken. Dit is ook beschikbaar op de website van Google Developers.
  • Picasso: Met deze bibliotheek kunt u eenvoudig externe afbeeldingen ophalen en weergeven. We gaan het gebruiken om miniaturen van YouTube-video's op te halen. De nieuwste versie is momenteel 2.4.0 en je kunt het rechtstreeks vanuit de Maven-repository downloaden.

Stap 2: bibliotheken toevoegen

Om de YouTube Android Player API toe te voegen, unzip YouTubeAndroidPlayerApi-1.0.0.zip en kopieer het bestand YouTubeAndroidPlayerApi.jar naar de libs map van uw project.

Als je de YouTube Data API v3-bibliotheek en de afhankelijkheden ervan wilt toevoegen, pak je deze uit google-api-services-youtube-v3-rev124-java-1.19.0.zip en kopieer de volgende bestanden naar de libs map van uw project:

  • 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

Tot slot, om Picasso toe te voegen, kopieer picasso-2.4.0.jar naar de libs map van uw project.

3. Bewerk het manifest

De enige toestemming die onze app nodig heeft, is android.permission.INTERNET om toegang te krijgen tot de YouTube-servers. Voeg het volgende toe aan AndroidManifest.xml:

Onze app heeft twee activiteiten, een om video's te zoeken en een om ze af te spelen. Om te voorkomen dat oriëntatiewijzigingen in deze zelfstudie moeten worden behandeld, dwingen we beide activiteiten om alleen de liggende modus te gebruiken. Verklaar de activiteiten in het manifest door er de volgende code aan toe te voegen:

      

4. Bewerk strings.xml

De res / waarden / strings.xml bestand bevat de strings die onze app gebruikt. Update de inhoud zoals hieronder getoond:

 SimplePlayer Zoeken Kan YouTube Player niet initialiseren 

5. Maak lay-out voor SearchActivity

Stap 1: Lay-out maken

SearchActivity heeft de volgende inzichten nodig:

  • Tekst bewerken: om de gebruiker toe te laten om in de sleutelwoorden te typen
  • Lijstweergave: om de zoekresultaten weer te geven
  • LinearLayout: deze weergave dient als de bovenliggende weergave van de bovengenoemde opvattingen

Maak een nieuw bestand met de naam layout / activity_search.xml en voeg de volgende code eraan toe:

    

Stap 2: lay-out zoekresultaten

Elk zoekresultaat verwijst naar een video op YouTube en we hebben een lay-out nodig om informatie over die video weer te geven. Daarom is elk item van de Lijstweergave moet de volgende weergaven bevatten:

  • Figuurweergave: om de miniatuur van de video weer te geven
  • Tekstweergave: om de titel van de video weer te geven
  • Tekstweergave: om de beschrijving van de video weer te geven
  • Relatieve layout: deze weergave fungeert als de bovenliggende weergave van de andere weergaven

Maak een bestand met de naam layout / video_item.xml en voeg de volgende code eraan toe:

     

6. Maak lay-out voor PlayerActivity

Stap 1: Lay-out maken

PlayerActivity heeft de volgende inzichten nodig:

  • YouTubePlayerView: om YouTube-video's af te spelen
  • LinearLayout: deze weergave is de bovenliggende weergave van YouTubePlayerView

Maak een nieuw bestand met de naam layout / activity_player.xml en voeg de volgende code eraan toe:

   

7. Creëren VideoItem

Maak een nieuwe Java-klasse met de naam VideoItem.java. We gebruiken deze les om de volgende informatie over een YouTube-video op te slaan:

  • YouTube-ID
  • titel
  • Omschrijving
  • thumbnail-URL

Al het bovenstaande wordt opgeslagen als strings. Na het toevoegen van de getters en setters voor elk van hen, VideoItem.java bestand moet de volgende inhoud hebben:

pakket com.hathi.simpleplayer; public class VideoItem private String title; privé Stringbeschrijving; privé Tekenreeks thumbnailURL; private String id; public String getId () return id;  public void setId (String id) this.id = id;  public String getTitle () return title;  public void setTitle (String title) this.title = title;  public String getDescription () return description;  public void setDescription (String description) this.description = description;  public String getThumbnailURL () return thumbnailURL;  public void setThumbnailURL (String thumbnail) this.thumbnailURL = thumbnail; 

8. Maak een Helper Class

Om te voorkomen dat je te maken krijgt met de YouTube Data API direct in onze Activiteit, maak een nieuwe Java-klasse en geef deze een naam YoutubeConnector.java. Deze klasse heeft de volgende lidvariabelen:

  • een instantie van de YouTube klasse die wordt gebruikt voor communicatie met de YouTube API
  • een instantie van YouTube.Search.List om een ​​zoekopdracht te vertegenwoordigen
  • de YouTube API-sleutel als een statische code Draad

We initialiseren de bovenstaande variabelen in de constructor. Om het exemplaar van te initialiseren YouTube, de YouTube.Builder klasse moet worden gebruikt. De klassen die verantwoordelijk zijn voor de netwerkverbinding en de JSON-verwerking worden doorgegeven aan de bouwer.

Eenmaal geïnitialiseerd, is het zoeken methode wordt gebruikt om een ​​zoekopdracht aan te maken. De lijst methode wordt vervolgens gebruikt om de details te vermelden die we in de zoekresultaten willen. Voor deze zelfstudie hebben we een ID kaart en snipper voor elk zoekresultaat. Hieruit halen we de volgende velden:

  • id / VideoId
  • snippet / title
  • snippet / beschrijving
  • snippet / thumbnails / default / url

De API-sleutel van de ontwikkelaar moet bij elke zoekopdracht worden verzonden. De setkey methode wordt voor dit doel gebruikt. We gebruiken ook de settype methode om de zoekresultaten te beperken tot videos enkel en alleen. Op dit punt zou de klasse er ongeveer zo uit moeten zien:

pakket com.hathi.simpleplayer; publieke klasse YoutubeConnector private YouTube youtube; private YouTube.Search.List-query; // Uw ontwikkelaarssleutel gaat hier openbaar statisch slot String KEY = "AIzaSQZZQWQQWMGziK9H_qRxz8g-V6eDL3QW_Us"; public YoutubeConnector (Context-context) youtube = nieuwe YouTube.Builder (nieuwe NetHttpTransport (), nieuwe JacksonFactory (), nieuwe HttpRequestInitializer () @Override public-void initialize (HttpRequest hr) gooit IOException ). setApplicationName (content.getString (R.string.app_name)) op te bouwen (.); probeer query = youtube.search (). list ("id, snippet"); query.setKey (KEY); query.setType ( "video"); query.setFields ( "items (id / VideoId, snippet / titel, snippet / beschrijving, snippet / thumbnails / default / url)");  catch (IOException e) Log.d ("YC", "Could not initialize:" + e); 

Vervolgens maken we een methode genaamd zoeken om de zoekopdracht uit te voeren op basis van de sleutelwoorden van de gebruiker. Deze methode accepteert de sleutelwoorden als een Draad parameter. De vraag variabelen setq methode wordt gebruikt om de trefwoorden in te stellen.

Vervolgens voeren we de query uit met behulp van de uitvoeren methode. De resultaten worden geretourneerd in de vorm van een SearchListResponse aanleg. We herhalen de resultaatitems en maken een nieuwe Lijst van VideoItem objecten, die de retourwaarde van deze methode zal zijn. Na het toevoegen van de juiste foutafhandeling, de zoeken methode zou er als volgt uit moeten zien:

openbare lijst zoeken (tekenreekszoekwoorden) query.setQ (trefwoorden); try SearchListResponse response = query.execute (); Lijst results = response.getItems (); Lijst items = nieuwe ArrayList(); for (SearchResult-resultaat: resultaten) 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);  items terugbrengen;  catch (IOException e) Log.d ("YC", "Could not search:" + e); return null;  

9. Creëren SearchActivity

Maak een nieuwe klasse met de naam SearchActivity.java. Deze klasse heeft velden die de opvattingen vertegenwoordigen die we hebben genoemd activity_search.xml. Het heeft ook een handler om updates over de thread van de gebruikersinterface te maken.

In de onCreate methode, initialiseren we de views en voegen een OnEditorActionListener naar de Tekst bewerken om te weten wanneer de gebruiker klaar is met het invoeren van trefwoorden.

public class SearchActivity breidt Activiteit uit private EditText searchInput; private ListView videosFound; particuliere afhandelaar voor handlers; @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 = nieuwe handler (); searchInput.setOnEditorActionListener (nieuwe TextView.OnEditorActionListener () @Override public boolean onEditorAction (TextView v, int actionId, KeyEvent -gebeurtenis) if (actionId == EditorInfo.IME_ACTION_DONE) searchOnYoutube (v.getText (). toString ()); return false; return true;);  

U moet de oproep naar de searchOnYoutube methode. Laten we de methode nu definiëren. In deze methode maken we een nieuwe Draad om a te initialiseren YoutubeConnector instance en voer het uit zoeken methode. Een nieuwe thread is nodig omdat netwerkbewerkingen niet kunnen worden uitgevoerd op de thread van de hoofdgebruikersinterface. Als u dit vergeet, krijgt u te maken met een runtime-uitzondering. Zodra de resultaten beschikbaar zijn, de handler wordt gebruikt om de gebruikersinterface bij te werken.

privélijst Zoekresultaten; private void searchOnYoutube (final String keywords) new Thread () public void run () YoutubeConnector yc = new YoutubeConnector (SearchActivity.this); searchResults = yc.search (sleutelwoorden); handler.post (nieuw Runnable () public void run () updateVideosFound (););  .start (); 

In de updateVideosFound methode, we genereren een ArrayAdapter en geef het door aan de Lijstweergave om de zoekresultaten weer te geven. In de getView methode van de adapter, we blazen de video_item.xml lay-out en update zijn weergaven om informatie weer te geven over het zoekresultaat.

De Picasso-bibliotheek laden methode wordt gebruikt om de thumbnail van de video op te halen en de in methode wordt gebruikt om het door te geven aan de Figuurweergave.

private void updateVideosFound () ArrayAdapter adapter = nieuwe ArrayAdapter(getApplicationContext (), R.layout.video_item, searchResults) @Override openbaar View getView (int position, View convertView, ViewGroup-bovenliggende) if (convertView == null) convertView = getLayoutInflater (). inflate (R.layout. video_item, parent, false);  ImageView thumbnail = (ImageView) convertView.findViewById (R.id.video_thumbnail); TextView title = (TextView) convertView.findViewById (R.id.video_title); TextView description = (TextView) convertView.findViewById (R.id.video_description); VideoItem searchResult = searchResults.get (positie); . Picasso.with (getApplicationContext ()) belasting (searchResult.getThumbnailURL ()) tot (thumbnail).; title.setText (searchResult.getTitle ()); description.setText (searchResult.getDescription ()); return convertView; ; videosFound.setAdapter (adapter);  

Ten slotte hebben we een methode nodig die de OnItemClickListener van de Lijstweergave zodat de gebruiker op een zoekresultaat kan klikken en de bijbehorende video kan bekijken. Laten we deze methode een naam geven addClickListener en noem het aan het einde van de onCreate methode.

Wanneer een item in de lijst wordt afgeluisterd, maken we een nieuw item voornemen voor de PlayerActivity en geef de ID van de video door. Zodra de voornemen is gemaakt, de startActivity methode wordt gebruikt om de PlayerActivity.

private void addClickListener () videosFound.setOnItemClickListener (new AdapterView.OnItemClickListener () @Override public void onItemClick (AdapterView av, View v, int pos, long id) Intent intent = new Intent (getApplicationContext (), PlayerActivity.class); intent.putExtra ("VIDEO_ID", searchResults.get (pos) .getId ()); startActivity (intent); ); 

10. Maak aan PlayerActivity

Maak een nieuwe Java-klasse met de naam PlayerActivity.java die erft van YouTubeBaseActivity. Dit is belangrijk, omdat alleen subklassen van de YouTubeBaseActivity kan gebruik maken van de YouTubePlayerView.

Deze klasse heeft een variabele van één lid die de YouTubePlayerView we vermeldden in de activity_player.xml lay-outbestand. Dit is geïnitialiseerd in de onCreate methode door de initialiseermethode van de YouTubePlayerView klasse, waarbij de ontwikkelaar API-sleutel wordt doorgegeven.

Vervolgens moet onze klas het OnInitializedListener interface om te weten wanneer de initialisatie is voltooid. De interface heeft twee methoden, genaamd onInitializationFailure en onInitializationSuccess.

In geval van succes, de cueVideo methode wordt gebruikt om de YouTube-video weer te geven. In geval van een storing, een Geroosterd brood wordt weergegeven dat de gebruiker vertelt dat de initialisatie is mislukt.

Dit is wat de PlayerActivity klasse moet er als volgt uitzien:

public class PlayerActivity breidt YouTubeBaseActivity implementeert OnInitializedListener private YouTubePlayerView playerView; @Override beschermde leegte onCreate (bundelbundel) super.onCreate (bundle); setContentView (R.layout.activity_player); playerView = (YouTubePlayerView) findViewById (R.id.player_view); playerView.initialize (YoutubeConnector.KEY, this);  @Override public void onInitializationFailure (Provider provider, YouTubeInitializationResult result) Toast.makeText (this, getString (R.string.failed), Toast.LENGTH_LONG) .show ();  @Override public void onInitializationSuccess (Provider provider, YouTubePlayer player, boolean restored) if (! Restore) player.cueVideo (getIntent (). GetStringExtra ("VIDEO_ID"));  

11. Compileren en uitvoeren

Onze YouTube-client is nu klaar om te worden geïmplementeerd op een Android-apparaat. Bijna alle populaire Android-apparaten hebben het geïnstalleerd, maar zorg ervoor dat de YouTube-app is geïnstalleerd - en up-to-date - op het apparaat, omdat onze app ervan afhankelijk is.

Na de implementatie kunt u een zoekopdracht invoeren om naar video's op YouTube te zoeken en vervolgens op een resultaat klikken om de bijbehorende video af te spelen..

Conclusie

Je weet nu hoe je YouTube-video's kunt insluiten in je Android-app. U hebt ook geleerd hoe u de bibliotheek met de Google API-client kunt gebruiken en hoe u met YouTube kunt werken. De Android Player API biedt veel methoden om het afspelen van de video's te regelen en je kunt ze gebruiken om met zeer creatieve apps te komen. Raadpleeg de volledige naslaggids voor meer informatie over de API.