Indhold

• Sådan integreres YouTube-videoer i din Android-app
• Henter en YouTube-video's ID
• Hent dit projekt SHA-1 fingeraftryk
• Registrer dig med Google API-konsollen
• Download YouTube Android Player API
• Opdater dit manifest
• Opbygning af YouTube Player-layout
• Implementering af YouTube-afspilleren
• 1. Udvid YouTubeBaseActivity
• 2. Initialiser YouTube-afspiller
• 3. Implementere onInitializationSuccess og onInitializationFailure
• Afspilning af en YouTube-video: Fuldført kode
• Test af YouTube Android Player API
• Vis Dailymotion-indhold i en WebView
• Hent Dailymotion video ID
• Tilføjelse af Dailymotion SDK
• Anmoder om internetadgang
• Tilføjelse af Dailymotion's PlayerWebView-widget
• Konfiguration af vores Dailymotion PlayerWebView
• Integrering af en Vimeo-video
• Opdatering af manifestet
• Tilføjelse af en WebView til vores UI
• Vælg din video
• Visning af en webside i din Android-app
• Test din Vimeo-app
• Afslutter

Når MediaController er synlig på skærmen, kan du afspille, sætte pause, spole tilbage og spole hurtigt fremad og springe til ethvert punkt i klippet ved at trække MediaController's statuslinje.

Sådan integreres YouTube-videoer i din Android-app

Indlejring af en videofil i din applikation er en fantastisk måde at sikre, at video altid er tilgængelig, uanset enhedens internetforbindelse. Imidlertid er indlejring af flere store højopløsningsvideoer i din app også en god måde at øge størrelsen på din APK på!

Hvis du er bekymret for APK-størrelse, eller din applikation inkluderer videoer, der er dejlige at have tilføjet ekstramateriale, kan du eventuelt offentliggøre disse videoer til en online platform og derefter streame dem gennem din ansøgning på runtime.

Når det kommer til offentliggørelse af videoer online, er der et websted, der med det samme kommer til at tænke på, så i dette afsnit viser jeg dig, hvordan du integrerer nogen YouTube-video i din app ved hjælp af YouTube Android Player API-klientbiblioteket.

Henter en YouTube-video's ID

For at starte, skal du beslutte, hvilken YouTube-video, du vil vise, og derefter hente dens unikke video-ID.

Du kan bruge en hvilken som helst YouTube-video, men jeg vælger “favoritteknologi fra 2018.” Indlæs din valgte video og se på dens URL i din browsers adresselinje, f.eks. Webadressen til videoen er:

youtube.com/watch?v=hJLBcViaX8Q

ID'et er den del af URL'en, der unikt identificerer denne video, som er en streng med tegn i slutningen af ​​URL'en (dybest set alt efter symbolet “=”). Video-id'et til videoen er:

hJLBcViaX8Q

Skriv en note om din videos ID, da vi bruger dette senere.

Hent dit projekt SHA-1 fingeraftryk

For at få adgang til YouTube Android Player API skal du generere en API-nøgle med Android-begrænsninger. Dette involverer at knytte API-nøglen til dit projekts unikke pakkenavn og certifikatfingeraftryk (SHA-1).

Du kan hente dit projekt SHA-1 fingeraftryk via Gradle Console:

• Vælg fanen Gradle langs højre side af Android Studio-vinduet.
• Vælg "app" -modulet, efterfulgt af "Opgaver> Android> signeringReport."

• Åbn fanen Gradle Console, der vises nederst til højre på skærmen.
• Gradle Console åbnes automatisk. Find SHA-1-værdien i dette vindue, og noter den.

Vi bruger et fingeraftryk for fejlsøgningscertifikater, som kun er egnet til at teste en applikation. Inden du publicerer en app, skal du altid generere en ny API-nøgle baseret på den applikations frigivelsescertifikat.

Registrer dig med Google API-konsollen

Inden du kan bruge YouTube Android Player API, skal du registrere din ansøgning i Google API-konsollen:

• Gå over til API-konsollen.
  Vælg navnet på dit aktuelle projekt i overskriften (hvor markøren er placeret i følgende skærmbillede).

