Innhold

• Slik legger du inn YouTube-videoer i Android-appen din
• Henter en YouTube-video-ID
• Få prosjektets SHA-1 fingeravtrykk
• Registrer deg med Google API-konsollen
• Last ned YouTube Android Player API
• Oppdater manifestet
• Bygg YouTube-spilleroppsettet
• Implementering av YouTube-spilleren
• 1. Utvid YouTubeBaseActivity
• 2. Initialiser YouTube-spilleren
• 3. Implementere onInitializationSuccess og onInitializationFailure
• Spille av en YouTube-video: Fullført kode
• Testing av YouTube Android Player API
• Vis Dailymotion-innhold i en WebView
• Få Dailymotion video ID
• Legge til Dailymotion SDK
• Be om Internett-tilgang
• Legger til Dailymotion's PlayerWebView-widget
• Konfigurering av Dailymotion PlayerWebView
• Legge ned en Vimeo-video
• Oppdatering av manifestet
• Legge til en WebView til brukergrensesnittet
• Velg videoen din
• Vise en webside i Android-appen din
• Testing av Vimeo-appen din
• Innpakking

Når MediaController er synlig på skjermen, kan du spille, pause, spole tilbake og spole fremover videoen og hoppe til et hvilket som helst punkt i klippet ved å dra MediaControllers fremdriftslinje.

Slik legger du inn YouTube-videoer i Android-appen din

Å legge inn en videofil i applikasjonen din er en fin måte å sikre at video alltid er tilgjengelig, uavhengig av enhetens Internett-tilkobling. Å legge inn flere store høyoppløselige videoer i appen din er imidlertid også en fin måte å øke APK-størrelsen på!

Hvis du er bekymret for APK-størrelsen, eller applikasjonen din inneholder videoer som er fine å ha lagt til ekstrautstyr, kan det være lurt å publisere videoene til en online plattform og deretter streame dem gjennom applikasjonen din under kjøring.

Når det gjelder publisering av videoer på nettet, er det ett nettsted som umiddelbart kommer til å tenke på deg, så i denne delen vil jeg vise deg hvordan du legger inn noen YouTube-video i appen din, bruker YouTube Android Player API-klientbiblioteket.

Henter en YouTube-video-ID

For å starte, må du bestemme hvilken YouTube-video du vil vise, og deretter hente den unike video-IDen.

Du kan bruke hvilken som helst YouTube-video, men jeg velger "favoritteknologien fra 2018." Last inn den valgte videoen og se på URLen i nettleserens adressefelt, for eksempel URLen til videoen er:

youtube.com/watch?v=hJLBcViaX8Q

ID-en er den delen av URL-en som identifiserer denne videoen på en unik måte, som er strengen med tegn på slutten av URL-en (i utgangspunktet alt etter symbolet “=”). Video-IDen for videoen er:

hJLBcViaX8Q

Noter video-IDen din, da vi bruker denne senere.

Få prosjektets SHA-1 fingeravtrykk

For å få tilgang til YouTube Android Player API, må du generere en API-nøkkel med Android-begrensninger. Dette innebærer å koble API-nøkkelen til prosjektets unike pakkenavn og sertifikat fingeravtrykk (SHA-1).

Du kan hente prosjektets SHA-1-fingeravtrykk via Gradle Console:

• Velg Gradle-fanen på høyre side av Android Studio-vinduet.
• Velg "app" -modulen, etterfulgt av "Oppgaver> Android> signeringReport."

• Åpne kategorien Gradle Console som vises nederst til høyre på skjermen.
• Gradle Console åpnes automatisk. Finn SHA-1-verdien i dette vinduet, og noter det.

Vi bruker et avlusingssertifikat fingeravtrykk, som bare er egnet for å teste en applikasjon. Før du publiserer en app, bør du alltid generere en ny API-nøkkel basert på applikasjonens utgivelsessertifikat.

Registrer deg med Google API-konsollen

Før du kan bruke YouTube Android Player API, må du registrere applikasjonen din i Google API-konsollen:

• Gå over til API-konsollen.
  I overskriften velger du navnet på det nåværende prosjektet ditt (der markøren er plassert i følgende skjermbilde).

