Innehåll

• Hur du bäddar in YouTube-videor i din Android-app
• Hämtar ID för en YouTube-video
• Få ditt projekt SHA-1 fingeravtryck
• Registrera dig med Google API-konsolen
• Ladda ner YouTube Android Player API
• Uppdatera ditt manifest
• Bygg upp YouTube-spelarens layout
• Implementera YouTube-spelaren
• 1. Utöka YouTubeBaseActivity
• 2. Initiera YouTube Player
• 3. Implementera onInitializationSuccess och onInitializationFailure
• Spela en YouTube-video: Komplett kod
• Testa YouTube Android Player API
• Visa Dailymotion-innehåll i en WebView
• Få Dailymotion video-ID
• Lägga till Dailymotion SDK
• Begär Internet-åtkomst
• Lägga till Dailymotion's PlayerWebView-widget
• Konfigurera vår Dailymotion PlayerWebView
• Bädda in en Vimeo-video
• Uppdatering av manifestet
• Lägga till en WebView till vårt användargränssnitt
• Välj din video
• Visa en webbsida i din Android-app
• Testa din Vimeo-app
• Avslutar

När MediaController är synlig på skärmen kan du spela, pausa, spola tillbaka och spola framåt videoklippet och hoppa till valfri punkt i klippet genom att dra MediaControllers framstegsfält.

Hur du bäddar in YouTube-videor i din Android-app

Att bädda in en videofil i din applikation är ett bra sätt att säkerställa att video alltid finns tillgänglig, oavsett enhetens internetanslutning. Att bädda in flera stora, högupplösta videor i din app är dock också ett bra sätt att öka storleken på din APK!

Om du är orolig för APK-storlek, eller om din applikation inkluderar videor som är trevliga att ha lagt till extra kan du kanske publicera dessa videor på en online-plattform och sedan strömma dem genom din applikation under körning.

När det gäller att publicera videor på nätet finns det en webbplats som direkt kommer att tänka på, så i det här avsnittet ska jag visa dig hur du bäddar in några YouTube-video i din app med hjälp av klientbiblioteket för Android Android Player API.

Hämtar ID för en YouTube-video

För att börja måste du bestämma vilken YouTube-video du vill visa och sedan hämta dess unika video-ID.

Du kan använda vilken YouTube-video som helst men jag väljer "favorittekniken 2018." Ladda den valda videon och titta på webbadressen i webbläsarens adressfält, till exempel är webbadressen för videon:

youtube.com/watch?v=hJLBcViaX8Q

ID: n är den del av URL: en som identifierar den här videon unikt, som är teckensträngen i slutet av URL: en (allt efter symbolen "="). Video-ID för videon är:

hJLBcViaX8Q

Skriv ett videoklippets ID, eftersom vi kommer att använda det senare.

Få ditt projekt SHA-1 fingeravtryck

För att få åtkomst till YouTube Android Player API måste du skapa en API-nyckel med Android-begränsningar. Det handlar om att länka API-nyckeln till ditt projekt unika paketnamn och certifikat fingeravtryck (SHA-1).

Du kan hämta ditt projekt SHA-1 fingeravtryck via Gradle Console:

• Välj Gradle-fliken längst till höger i fönstret Android Studio.
• Välj "app" -modulen följt av "Uppgifter> Android> signeringReport."

• Öppna fliken Gradle Console som visas längst ner till höger på skärmen.
• Gradle Console öppnas automatiskt. Hitta SHA-1-värdet i det här fönstret och notera det.

Vi använder ett fingeravtryck för felsökningscertifikat, som bara är lämpligt för att testa en applikation. Innan du publicerar en app bör du alltid generera en ny API-nyckel baserad på applikationens utgivningscertifikat.

Registrera dig med Google API-konsolen

Innan du kan använda YouTube Android Player API måste du registrera din ansökan i Google API-konsolen:

• Gå över till API-konsolen.
  Välj namnet på ditt aktuella projekt i rubriken (där markören är placerad i följande skärmdump).