• I det efterfølgende vindue skal du vælge "Nyt projekt."
• Giv dit projekt et navn, og klik derefter på "Opret."
• I menuen til venstre skal du vælge "Legitimationsoplysninger".
• Giv den blå "Opret legitimationsoplysning" -knap et klik, og vælg derefter "API-nøgle."
• Din API-nøgle vises nu i en popup, der inkluderer en prompt til at begrænse denne API-nøgle. Begrænsede nøgler er mere sikre, så medmindre du specifikt har brug for en ubegrænset API-nøgle, skal du vælge "Begræns nøgle."
• På din efterfølgende skærm skal du give din API-nøgle et karakteristisk navn.
• Vælg alternativknappen "Android-apps".
• Klik på "Tilføj pakkenavn og fingeraftryk."
• Kopier / indsæt dit projekts SHA-1 fingeraftryk i det efterfølgende afsnit, og indtast derefter dit projekts pakkenavn (som vises øverst i hver Java-klassefil og i dit projekts manifest).
• Når du er tilfreds med de oplysninger, du har indtastet, skal du klikke på "Gem".

Download YouTube Android Player API

Derefter skal du downloade YouTube Android Player API-klientbiblioteket. Når du bruger dette bibliotek, anbefales det, at du aktiverer ProGuard for at hjælpe med at holde din APK så let som muligt.

Sådan føjes YouTube-biblioteket til dit projekt:

• Gå over til YouTube Android Player-webstedet, og download den nyeste version.
• Pak den efterfølgende zip-fil ud.
• Åbn den nyligt udpakkede mappe, og naviger til dens "libs"-undermappe - den skal indeholde en "YouTubeAndroidPlayerApi.jar" -fil.
• I Android Studio skal du skifte til visningen "Projekt".
• For at sikre, at YouTube-biblioteket er inkluderet i din build-sti, skal du importere .jar til dit projekt “/ libs ”-katalog. Åbn dit projekts “app / libs” -mappe, og træk og slip derefter .jar'en på plads.

• Åbn din build.gradle-fil, og tilføj YouTube-biblioteket som en projektafhængighed:

afhængigheder {implementeringsfilTree (dir: libs, inkluderer:) 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 // Tilføj følgende // implementeringsfiler (libs / YouTubeAndroidPlayerApi.jar)}

• Synkroniser dine Gradle-filer, når du bliver bedt om det.

Opdater dit manifest

Hvis din applikation vises nogen online videoindhold, så har det brug for adgang til Internettet.

Åbn dit projekts manifest og tilføj internettilladelse:

For at give brugeren en smag af den filmatiske, widescreen-oplevelse, indstiller jeg også MainActivity til at starte i liggende tilstand:

Opbygning af YouTube Player-layout

Du kan vise en YouTube-video ved hjælp af en af ​​følgende:

• YouTubePlayerView. Hvis du vil bruge YouTubePlayerView i dit layout, skal du udvide YouTubeBaseActivity i det pågældende layouts tilsvarende aktivitetsklasse.
• YouTubePlayerFragment. Dette er et fragment, der indeholder en YouTubePlayerView. Hvis du vælger at implementere en YouTubePlayerFragment, så gør du det vil ikke skal forlænges fra YouTubeBaseActivity.

Jeg bruger YouTubePlayerView, så åbn dit projekt "Activity_main.xml" -fil, og tilføj en YouTubePlayerView-widget:

Implementering af YouTube-afspilleren

Åbn derefter din MainActivity og udfør følgende opgaver:

1. Udvid YouTubeBaseActivity

Da vi bruger en YouTubePlayerView i vores layout, er vi nødt til at udvide YouTubeBaseActivity:

offentlig klasse MainActivity udvider YouTubeBaseActivity {

2. Initialiser YouTube-afspiller

Vi initialiserer YouTube-afspilleren ved at kalde initialisere () og videregive den API-nøgle, vi oprettede tidligere:

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

3. Implementere onInitializationSuccess og onInitializationFailure

Endelig skal vi specificere, hvordan vores applikation skal reagere, afhængigt af om initialiseringen er en succes eller en fiasko. Hvis YouTube-afspilleren initialiseres med succes, kan vi indlæse vores video ved at videregive det unikke video-id:

offentligt ugyldigt onInitializationSuccess (YouTubePlayer.Provider-udbyder, YouTubePlayer youTubePlayer, boolsk b) {// Angiv video-ID // youTubePlayer.loadVideo ("hJLBcViaX8Q");

Dernæst skal vi fortælle vores applikation, hvordan den skal håndtere mislykkede initialiseringer. Jeg vil vise en skål:

offentligt ugyldigt onInitializationFailure (YouTubePlayer.Provider-udbyder, YouTubeInitializationResult youTubeInitializationResult) {Toast.makeText (MainActivity.this, "En fejl opstod", Toast.LENGTH_SHORT) .show (); }

Afspilning af en YouTube-video: Fuldført kode

Føj alt ovenstående til din MainActivity, og du skulle ende med noget lignende:

import android.os.Bundle; import android.widget.Toast; import com.google.android.youtube.player.YouTubeBaseActivity; import com.google.android.youtube.player.YouTubeInitializationResult; import com.google.android.youtube.player.YouTubePlayer; import com.google.android.youtube.player.YouTubePlayerView; // Udvid YouTubeBaseActivity // public class MainActivity udvider YouTubeBaseActivity {// Glem ikke at erstatte dette med din egen unikke API-nøgle // public static final String YOUR_API_KEY = "YOUR_API_KEY_HERE"; @Override beskyttet tomrum onCreate (Bundle gemtInstanceState) {super.onCreate (gemtInstanceState); setContentView (R.layout.activity_main); YouTubePlayerView youTubePlayerView = (YouTubePlayerView) findViewById (R.id.YouTubePlayer); // Initialiser YouTube-afspilleren // youTubePlayerView.initialize (YOUR_API_KEY, ny YouTubePlayer.OnInitializedListener () {@Override // Hvis YouTube-afspilleren er initialiseret ... // offentligt ugyldigt på InitializationSuccess (YouTubePlayer.Provider-udbyder, YouTubePlayer youTubePlayer, boolean b) {//..start derefter afspilning af følgende video // youTubePlayer.loadVideo ("hJLBcViaX8Q");} @Override // Hvis initialiseringen mislykkes ... // offentligt ugyldigt onInitializationFailure (YouTubePlayer.Provider-udbyder, YouTubeInitialiseringResult youTubeInitializationResult) {//... derefter vises en toast // Toast.makeText (MainActivity.this, "Der opstod en fejl", Toast.LENGTH_SHORT) .show ();}}); }}

Test af YouTube Android Player API

Du kan teste denne applikation på enten en fysisk Android-smartphone eller tablet eller en AVD. Hvis du bruger en AVD, skal du sørge for at bruge et systembillede, der inkluderer Google Play-tjenester. YouTube-appen skal også installeres på AVD eller fysisk Android-enhed, da YouTube API er afhængig af en tjeneste, der distribueres som en del af YouTube til Android-appen.

Installer projektet på din enhed, og YouTube-videoen skal starte automatisk, så snart applikationen indlæses. Hvis du trykker på videoen, har du adgang til alle de velkendte YouTube-kontroller, som du kan bruge til at sætte videoen på pause, afspille, spole frem og tilbage.

Vis Dailymotion-indhold i en WebView

Når det kommer til indlejring af videoer i din Android-app, er der en bred vifte af videodelingsplatforme, som du kan vælge imellem, og nogle platforme har endda produceret SDK'er, der er dedikeret til at hjælpe dig med at interagere med deres indhold - inklusive Dailymotion.

Dailymotion Player SDK til Android leverer en tynd indpakning omkring Android's WebView-komponent, der gør det lettere at integrere Dailymotion-videoer i dine applikationer.

I dette afsnit viser jeg dig, hvordan du streamer en video fra Dailymotion-webstedet ved hjælp af tredjeparts Dailymotion Player SDK.

Hent Dailymotion video ID

Først skal du gå over til Dailymotion, finde en video, du vil vise, og derefter hente dens video-id.

Jeg bruger denne time-lapse-video af tåge, som har følgende URL:

www.dailymotion.com/video/x71jlg3

Videoens ID er den unikke streng med tegn i slutningen af ​​sin URL, så min video-ID er: x71jlg3.

Tilføjelse af Dailymotion SDK

Da vi bruger Dailymotion SDK, er vi nødt til at erklære det som et projektafhængighed. Åbn dit projekts build.gradle-fil, og tilføj følgende:

afhængigheder {implementeringsfilTree (dir: libs, inkluderer:) // Tilføj følgende // 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 bliver bedt om det, skal du vælge "Synkroniser projekt med gradle-filer."

Bemærk, at Dailymotion SDK som standard kun giver dig adgang til Dailymotion's offentlige data, såsom en videos titel og beskrivelse.Du kan udføre nogle yderligere opgaver ved at registrere din ansøgning med Dailymotion-platformen, men da vi bare ønsker at integrere en video, behøver vi ikke at bekymre dig om at registrere vores ansøgning.

Hvis du er interessant med at tilføje mere Dailymotion-funktionalitet til dine apps, kan du lære mere om at registrere din ansøgning med Dailymotion over på de officielle dokumenter.

Anmoder om internetadgang

Endnu en gang streamer vi indhold fra Internettet, så vores projekt kræver internettilladelse:

Hver aktivitet, der viser Dailymotion-indhold, skal have en "android: configChanges" -attribut, så tilføj følgende til din MainActivity:

Tilføjelse af Dailymotion's PlayerWebView-widget

Den vigtigste komponent i Dailymotion SDK er et PlayerWebView UI-element, der giver et tyndt omslag omkring Android's WebView-komponent.

Vi undersøger WebViews mere detaljeret i det følgende afsnit, men WebViews giver dig i bund og grund en måde at integrere websider i din applikation. Hvis vi ikke brugte SDK's specialiserede PlayerWebView, kan vi muligvis bruge Android's vanille WebView-komponent til at vise en hel Dailymotion-webside i vores applikation.

Lad os i stedet tilføje en PlayerWebView til vores layout:

Konfiguration af vores Dailymotion PlayerWebView

Nu har vi implementeret PlayerWebView-widgeten, vi er nødt til at konfigurere afspilleren i vores tilsvarende aktivitetsklasse.

Åbn din MainActivity, og start med at få en henvisning til PlayerWebView:

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

Derefter skal du ringe til “DailyMotionPlayer.load” og videregive det video-ID, som vi har hentet tidligere:

dailyMotionPlayer.load ( "x71jlg3");

Dette giver os følgende:

import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import com.dailymotion.android.player.sdk.PlayerWebView; import java.util.HashMap; import java.util.Map; offentlig klasse MainActivity udvider AppCompatActivity {private PlayerWebView DailyMotionPlayer; @Override beskyttet tomrum onCreate (Bundle gemtInstanceState) {super.onCreate (gemtInstanceState); setContentView (R.layout.activity_main); // Hent vores PlayerWebView // DailyMotionPlayer = (PlayerWebView) findViewById (R.id.dailymotionPlayer); Kort playerParams = nyt HashMap <> (); // Indlæs videoen med vores parametre // playerParams.put ("nøgle", "værdi"); // Videregiv video-ID // DailyMotionPlayer.load ("x71jlg3"); }}

Installer dit projekt på en fysisk Android-enhed eller emulator, og din Dailymotion-video skal starte automatisk.

Integrering af en Vimeo-video

Når det kommer til indlejring af videoindhold, vil du typisk bruge et platformspecifikt API eller platformspecifikt SDK hvor det er muligt. Men hvad nu hvis der ikke er en SDK eller API tilgængelig til den videodelingsplatform, du har i tankerne?

I disse scenarier kan du bruge Android's WebView-komponent til at vise videoen som en webside, der er integreret i din aktivitets layout. I dette sidste afsnit viser jeg dig, hvordan du integrerer en video fra den populære Vimeo-platform ved hjælp af en WebView.

Ud over at vise videoindhold kan WebViews være nyttige i en række andre scenarier. Forestil dig for eksempel, at du har noget indhold, der skal opdateres regelmæssigt; hosting af dette indhold online og derefter vise det i din applikation via en WebView giver dig fleksibiliteten til at ændre dette indhold online til enhver tid uden at skulle offentliggøre en ny version af din app. Vær dog forsigtig, når du bruger WebViews, da de ikke understøtter mange af de funktioner, du typisk ville forvente af en enkeltstående webbrowser. WebViews mangler især en adresselinje eller navigationskontroller, hvilket kan gøre deres indhold vanskeligt for brugerne at interagere med.

Inden du bruger en WebView, skal du altid overveje, om en alternativ løsning muligvis er mere passende, for eksempel kan du downloade indholdet til enhedens standardwebbrowser eller implementere Chrome tilpassede faner.

Opdatering af manifestet

Da vi streamer en video fra Internettet, er vi nødt til at tilføje internettilladelsen til vores Manifest:

Jeg vil også starte MainActivity i liggende tilstand:

Tilføjelse af en WebView til vores UI

Lad os derefter tilføje en WebView til vores app. Vi kan enten tilføje WebView til vores aktivitets layout eller omdanne hele aktiviteten til en WebView ved at implementere den i vores applikations onCreate () -metode.

Jeg vil tilføje en WebView til vores applikations layout:

Vælg din video

Endnu en gang har vi brug for en video til visning, men denne gang er vi ikke bruger et video-id:

• Gå over til Vimeo og vælg en video, du vil bruge; Jeg har valgt denne vintertid.
• Giv knappen "Del" et klik.
• Vælg ikonet "Embed"; dette giver dig en integreret kode, der skal se sådan ud:

Denne kode indeholder følgende oplysninger:

• iframe. Specificerer, at vi integrerer en anden HTML-side i den aktuelle kontekst.
• src. Videoens vej, så din app ved, hvor du kan finde denne video.
• bredde højde. Videoens dimensioner.
• frameborder. Hvorvidt der skal vises en kant rundt om videoens ramme. De mulige værdier er grænse (1) og ingen grænse (0).
• allowfullscreen. Dette muliggør, at videoen vises i fuldskærmstilstand.

Jeg vil tilføje denne embedskode til mit projekt som en streng, så du skal kopiere / indsætte disse oplysninger i følgende skabelon:

String vimeoVideo = "DIN LINK GÅR HER';

Frustrerende, er vi nødt til at foretage et par ændringer, før indlejringskoden er kompatibel med vores Android-app. Først skal vi tilføje et par "" tegn, så Android Studio ikke klager over forkert formatering:

String vimeoVideo = "';

Endelig kan standardvideodimensionerne være for store for nogle Android-smartphoneskærme.
I produktionen ville du typisk eksperimentere med forskellige dimensioner for at se, hvad der giver de bedste resultater på tværs af så mange forskellige skærmkonfigurationer som muligt. For at hjælpe med at forhindre, at denne artikel kommer ud af kontrol, vil jeg bare bruge følgende, som skulle give gode resultater på din "typiske" Android-smartphoneskærm:

String vimeoVideo = "';

Visning af en webside i din Android-app

Nu har vi oprettet vores layout og har vores HTML klar til at gå, åbne din MainActivity og lader implementere vores WebView.

Start med at tilføje HTML-strengen:

String vimeoVideo = "';

Dernæst skal vi indlæse ovennævnte webside i vores WebView ved hjælp af metoden loadUrl ():

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

JavaScript er deaktiveret som standard, så vi bliver nødt til at aktivere det i vores WebView.

Hver gang du opretter en WebView, tildeles det automatisk et sæt standard WebSettings. Vi henter dette WebSettings-objekt ved hjælp af getSettings () -metoden og aktiverer derefter JavaScript ved hjælp af setJavaScriptEnabled ().

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

Efter at have tilføjet alt dette til din MainActivity, skal din kode se sådan ud:

import 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; offentlig klasse MainActivity udvider AppCompatActivity {@Override beskyttet tomrum onCreate (Bundle gemtInstanceState) {super.onCreate (gemtInstanceState); setContentView (R.layout.activity_main); String vimeoVideo = ""; WebView webView = (WebView) findViewById (R.id.myWebView); webView.setWebViewClient (ny WebViewClient () {@Override offentlig boolsk shouldOverrideUrlLoading (WebView webView, WebResourceRequest anmodning) {webView.loadU ()); return true;}}); WebSettings webSettings = webView.getSettings (); webSettings.setJavaScriptEnabled (true); webView.loadData (vimeoVideo, "text / html", "utf-8");}}

Test din Vimeo-app

Du kender boret nu: Installer dette projekt på en fysisk Android-enhed eller AVD. WebView er ikke indstillet til at afspilles automatisk, så du bliver nødt til at give videoen et tryk for at afsløre Vimeos mediekontroller. Du kan derefter afspille, sætte pause, spole tilbage og spole hurtigt frem for at sikre, at den fungerer korrekt.

Afslutter

I denne artikel viste jeg dig, hvordan du tilføjer YouTube-, Vimeo- og Dailymotion-videoer til dine apps ved hjælp af platformspecifikke API'er og SDK'er og Android's egen WebView-komponent. Jeg viste dig også, hvordan man bundter en videofil med din applikation, så den kan gemmes og afspilles lokalt.

Hvad er din foretrukne måde at vise multimedieindhold til dine brugere? Fortæl os det i kommentarerne nedenfor!