• I det påfølgende vinduet velger du "Nytt prosjekt."
• Gi prosjektet ditt et navn, og klikk deretter "Opprett."
• I menyen til venstre velger du "Legitimasjon."
• Gi den blå "Opprett legitimasjon" -knappen et klikk, og velg deretter "API-nøkkel."
• API-nøkkelen din vises nå i en popup, som inkluderer en ledetekst for å begrense denne API-nøkkelen. Begrensede nøkler er sikrere, så med mindre du spesifikt krever en ubegrenset API-nøkkel, velger du "Begrens nøkkel."
• På den påfølgende skjermen gir du API-nøkkelen et særegent navn.
• Velg alternativknappen Android-apper.
• Klikk på "Legg til pakkenavn og fingeravtrykk."
• Kopier / lim inn prosjektets SHA-1-fingeravtrykk i den påfølgende delen, og skriv deretter inn prosjektets pakkenavn (som vises øverst i hver Java-klassefil og i prosjektets manifest).
• Når du er fornøyd med informasjonen du har lagt inn, klikker du på "Lagre".

Last ned YouTube Android Player API

Deretter må du laste ned YouTube Android Player API-klientbiblioteket. Når du bruker dette biblioteket, anbefales det at du aktiverer ProGuard, for å holde APK-en så lett som mulig.

Slik legger du til YouTube-biblioteket i prosjektet ditt:

• Gå over til YouTube Android Player-nettstedet, og last ned den nyeste versjonen.
• Pakk ut den påfølgende zip-filen.
• Åpne den nyutpakkede mappen og naviger til den “libs” undermappen - den skal inneholde en “YouTubeAndroidPlayerApi.jar” -fil.
• I Android Studio bytter du til "Prosjekt" -visningen.
• For å sikre at YouTube-biblioteket er inkludert i build-banen, må du importere .jar-en til prosjektets "/ libs-katalog. Åpne prosjektets "app / libs" -mappe, og dra og slipp .jar på plass.

• Åpne build.gradle-filen og legg til YouTube-biblioteket som en prosjektavhengighet:

avhengigheter {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 // Legg til følgende // implementeringsfiler (libs / YouTubeAndroidPlayerApi.jar)}

• Når du blir bedt om det, synkroniser Gradle-filene dine.

Oppdater manifestet

Hvis søknaden din kommer til å vises noen online videoinnhold, så trenger det tilgang til Internett.

Åpne prosjektets manifest og legg til Internett-tillatelse:

For å gi brukeren en smak av den filmatiske, widescreen-opplevelsen, setter jeg også MainActivity til å starte i liggende modus:

Bygg YouTube-spilleroppsettet

Du kan vise en YouTube-video ved å bruke en av:

• YouTubePlayerView. Hvis du vil bruke YouTubePlayerView i oppsettet ditt, må du utvide YouTubeBaseActivity i den oppsettets tilsvarende aktivitetsklasse.
• YouTubePlayerFragment. Dette er et fragment som inneholder en YouTubePlayerView. Hvis du velger å implementere en YouTubePlayerFragment, så gjør du det vil ikke må utvide fra YouTubeBaseActivity.

Jeg bruker YouTubePlayerView, så åpne prosjektets "Activity_main.xml" -fil og legg til en YouTubePlayerView-widget:

Implementering av YouTube-spilleren

Deretter åpner du MainActivity og fullfører følgende oppgaver:

1. Utvid YouTubeBaseActivity

Siden vi bruker en YouTubePlayerView i oppsettet, må vi utvide YouTubeBaseActivity:

offentlig klasse MainActivity utvider YouTubeBaseActivity {

2. Initialiser YouTube-spilleren

Vi initialiserer YouTube-spilleren ved å ringe initialisere () og passere API-nøkkelen vi opprettet tidligere:

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

3. Implementere onInitializationSuccess og onInitializationFailure

Til slutt må vi spesifisere hvordan applikasjonen vår skal reagere, avhengig av om initialiseringen er en suksess eller en fiasko. Hvis YouTube-spilleren initialiseres vellykket, kan vi laste inn videoen vår ved å gi den unike video-ID:

public void onInitializationSuccess (YouTubePlayer.Provider-leverandør, YouTubePlayer youTubePlayer, boolean b) {// Spesifiser video-ID // youTubePlayer.loadVideo ("hJLBcViaX8Q");

Deretter må vi fortelle applikasjonen vår hvordan den skal håndtere mislykkede initialiseringer. Jeg skal vise en skål:

public void onInitializationFailure (YouTubePlayer.Provider-leverandør, YouTubeInitializationResult youTubeInitializationResult) {Toast.makeText (MainActivity.this, "En feil oppstod", Toast.LENGTH_SHORT) .show (); }

Spille av en YouTube-video: Fullført kode

Legg til alle ovennevnte i MainActivity, og du bør ende opp med noe slikt:

import android.os.Bundle; import android.widget.Toast; import com.google.android.youtube.player.YouTubeBaseActivity; import com.google.android.youtube.player.YouTubeInitializationResult; importer com.google.android.youtube.player.YouTubePlayer; importer com.google.android.youtube.player.YouTubePlayerView; // Utvid YouTubeBaseActivity // public class MainActivity utvider YouTubeBaseActivity {// Ikke glem å erstatte dette med din egen unike API-nøkkel // public static final String YOUR_API_KEY = "YOUR_API_KEY_HERE"; @Override beskyttet tomrom onCreate (Bundle savedInstanceState) {super.onCreate (savedInstanceState); setContentView (R.layout.activity_main); YouTubePlayerView youTubePlayerView = (YouTubePlayerView) findViewById (R.id.YouTubePlayer); // Initialiser YouTube Player // youTubePlayerView.initialize (YOUR_API_KEY, new YouTubePlayer.OnInitializedListener () {@Override // Hvis YouTube Player er initialisert vellykket ... // public void onInitializationSuccess (YouTubePlayer.Provider-leverandør, YouTubePlayer youTubePlayer, boolean b) {//..så begynn å spille av følgende video // youTubePlayer.loadVideo ("hJLBcViaX8Q");} @Override // Hvis initialiseringen mislykkes ... // public void onInitializationFailure (YouTubePlayer.Provider provider, YouTubeInitializationResult youTubeInitializationResult) {//...så viser en toast // Toast.makeText (MainActivity.this, "Det oppstod en feil", Toast.LENGTH_SHORT) .show ();}}); }}

Testing av YouTube Android Player API

Du kan teste denne applikasjonen på enten en fysisk Android-smarttelefon eller -brett, eller en AVD. Hvis du bruker en AVD, må du sørge for å bruke et systembilde som inkluderer Google Play-tjenester. YouTube-appen må også installeres på AVD eller fysisk Android-enhet, da YouTube API er avhengig av en tjeneste som distribueres som en del av YouTube for Android-appen.

Installer prosjektet på enheten din, og YouTube-videoen skal begynne å spille automatisk så snart applikasjonen lastes inn. Hvis du trykker på videoen, har du tilgang til alle de kjente YouTube-kontrollene du kan bruke til å pause, spille av, spole fremover og spole tilbake videoen.

Vis Dailymotion-innhold i en WebView

Når det gjelder innebygging av videoer i Android-appen din, er det et bredt spekter av videodelingsplattformer du kan velge mellom, og noen plattformer har til og med produsert SDK-er dedikert til å hjelpe deg med å samhandle med innholdet deres - inkludert Dailymotion.

Dailymotion Player SDK for Android har en tynn innpakning rundt Android's WebView-komponent, som gjør det enklere å legge inn Dailymotion-videoer i applikasjonene dine.

I denne delen vil jeg vise deg hvordan du kan streame hvilken som helst video fra Dailymotion-nettstedet ved å bruke tredjeparts Dailymotion Player SDK.

Få Dailymotion video ID

Først går du over til Dailymotion, finner en video du vil vise, og deretter henter video-IDen.

Jeg bruker denne tidsforfallsvideoen av tåke, som har følgende URL:

www.dailymotion.com/video/x71jlg3

Videoens ID er den unike strengstrengen med tegn på slutten av URL-en, så video-IDen min er: x71jlg3.

Legge til Dailymotion SDK

Siden vi bruker Dailymotion SDK, må vi erklære det som et prosjektavhengighet. Åpne prosjektets build.gradle-fil, og legg til følgende:

avhengigheter {implementeringsfilTree (dir: libs, inkluderer:) // Legg til 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 blir bedt om det, velger du "Synkroniser prosjekt med gradle-filer."

Vær oppmerksom på at Dailymotion SDK som standard bare gir deg tilgang til Dailymotion sine offentlige data, for eksempel en videotittel og beskrivelse.Du kan utføre noen flere oppgaver ved å registrere applikasjonen din på Dailymotion-plattformen, men siden vi bare vil legge inn en video, trenger vi ikke å bekymre deg for å registrere applikasjonen vår.

Hvis du er interessert i å legge til mer Dailymotion-funksjonalitet til appene dine, kan du lære mer om å registrere applikasjonen din hos Dailymotion, over i de offisielle dokumentene.

Be om Internett-tilgang

Nok en gang strømmer vi innhold fra World Wide Web, så prosjektet vårt krever Internett-tillatelse:

Hver aktivitet som viser Dailymotion-innhold, må ha et "android: configChanges" -attributt, så legg til følgende i MainActivity:

Legger til Dailymotion's PlayerWebView-widget

Hovedkomponenten i Dailymotion SDK er et PlayerWebView UI-element, som gir en tynn innpakning rundt Android's WebView-komponent.

Vi vil utforske WebViews mer detaljert i den neste delen, men WebViews gir deg i utgangspunktet en måte å legge inn websider i applikasjonen din. Hvis vi ikke brukte SDKs spesialiserte PlayerWebView, kan vi kanskje bruke Android's vanilje WebView-komponent for å vise en hel Dailymotion-webside i applikasjonen vår.

La oss i stedet legge til en PlayerWebView i oppsettet:

Konfigurering av Dailymotion PlayerWebView

Nå har vi implementert PlayerWebView-widgeten, vi må konfigurere spilleren i vår tilsvarende aktivitetsklasse.

Åpne MainActivity, og begynn med å få en referanse til PlayerWebView:

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

Deretter kan du ringe “DailyMotionPlayer.load” og gi den video-ID-en vi hentet tidligere:

dailyMotionPlayer.load ( "x71jlg3");

Dette gir oss følgende:

import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import com.dailymotion.android.player.sdk.PlayerWebView; importer java.util.HashMap; import java.util.Map; offentlig klasse MainActivity utvider AppCompatActivity {private PlayerWebView DailyMotionPlayer; @Override beskyttet tomrom onCreate (Bundle savedInstanceState) {super.onCreate (savedInstanceState); setContentView (R.layout.activity_main); // Hent PlayerWebView // DailyMotionPlayer = (PlayerWebView) findViewById (R.id.dailymotionPlayer); Kart playerParams = new HashMap <> (); // Last inn videoen med parametrene våre // playerParams.put ("nøkkel", "verdi"); // Gi video-IDen // dagligMotionPlayer.load ("x71jlg3"); }}

Installer prosjektet på en fysisk Android-enhet eller emulator, og Dailymotion-videoen din skal begynne å spille automatisk.

Legge ned en Vimeo-video

Når det gjelder innebygging av videoinnhold, vil du vanligvis bruke et plattformspesifikt API eller plattformspesifikt SDK der det er mulig. Men hva om det ikke er en SDK eller API tilgjengelig for videodelingsplattformen du har i tankene?

I disse scenariene kan du bruke Android's WebView-komponent for å vise videoen som en webside som er innebygd i aktiviteten din. I denne siste delen vil jeg vise deg hvordan du kan legge inn en video fra den populære Vimeo-plattformen, ved hjelp av en WebView.

I tillegg til å vise videoinnhold, kan WebViews være nyttige i en rekke andre scenarier. Tenk deg for eksempel at du har noe innhold som må oppdateres regelmessig; å være vert for dette innholdet på nettet og deretter vise det i applikasjonen din via en WebView gir deg fleksibiliteten til å endre innholdet online når som helst, uten å måtte publisere en ny versjon av appen din. Vær imidlertid forsiktig når du bruker WebViews, da de ikke støtter mange av funksjonene du vanligvis forventer fra en frittstående nettleser. Spesielt mangler WebViews en adresselinje eller navigasjonskontroller, noe som kan gjøre innholdet deres vanskelig for brukerne å samhandle med.

Før du bruker en WebView, bør du alltid vurdere om en alternativ løsning kan være mer passende, for eksempel kan du laste av innholdet til enhetens standard nettleser, eller implementere Chrome Custom Tabs.

Oppdatering av manifestet

Siden vi strømmer en video fra Internett, må vi legge til Internett-tillatelse til manifestet vårt:

Jeg skal også starte MainActivity i liggende modus:

Legge til en WebView til brukergrensesnittet

La oss deretter legge til en WebView til appen vår. Vi kan enten legge WebView til vår aktivitets layout, eller gjøre hele aktiviteten om til en WebView ved å implementere den i applikasjonens onCreate () -metode.

Jeg skal legge til en WebView i applikasjonens layout:

Velg videoen din

Nok en gang trenger vi en video som skal vises, men denne gangen er vi det ikke bruker en video-ID:

• Gå over til Vimeo og velg en video du vil bruke; Jeg har valgt denne vinterperioden.
• Gi "Del" -knappen et klikk.
• Velg "Embed" -ikonet; Dette vil gi deg en innebygd kode som skal se slik ut:

Denne koden inneholder følgende informasjon:

• iframe. Spesifiserer at vi legger inn en annen HTML-side i den nåværende konteksten.
• src. Videoens vei, slik at appen din vet hvor du finner denne videoen.
• bredde høyde. Videoens dimensjoner.
• ramme grense. Om du vil vise en kant rundt videoens ramme. De mulige verdiene er grense (1) og ingen grense (0).
• allowfullscreen. Dette gjør at videoen kan vises i fullskjermmodus.

Jeg skal legge denne innebygde koden til prosjektet mitt som en streng, så du må kopiere / lime inn denne informasjonen i følgende mal:

String vimeoVideo = "LINKEN DIN GIR HER';

Frustrerende, vi må gjøre noen endringer før innebygd koden er kompatibel med Android-appen vår. Først må vi legge til noen "" tegn, slik at Android Studio ikke klager over feil formatering:

String vimeoVideo = "';

Endelig kan standardvideo-dimensjoner være for store for noen Android-smarttelefon-skjermer.
I produksjonen ville du vanligvis eksperimentere med forskjellige dimensjoner for å se hva som gir de beste resultatene, på tvers av så mange forskjellige skjermkonfigurasjoner som mulig. For å forhindre at denne artikkelen går ut av kontroll, vil jeg imidlertid bruke følgende, noe som skal gi gode resultater på den "typiske" Android-smarttelefonskjermen:

String vimeoVideo = "';

Vise en webside i Android-appen din

Nå har vi laget vår layout og har HTML-en vår klar til å gå, åpne MainActivity og lar implementere vår WebView.

Start med å legge til HTML-strengen:

String vimeoVideo = "';

Deretter må vi laste ovennevnte webside i WebView ved hjelp av metoden loadUrl ():

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

JavaScript er deaktivert som standard, så vi må aktivere det i WebView.

Hver gang du oppretter en WebView, tildeles den automatisk et sett med standard nettinnstillinger. Vi henter dette WebSettings-objektet ved å bruke getSettings () -metoden, og aktiverer deretter JavaScript ved å bruke setJavaScriptEnabled ().

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

Etter å ha lagt alt dette til MainActivity, skal koden din se slik ut:

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 utvider AppCompatActivity {@Override beskyttet tomrom onCreate (Bundle savedInstanceState) {super.onCreate (savedInstanceState); setContentView (R.layout.activity_main); String vimeoVideo = ""; WebView webView = (WebView) findViewById (R.id.myWebView); webView.setWebViewClient (ny WebViewClient () {@Override public boolean shouldOverrideUrlLoading (WebView webView, WebResourceRequest forespørsel) {webView.loadU. ()); return true;}}); WebSettings webSettings = webView.getSettings (); webSettings.setJavaScriptEnabled (true); webView.loadData (vimeoVideo, "text / html", "utf-8");}}

Testing av Vimeo-appen din

Du kjenner boret nå: installer dette prosjektet på en fysisk Android-enhet eller AVD. WebView er ikke satt til å spilles automatisk, så du må gi videoen et trykk for å avsløre Vimeos mediekontroller. Du kan deretter spille av, pause, spole tilbake og spole fremover for å sikre at den fungerer som den skal.

Innpakking

I denne artikkelen viste jeg deg hvordan du legger YouTube-, Vimeo- og Dailymotion-videoer til appene dine ved å bruke plattformspesifikke API-er og SDK-er, og Android sin egen WebView-komponent. Jeg viste deg hvordan du kan pakke en videofil med applikasjonen din, slik at den kan lagres og spilles lokalt.

Hva er din favoritt måte å vise multimediainnhold til brukerne dine? Gi oss beskjed i kommentarene nedenfor!