• I det följande fönstret väljer du "Nytt projekt."
• Ge ditt projekt ett namn och klicka sedan på "Skapa."
• I menyn till vänster väljer du "Intyg".
• Ge den blå knappen "Skapa referenser" ett klick och välj sedan "API-nyckel."
• Din API-nyckel visas nu i en popup, som innehåller en fråga om att begränsa den här API-nyckeln. Begränsade nycklar är säkrare, så om du inte specifikt behöver en obegränsad API-nyckel, välj "Begränsa nyckel."
• På den följande skärmen, ge din API-nyckel ett distinkt namn.
• Välj alternativknappen "Android-appar".
• Klicka på "Lägg till paketnamn och fingeravtryck."
• Kopiera / klistra in projektets SHA-1-fingeravtryck i nästa avsnitt och ange sedan projektets paketnamn (som visas högst upp i varje Java-klassfil och i projektets manifest).
• Klicka på "Spara" när du är nöjd med den information du har angett.

Ladda ner YouTube Android Player API

Därefter måste du ladda ner YouTube Android Player API-klientbiblioteket. När du använder detta bibliotek rekommenderas det att du aktiverar ProGuard för att hålla din APK så lätt som möjligt.

Så här lägger du till YouTube-biblioteket i ditt projekt:

• Gå över till YouTube-spelarens webbplats och ladda ner den senaste versionen.
• Packa upp den efterföljande zip-filen.
• Öppna den ny-packade mappen och navigera till dess "libs" -mapp. Den bör innehålla en "YouTubeAndroidPlayerApi.jar" -fil.
• I Android Studio växlar du till "Project" -vyn.
• För att se till att YouTube-biblioteket ingår i din byggväg måste du importera .jar till projektets "/ libs-katalog. Öppna projektets "app / libs" -mapp och dra och släpp sedan .jar på plats.

• Öppna din build.gradle-fil och lägg till YouTube-biblioteket som ett projektberoende:

beroenden {implementeringsfilTree (dir: libs, inkluderar:) implementering com.android.support:appcompat-v7:28.0.0 implementering com.android.support:design:28.0.0 implementering com.android.support.constraint: constraint-layout : 1.1.3 testImplementation junit: junit: 4.12 androidTestImplementation com.android.support.test: runner: 1.0.2 // Lägg till följande // implementeringsfiler (libs / YouTubeAndroidPlayerApi.jar)}

• När du uppmanas synkronisera dina Gradle-filer.

Uppdatera ditt manifest

Om din applikation kommer att visas några online videoinnehåll, då kommer det att behöva tillgång till Internet.

Öppna projektets manifest och lägg till Internet-behörighet:

För att ge användaren en smak av den filmiska, widescreen-upplevelsen, ställer jag också in MainActivity för att starta i liggande läge:

Bygg upp YouTube-spelarens layout

Du kan visa en YouTube-video med hjälp av antingen:

• YouTubePlayerView. Om du vill använda YouTubePlayerView i din layout måste du utvidga YouTubeBaseActivity i den layoutens motsvarande aktivitetsklass.
• YouTubePlayerFragment. Detta är ett fragment som innehåller en YouTubePlayerView. Om du väljer att implementera en YouTubePlayerFragment, gör du det vana måste utvidgas från YouTubeBaseActivity.

Jag kommer att använda YouTubePlayerView, så öppna projektets "Activity_main.xml" -fil och lägg till en YouTubePlayerView-widget:

Implementera YouTube-spelaren

Därefter öppnar du din MainActivity och utför följande uppgifter:

1. Utöka YouTubeBaseActivity

Eftersom vi använder en YouTubePlayerView i vår layout måste vi utöka YouTubeBaseActivity:

public class MainActivity utökar YouTubeBaseActivity {

2. Initiera YouTube Player

Vi initierar YouTube-spelaren genom att ringa initiera () och skicka API-nyckeln som vi skapade tidigare:

YouTubePlayerView youTubePlayerView = (YouTubePlayerView) findViewById (R.id.YouTubePlayer); youTubePlayerView.initialize (YOUR_API_KEY, ny YouTubePlayer.OnInitializedListener () {

3. Implementera onInitializationSuccess och onInitializationFailure

Slutligen måste vi specificera hur vår applikation ska reagera, beroende på om initialiseringen är en framgång eller ett misslyckande. Om YouTube-spelaren initieras framgångsrikt kan vi ladda vår video genom att skicka det unika video-ID:

public void onInitializationSuccess (YouTubePlayer.Provider-leverantör, YouTubePlayer youTubePlayer, boolean b) {// Ange video-ID // youTubePlayer.loadVideo ("hJLBcViaX8Q");

Därefter måste vi berätta för vår applikation hur den ska hantera misslyckade initialiseringar. Jag ska visa en rostat bröd:

public void onInitializationFailure (leverantör av YouTubePlayer.Provider, YouTubeInitializationResult youTubeInitializationResult) {Toast.makeText (MainActivity.this, "Ett fel inträffade", Toast.LENGTH_SHORT) .show (); }

Spela en YouTube-video: Komplett kod

Lägg till alla ovanstående till din MainActivity, och du bör sluta med något liknande:

import android.os.Bundle; import android.widget.Toast; import com.google.android.youtube.player.YouTubeBaseActivity; import com.google.android.youtube.player.YouTubeInitializationResult; importera com.google.android.youtube.player.YouTubePlayer; importera com.google.android.youtube.player.YouTubePlayerView; // Utöka YouTubeBaseActivity // public class MainActivity utökar YouTubeBaseActivity {// Glöm inte att ersätta detta med din egen unika API-nyckel // public static final String YOUR_API_KEY = "YOUR_API_KEY_HERE"; @Override skyddat tomrum onCreate (Bundle SavedInstanceState) {super.onCreate (SavedInstanceState); setContentView (R.layout.activity_main); YouTubePlayerView youTubePlayerView = (YouTubePlayerView) findViewById (R.id.YouTubePlayer); // Initiera YouTube-spelaren // youTubePlayerView.initialize (YOUR_API_KEY, ny YouTubePlayer.OnInitializedListener () {@Override // Om YouTube-spelaren initieras framgångsrikt ... // public void onInitializationSuccess (YouTubePlayer.Provider-leverantör, YouTubePlayer youTubePlayer, boolean b) {//..börja sedan spela följande video // youTubePlayer.loadVideo ("hJLBcViaX8Q");} @Override // Om initialiseringen misslyckas ... // public void onInitializationFailure (YouTubePlayer.Provider-leverantör, YouTubeInitialiseringResult youTubeInitializationResult) {//...men visar sedan en rostat bröd // Toast.makeText (MainActivity.this, "Ett fel inträffade", Toast.LENGTH_SHORT) .show ();}}); }}

Testa YouTube Android Player API

Du kan testa den här applikationen på antingen en fysisk Android-smartphone eller surfplatta eller en AVD. Om du använder en AVD ska du se till att du använder en systembild som innehåller Google Play-tjänster. YouTube-appen måste också installeras på AVD eller fysisk Android-enhet, eftersom YouTube-API förlitar sig på en tjänst som distribueras som en del av YouTube för Android-appen.

Installera projektet på din enhet så bör YouTube-videon börja spela automatiskt, så snart applikationen laddas. Om du pekar på videon har du tillgång till alla bekanta YouTube-kontroller som du kan använda för att pausa, spela, spola framåt och spola tillbaka videon.

Visa Dailymotion-innehåll i en WebView

När det gäller att bädda in videor i din Android-app finns det ett brett utbud av plattformar för videodelning som du kan välja mellan, och vissa plattformar har till och med producerat SDK: er avsedda för att hjälpa dig att interagera med deras innehåll - inklusive Dailymotion.

Dailymotion Player SDK för Android tillhandahåller ett tunt omslag runt Android: s WebView-komponent som gör det lättare att bädda in Dailymotion-videor i dina applikationer.

I det här avsnittet visar jag dig hur du kan strömma alla videor från Dailymotion-webbplatsen med tredjeparts Dailymotion Player SDK.

Få Dailymotion video-ID

Först ska du gå till Dailymotion, hitta en video som du vill visa och hämta sedan dess video-ID.

Jag kommer att använda den här tidsförflutningsvideoen av dimma, som har följande URL:

www.dailymotion.com/video/x71jlg3

Videoklippets ID är den unika strängen av tecken i slutet av webbadressen, så mitt video-ID är: x71jlg3.

Lägga till Dailymotion SDK

Eftersom vi använder Dailymotion SDK, måste vi förklara det som ett projektberoende. Öppna projektets build.gradle-fil och lägg till följande:

beroenden {implementeringsfilTree (dir: libs, inkludera:) // Lägg till följande // implementering com.dailymotion.dailymotion-sdk-android: sdk: 0.1.29 implementering com.android.support:appcompat-v7:28.0.0 implementering com.android.support:design:28.0.0 implementering com.android.support.constraint: constraint-layout: 1.1.3 testImplementation junit: junit: 4.12 androidTestImplementation com.android.support.test: runner: 1.0.2}

När du uppmanas väljer du "Synkronisera projekt med gradle-filer."

Observera att Dailymotion SDK som standard bara ger dig åtkomst till Dailymotion offentliga data, till exempel en videoklippets titel och beskrivning.Du kan utföra några ytterligare uppgifter genom att registrera din ansökan med Dailymotion-plattformen, men eftersom vi bara vill bädda in en video behöver vi inte oroa oss för att registrera vår ansökan.

Om du är intresserad av att lägga till mer Dailymotion-funktionalitet till dina appar, kan du lära dig mer om att registrera din ansökan med Dailymotion, över i de officiella dokumenten.

Begär Internet-åtkomst

Återigen strömmar vi innehåll från World Wide Web, så vårt projekt kräver internettillstånd:

Varje aktivitet som visar Dailymotion-innehåll måste ha ett "android: configChanges" -attribut, så lägg till följande i din MainActivity:

Lägga till Dailymotion's PlayerWebView-widget

Huvudkomponenten i Dailymotion SDK är ett PlayerWebView UI-element som ger ett tunt omslag runt Android: s WebView-komponent.

Vi undersöker WebViews mer detaljerat i följande avsnitt, men WebViews ger dig i princip ett sätt att bädda in webbsidor i din applikation. Om vi ​​inte använde SDK: s specialiserade PlayerWebView, kanske vi använder Android: s vanilj WebView-komponent för att visa en hel Dailymotion-webbsida i vår applikation.

Låt oss istället lägga till en PlayerWebView i vår layout:

Konfigurera vår Dailymotion PlayerWebView

Nu har vi implementerat PlayerWebView-widgeten, vi måste konfigurera spelaren i vår motsvarande aktivitetsklass.

Öppna din MainActivity och börja med att få en referens till PlayerWebView:

DailyMotionPlayer = (PlayerWebView) findViewById (R.id.dailymotionPlayer);

Ring sedan "DailyMotionPlayer.load" och skicka det video-ID som vi har hämtat tidigare:

dailyMotionPlayer.load ( "x71jlg3");

Detta ger oss följande:

importera android.support.v7.app.AppCompatActivity; import android.os.Bundle; import com.dailymotion.android.player.sdk.PlayerWebView; importera java.util.HashMap; importera java.util.Map; public class MainActivity utökar AppCompatActivity {private PlayerWebView DailyMotionPlayer; @Override skyddat tomrum onCreate (Bundle SavedInstanceState) {super.onCreate (SavedInstanceState); setContentView (R.layout.activity_main); // Hämta vår PlayerWebView // DailyMotionPlayer = (PlayerWebView) findViewById (R.id.dailymotionPlayer); Karta playerParams = new HashMap <> (); // Ladda videon med våra parametrar // playerParams.put ("nyckel", "värde"); // Skicka video-ID // DailyMotionPlayer.load ("x71jlg3"); }}

Installera ditt projekt på en fysisk Android-enhet eller emulator, och din Dailymotion-video bör börja spela automatiskt.

Bädda in en Vimeo-video

När det gäller inbäddning av videoinnehåll vill du vanligtvis använda ett plattformsspecifikt API eller plattformsspecifikt SDK där det är möjligt. Men vad händer om det inte finns någon SDK eller API för den videodelningsplattform du har i åtanke?

I dessa scenarier kan du använda Android: s WebView-komponent för att visa videon som en webbsida som är inbäddad i din aktivitets layout. I det här sista avsnittet visar jag dig hur du bäddar in en video från den populära Vimeo-plattformen med en WebView.

Förutom att visa videoinnehåll kan WebViews vara användbara i ett antal andra scenarier. Föreställ dig till exempel att du har något innehåll som måste uppdateras regelbundet; att värd för innehållet online och sedan visa det i din applikation via en WebView ger dig flexibiliteten att när som helst ändra innehållet utan att behöva publicera en ny version av din app. Men var bara försiktig när du använder WebViews eftersom de inte stöder många av de funktioner du vanligtvis förväntar dig från en fristående webbläsare. I synnerhet saknar WebViews adressfält eller navigeringskontroller, vilket kan göra deras innehåll svårt för användare att interagera med.

Innan du använder en WebView bör du alltid överväga om en alternativ lösning kan vara mer lämplig, till exempel kan du ladda ner innehållet till enhetens standardwebbläsare eller implementera Chrome Custom Tabs.

Uppdatering av manifestet

Eftersom vi strömmar en video från Internet måste vi lägga till Internet-behörighet till vårt manifest:

Jag kommer också att starta MainActivity i liggande läge:

Lägga till en WebView till vårt användargränssnitt

Låt oss sedan lägga till en WebView till vår app. Vi kan antingen lägga till WebView i vår aktivitetslayout eller omvandla hela aktiviteten till en WebView genom att implementera den i vår applikations metod onCreate ().

Jag kommer att lägga till en WebView i vår applikations layout:

Välj din video

Återigen behöver vi en video för att visa, men den här gången är vi det inte använder ett video-ID:

• Gå över till Vimeo och välj en video som du vill använda; Jag har valt denna vintertid.
• Ge knappen "Dela" ett klick.
• Välj ikonen “Bädda in”; detta ger dig en inbäddningskod som borde se ut så här:

Den här koden innehåller följande information:

• iframe. Anger att vi bäddar in en annan HTML-sida i det aktuella sammanhanget.
• src. Videoklippets väg, så din app vet var den hittar den här videon.
• bredd höjd. Videans dimensioner.
• frameborder. Om du vill visa en gräns runt videoramen. De möjliga värdena är gräns (1) och ingen gräns (0).
• allowfullscreen. Detta gör att videon kan visas i fullskärmsläge.

Jag kommer att lägga till den här inbäddningskoden till mitt projekt som en sträng, så du måste kopiera / klistra in den här informationen i följande mall:

String vimeoVideo = "DIN LINK GÅR HÄR';

Frustrerande, vi måste göra några ändringar innan inbäddningskoden är kompatibel med vår Android-app. Först måste vi lägga till några "" tecken så att Android Studio inte klagar över felaktig formatering:

String vimeoVideo = "';

Slutligen kan standardvideodimensionerna vara för stora för vissa Android-smarttelefonskärmar.
I produktionen skulle du vanligtvis experimentera med olika dimensioner för att se vad som ger de bästa resultaten, över så många olika skärmkonfigurationer som möjligt. Men för att förhindra att den här artikeln blir ur kontroll kommer jag bara att använda följande, vilket borde ge bra resultat på din "typiska" skärm för Android-smarttelefoner:

String vimeoVideo = "';

Visa en webbsida i din Android-app

Nu har vi skapat vår layout och har vår HTML allt redo att gå, öppnar din MainActivity och låter implementera vår WebView.

Börja med att lägga till HTML-strängen:

String vimeoVideo = "';

Därefter måste vi ladda ovanstående webbsida i vår WebView med metoden loadUrl ():

webView.loadUrl (request.getUrl () toString ().);

JavaScript är inaktiverat som standard, så vi måste aktivera det i vår WebView.

Varje gång du skapar en WebView tilldelas det automatiskt en uppsättning standardinställningar. Vi hämtar detta WebSettings-objekt med metoden getSettings () och aktiverar sedan JavaScript med setJavaScriptEnabled ().

WebSettings webSettings = webView.getSettings (); webSettings.setJavaScriptEnabled (true);

När du har lagt till allt detta i din MainActivity bör din kod se ut så här:

importera android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.webkit.WebResourceRequest; import android.webkit.WebSettings; import android.webkit.WebView; import android.webkit.WebViewClient; public class MainActivity utökar AppCompatActivity {@Override-skyddat tomrum onCreate (Bundle savedInstanceState) {super.onCreate (SavedInstanceState); setContentView (R.layout.activity_main); String vimeoVideo = ""; WebView webView = (WebView) findViewById (R.id.myWebView); webView.setWebViewClient (new WebViewClient () {@Override public boolean shouldOverrideUrlLoading (WebView webView, WebResourceRequest request) {webView.loadU toUU. ()); return true;}}); WebSettings webSettings = webView.getSettings (); webSettings.setJavaScriptEnabled (true); webView.loadData (vimeoVideo, "text / html", "utf-8");}}

Testa din Vimeo-app

Du känner till borrningen nu: installera det här projektet på en fysisk Android-enhet eller AVD. WebView är inte inställd på att spelas upp automatiskt, så du måste ge videon ett tryck för att avslöja Vimeos mediekontroller. Du kan sedan spela, pausa, spola tillbaka och spola snabbt framåt för att se till att den fungerar korrekt.

Avslutar

I den här artikeln visade jag hur du lägger till YouTube-, Vimeo- och Dailymotion-videor till dina appar med plattformspecifika API: er och SDK: er och Android: s egen WebView-komponent. Jag visade också hur du buntar en videofil med din applikation så att den kan lagras och spelas lokalt.

Vad är ditt favorit sätt att visa multimediainnehåll för dina användare? Låt oss veta i kommentarerna nedan!