Conţinut

• Cum să încorporați videoclipuri YouTube în aplicația dvs. Android
• Recuperarea ID-ului unui videoclip YouTube
• Obțineți amprenta SHA-1 a proiectului
• Înregistrează-te la Consola API Google
• Descărcați API-ul YouTube Android Player
• Actualizați-vă manifestul
• Construirea machetei YouTube Player
• Implementarea YouTube Player
• 1. Extindeți YouTubeBaseActivity
• 2. Inițializează YouTube Player
• 3. Implementați onInitializationSuccess și onInitializationFailure
• Redarea unui videoclip YouTube: cod completat
• Testarea API-ului Android Player YouTube
• Afișați conținut Dailymotion într-un WebView
• Obțineți codul video Dailymotion
• Adăugarea SDK Dailymotion
• Solicitarea accesului la Internet
• Adăugarea widgetului PlayerWebView Dailymotion
• Configurarea player-ului nostru DailymotionWebView
• Încorporarea unui videoclip Vimeo
• Actualizarea manifestului
• Adăugarea unui WebView la UI-ul nostru
• Alege-ți videoclipul
• Afișarea unei pagini web în aplicația dvs. Android
• Testarea aplicației Vimeo
• Înveliți

După ce MediaController este vizibil pe ecran, puteți reda, întrerupe, returna și returna rapid videoclipul și să sari în orice punct al clipului trăgând bara de progres a MediaController.

Cum să încorporați videoclipuri YouTube în aplicația dvs. Android

Încorporarea unui fișier video în aplicația dvs. este o modalitate excelentă de a vă asigura că videoclipul este întotdeauna disponibil, indiferent de conexiunea la internet a dispozitivului. Cu toate acestea, încorporarea mai multor videoclipuri mari, de înaltă rezoluție, în aplicație este, de asemenea, o modalitate excelentă de a crește dimensiunea APK-ului!

Dacă vă preocupă dimensiunea APK sau aplicația dvs. include videoclipuri care pot fi adăugate suplimentar, atunci este posibil să doriți să publicați aceste videoclipuri pe o platformă online și apoi să le transmiteți prin aplicația dvs. în timpul rulării.

Când vine vorba de publicarea videoclipurilor online, există un site web care îmi apare instantaneu, așa că în această secțiune vă voi arăta cum să încorporați orice Videoclipuri YouTube în aplicația dvs., folosind biblioteca clientului YouTube Android API API.

Recuperarea ID-ului unui videoclip YouTube

Pentru a începe, trebuie să decideți ce videoclip YouTube doriți să afișați, apoi să regăsiți ID-ul video unic.

Puteți folosi orice videoclip YouTube, dar optez pentru „„ Tehnica preferată din 2018 ”. Încărcați videoclipul ales și aruncați o privire la adresa URL din bara de adrese a browserului dvs., de exemplu, URL-ul pentru video este:

youtube.com/watch?v=hJLBcViaX8Q

ID-ul este partea URL care identifică în mod unic acest videoclip, care este șirul de caractere de la sfârșitul URL-ului (practic, totul după simbolul „=”). ID-ul pentru videoclip este:

hJLBcViaX8Q

Notează ID-ul videoclipului tău, așa cum îl vom folosi ulterior.

Obțineți amprenta SHA-1 a proiectului

Pentru a accesa API-ul YouTube Player YouTube, va trebui să generezi o cheie API cu restricții Android. Aceasta presupune conectarea cheii API la numele pachetului unic și la amprenta certificatului proiectului (SHA-1).

Puteți prelua amprenta SHA-1 a proiectului dvs. prin intermediul consolei Gradle:

• Selectați fila Gradle în partea dreaptă a ferestrei Android Studio.
• Selectați modulul „aplicație”, urmat de „Sarcini> Android> semnare Raport.”

• Deschideți fila Consola Gradle care apare în partea dreaptă jos a ecranului.
• Consola Gradle se va deschide automat. Găsiți valoarea SHA-1 în această fereastră și notați-o.

Folosim o amprentă de certificare de depanare, care este potrivită numai pentru testarea unei aplicații. Înainte de a publica o aplicație, ar trebui să generezi întotdeauna o nouă cheie API bazată pe certificatul de eliberare al respectivei aplicații.

Înregistrează-te la Consola API Google

Înainte de a putea utiliza API-ul YouTube Android Player, trebuie să vă înregistrați aplicația în Consola API Google:

• Întoarceți-vă la Consola API.
  În antet, selectați numele proiectului dvs. curent (unde este poziționat cursorul în imaginea următoare).

• În fereastra următoare, selectați „Proiect nou”.
• Dați un nume proiectului dvs., apoi faceți clic pe „Creare”.
• În meniul din stânga, selectați „Credențiale”.
• Dați clic pe butonul albastru „Creare credențiale”, apoi selectați „cheie API”.
• Cheia dvs. API va apărea acum într-o fereastră pop-up, care include un prompt de restricționare a acestei chei API. Tastele restricționate sunt mai sigure, așa că, dacă nu aveți nevoie specifică de o cheie API fără restricții, optați pentru „Restrict key”.
• Pe ecranul următor, atribuiți-vă cheii API un nume distinctiv.
• Selectați butonul radio „Aplicații Android”.
• Faceți clic pe „Adăugați numele pachetului și amprenta digitală”.
• Copiați / inserați amprenta SHA-1 a proiectului dvs. în secțiunea următoare, apoi introduceți numele pachetului proiectului dvs. (care apare în partea de sus a fiecărui fișier de clasă Java și în Manifestul proiectului dvs.).
• Când sunteți mulțumit de informațiile introduse, faceți clic pe „Salvați”.

Descărcați API-ul YouTube Android Player

În continuare, va trebui să descărcați biblioteca clientului API Android Player YouTube. Când utilizați această bibliotecă, vă recomandăm să activați ProGuard, pentru a vă ajuta să vă păstrați APK-ul cât mai ușor posibil.

Pentru a adăuga biblioteca YouTube la proiectul tău:

• Accesați site-ul YouTube Android Player și descărcați cea mai recentă versiune.
• Decuplați fișierul zip ulterior.
• Deschideți folderul recent dezarhivat și navigați la subfolderul „libs” - ar trebui să conțină un fișier „YouTubeAndroidPlayerApi.jar”.
• În Android Studio, treceți la vizualizarea „Proiect”.
• Pentru a vă asigura că biblioteca YouTube este inclusă în calea dvs. de construire, va trebui să importați .jar în proiectul dvs. „/ libs ”director. Deschideți folderul „app / libs” al proiectului dvs., apoi trageți și lăsați .jar în poziție.

• Deschideți fișierul build.gradle și adăugați biblioteca YouTube ca dependență de proiect:

dependencies {implement fileTree (dir: libs, include:) implementare com.android.support:appcompat-v7:28.0.0 implementare com.android.support:design:28.0.0 implementare com.android.support.constraint: constraint-layout : 1.1.3 testImplementation junit: junit: 4.12 androidTestImplementation com.android.support.test: runner: 1.0.2 // Adaugă următoarele // fișiere de implementare (libs / YouTubeAndroidPlayerApi.jar)}

• Când vi se solicită, sincronizați fișierele dvs. Gradle.

Actualizați-vă manifestul

Dacă aplicația dvs. va fi afișată orice conținut video online, atunci va fi nevoie de acces la Internet.

Deschide Manifestul proiectului și adaugă permisiunea de pe Internet:

Pentru a oferi utilizatorului un gust al acelei experiențe cinematografice, pe ecran lat, am setat și lansarea MainActivity în modul peisaj:

Construirea machetei YouTube Player

Puteți afișa un videoclip YouTube, utilizând fie:

• YouTubePlayerView. Dacă doriți să utilizați YouTubePlayerView în aspectul dvs., atunci va trebui să extindeți YouTubeBaseActivity în clasa de activitate corespunzătoare a layout-ului.
• YouTubePlayerFragment. Acesta este un fragment care conține un YouTubePlayerView. Dacă alegeți să implementați un YouTubePlayerFragment, atunci dvs. nu va trebuie să se extindă de la YouTubeBaseActivity.

Voi folosi YouTubePlayerView, așa că deschideți fișierul „Activity_main.xml” al proiectului și adăugați un widget YouTubePlayerView:

Implementarea YouTube Player

Apoi, deschideți MainActivity și finalizați următoarele sarcini:

1. Extindeți YouTubeBaseActivity

Deoarece folosim un YouTubePlayerView în aspectul nostru, trebuie să extindem YouTubeBaseActivity:

public class MainActivity extinde YouTubeBaseActivity {

2. Inițializează YouTube Player

Inițializăm YouTube Player apelând la inițializare () și trecând cheia API creată mai devreme:

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

3. Implementați onInitializationSuccess și onInitializationFailure

În cele din urmă, trebuie să specificăm modul în care trebuie să reacționeze aplicația noastră, în funcție de dacă inițializarea este un succes sau un eșec. Dacă YouTube Player este inițializat cu succes, atunci ne putem încărca videoclipul, trecând codul video unic:

public void onInitializationSuccess (furnizor YouTubePlayer.Provider, YouTubePlayer youTubePlayer, boolean b) {// Specificați ID-ul video // youTubePlayer.loadVideo ("hJLBcViaX8Q");

În continuare, trebuie să spunem aplicației noastre cum ar trebui să se ocupe de inițializări eșuate. Am să afișez un Toast:

public void onInitializationFailure (furnizor YouTubePlayer.Provider, YouTubeInitializationResult youTubeInitializationResult) {Toast.makeText (MainActivity.this, "A apărut o eroare", Toast.LENGTH_SHORT) .show (); }

Redarea unui videoclip YouTube: cod completat

Adăugați toate cele de mai sus la MainActivity și ar trebui să terminați cu așa ceva:

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; // Extindeți YouTubeBaseActivity // clasa publică MainActivity extinde YouTubeBaseActivity {// Nu uitați să înlocuiți asta cu propria dvs. cheie API unică // public static final String YOUR_API_KEY = "YOUR_API_KEY_HERE"; @Override protected void onCreate (Bundle savedInstanceState) {super.onCreate (salvatInstanceState); setContentView (R.layout.activity_main); YouTubePlayerView youTubePlayerView = (YouTubePlayerView) findViewById (R.id.YouTubePlayer); // Inițializați Playerul YouTube // youTubePlayerView.initialize (YOUR_API_KEY, noul YouTubePlayer.OnInitializedListener () {@Override // Dacă YouTube Player este inițializat cu succes ... // public void onInitializationSuccess (YouTubePlayer.Provider provider, YouTubePlayer youTubePlayer b) {//..then începe redarea următorului videoclip // youTubePlayer.loadVideo ("hJLBcViaX8Q");} @Override // Dacă inițializarea eșuează ... // public void onInitializationFailure (YouTubePlayer.Provider provider, YouTubeInitializationResult youTubeInitializationResult) {//...then display a toast // Toast.makeText (MainActivity.this, "A apărut o eroare", Toast.LENGTH_SHORT) .show ();}}); }}

Testarea API-ului Android Player YouTube

Puteți testa această aplicație fie pe un smartphone sau tabletă Android fizic, fie pe un AVD. Dacă utilizați un AVD, asigurați-vă că utilizați o imagine de sistem care include servicii Google Play. Aplicația YouTube trebuie instalată și pe AVD sau pe dispozitivul fizic Android, deoarece API-ul YouTube se bazează pe un serviciu distribuit ca parte a aplicației YouTube pentru Android.

Instalați proiectul pe dispozitivul dvs., iar videoclipul YouTube ar trebui să înceapă să se redea automat, imediat ce aplicația se încarcă. Dacă atingeți videoclipul, veți avea acces la toate controalele YouTube cunoscute pe care le puteți utiliza pentru a face o pauză, redare, redirecționare rapidă și derulare video.

Afișați conținut Dailymotion într-un WebView

Când vine vorba de încorporarea videoclipurilor în aplicația dvs. pentru Android, există o gamă largă de platforme de partajare video din care puteți alege, iar unele platforme au produs chiar SDK-uri dedicate să vă ajute să interacționați cu conținutul lor - inclusiv Dailymotion.

SDK Dailymotion Player pentru Android oferă un înveliș subțire în jurul componentei WebView de la Android, ceea ce facilitează încorporarea videoclipurilor Dailymotion în aplicațiile dvs.

În această secțiune, vă voi arăta cum să difuzați orice videoclip de pe site-ul Dailymotion, folosind SDK-ul terțului Dailymotion Player.

Obțineți codul video Dailymotion

În primul rând, accesați Dailymotion, găsiți un videoclip pe care doriți să îl afișați, apoi recuperați ID-ul video.

Voi folosi acest videoclip cu interval de timp de ceață, care are următoarea adresă URL:

www.dailymotion.com/video/x71jlg3

ID-ul videoclipului este șirul unic de caractere de la sfârșitul adresei URL, deci ID-ul meu video este: x71jlg3.

Adăugarea SDK Dailymotion

Deoarece folosim SDK Dailymotion, trebuie să-l declaram ca dependent de proiect. Deschideți fișierul build.gradle al proiectului și adăugați următoarele:

dependences {implement fileTree (dir: libs, include:) // Adăugați următoarele // implementare com.dailymotion.dailymotion-sdk-android: sdk: 0.1.29 implementare com.android.support:appcompat-v7:28.0.0 implementare com.android.support:design:28.0.0 implementare com.android.support.constraint: constraint-layout: 1.1.3 testImplementation junit: junit: 4.12 androidTestImplementation com.android.support.test: runner: 1.0.2}

Când vi se solicită, selectați „Sincronizați proiectul cu fișiere de gradație.”

Rețineți că, în mod implicit, SDK Dailymotion vă oferă acces numai la datele publice ale Dailymotion, cum ar fi titlul și descrierea unui videoclip.Puteți efectua unele sarcini suplimentare prin înregistrarea aplicației dvs. pe platforma Dailymotion, dar, întrucât dorim doar să încorporam un videoclip, nu trebuie să ne facem griji cu privire la înregistrarea cererii noastre.

Dacă sunteți interesant să adăugați mai multe funcționalități Dailymotion în aplicațiile dvs., atunci puteți afla mai multe despre înregistrarea cererii dvs. la Dailymotion, la documentele oficiale.

Solicitarea accesului la Internet

Încă o dată, transmitem conținut de pe World Wide Web, astfel încât proiectul nostru necesită permisiunea internetului:

Fiecare activitate care afișează conținut Dailymotion trebuie să aibă un atribut „android: configChanges”, așa că adăugați următoarele la MainActivity:

Adăugarea widgetului PlayerWebView Dailymotion

Componenta principală a Dailymotion SDK este un element UI PlayerWebView, care oferă o înfășurare subțire în jurul componentei WebView de Android.

Vom explora WebViews mai detaliat în secțiunea următoare, însă WebViews vă oferă în mod esențial o modalitate de a încorpora pagini web în aplicația dvs. Dacă nu folosim PlayerWebView specializat pe SDK, atunci am putea folosi componenta WebView de vanilie a Android pentru a afișa o întreagă pagină web Dailymotion în aplicația noastră.

În schimb, să adăugăm un PlayerWebView în aspectul nostru:

Configurarea player-ului nostru DailymotionWebView

Acum am implementat widget-ul PlayerWebView, trebuie să configurăm playerul în clasa noastră de activități corespunzătoare.

Deschideți MainActivity și începeți să obțineți o referință la PlayerWebView:

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

Apoi, apelați „dailyMotionPlayer.load” și transmiteți-l pe ID-ul video pe care l-am recuperat mai devreme:

dailyMotionPlayer.load ( "x71jlg3");

Aceasta ne oferă următoarele:

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; public class MainActivity extinde AppCompatActivity {private PlayerWebView dailyMotionPlayer; @Override protected void onCreate (Bundle savedInstanceState) {super.onCreate (salvatInstanceState); setContentView (R.layout.activity_main); // Recupera PlayerWebView nostru // dailyMotionPlayer = (PlayerWebView) findViewById (R.id.dailymotionPlayer); Hartă playerParams = HashMap new <> (); // Încărcați videoclipul cu parametrii noștri // playerParams.put ("cheie", "valoare"); // Treceți codul video // dailyMotionPlayer.load ("x71jlg3"); }}

Instalați-vă proiectul pe un dispozitiv sau emulator fizic Android, iar videoclipul dvs. Dailymotion ar trebui să înceapă să se redea automat.

Încorporarea unui videoclip Vimeo

Când vine vorba de încorporarea conținutului video, în mod obișnuit, veți dori să utilizați o API specifică platformei sau SDK specifică platformei, acolo unde este posibil. Dar ce se întâmplă dacă nu există un SDK sau o API disponibilă, pentru platforma de partajare video pe care o aveți în minte?

În aceste scenarii, puteți utiliza componenta WebView pentru Android pentru a afișa videoclipul ca pe o pagină web încorporată în aspectul activității dvs. În această secțiune finală, vă voi arăta cum să încorporați un videoclip din platforma populară Vimeo, folosind un WebView.

Pe lângă afișarea conținutului video, WebViews pot fi utile într-o serie de alte scenarii. De exemplu, imaginați-vă că aveți ceva conținut care trebuie actualizat în mod regulat; găzduirea acelui conținut online și apoi afișarea acestuia în aplicația dvs. printr-un WebView vă oferă flexibilitatea de a schimba acel conținut online în orice moment, fără a fi necesar să publicați o nouă versiune a aplicației. Cu toate acestea, trebuie să fii prudent atunci când folosești WebViews, deoarece nu acceptă multe dintre funcțiile pe care le aștepți de obicei de la un browser web de sine stătător. În special, WebViews nu au o bară de adrese sau controale de navigație, ceea ce poate face conținutul lor dificil pentru interacționarea utilizatorilor.

Înainte de a utiliza un WebView, ar trebui să aveți întotdeauna în vedere dacă o soluție alternativă poate fi mai potrivită, de exemplu, puteți descărca conținutul în browserul web implicit al dispozitivului sau puteți implementa filele personalizate Chrome.

Actualizarea manifestului

Întrucât transmitem un videoclip de pe Internet, trebuie să adăugăm permisiunea de internet la manifestul nostru:

De asemenea, voi lansa MainActivity în modul peisaj:

Adăugarea unui WebView la UI-ul nostru

În continuare, să adăugăm un WebView în aplicația noastră. Putem fie să adăugăm WebView la aspectul activității noastre, fie să transformăm întreaga activitate într-un WebView, punând-o în aplicare în metoda onCreate () a aplicației noastre.

Voi adăuga un WebView la aspectul aplicației noastre:

Alege-ți videoclipul

Încă o dată, avem nevoie de un videoclip care să fie afișat, dar de data aceasta suntem nu folosirea unui ID video:

• Îndreptați-vă spre Vimeo și alegeți un videoclip pe care doriți să îl utilizați; Am optat pentru acest interval de timp de iarnă.
• Dați clic pe butonul „Partajează”.
• Selectați pictograma „Embed”; acest lucru vă va oferi un cod încorporat care ar trebui să arate așa:

Acest cod oferă următoarele informații:

• iframe. Specifică faptul că încorporam o altă pagină HTML în contextul actual.
• src. Calea videoclipului, astfel încât aplicația dvs. știe unde să găsească acest videoclip.
• latime inaltime. Dimensiunile videoclipului.
• frameborder. Indiferent dacă este afișat un chenar în jurul cadrului videoclipului. Valorile posibile sunt border (1) și fără frontieră (0).
• allowfullscreen. Aceasta permite afișarea video în modul ecran complet.

Voi adăuga acest cod încorporat în proiectul meu ca șir, deci trebuie să copiați / lipiți aceste informații în următorul șablon:

String vimeoVideo = "LINKUL TĂU AICI';

În mod frustrant, trebuie să facem câteva modificări înainte ca codul încorporat să fie compatibil cu aplicația noastră pentru Android. În primul rând, trebuie să adăugăm câteva „” caractere, pentru ca Android Studio să nu se plângă pentru formatarea incorectă:

String vimeoVideo = "';

În cele din urmă, dimensiunile video implicite pot fi prea mari pentru unele ecrane smartphone Android.
În producție, în mod obișnuit, experimentați diverse dimensiuni pentru a vedea ce oferă cele mai bune rezultate, pe cât mai multe configurații de ecran diferite. Cu toate acestea, pentru a ajuta la evitarea acestui control de la acest articol, voi folosi doar următoarele, care ar trebui să ofere rezultate bune pe ecranul smartphone-ului Android „tipic”:

String vimeoVideo = "';

Afișarea unei pagini web în aplicația dvs. Android

Acum ne-am creat aspectul și avem HTML-ul nostru gata de pornire, deschidem MainActivity și permiteți implementarea WebView.

Începeți prin adăugarea șirului HTML:

String vimeoVideo = "';

În continuare, trebuie să încărcăm pagina web de mai sus în WebView, folosind metoda loadUrl ():

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

JavaScript este dezactivat implicit, deci va trebui să-l activăm în WebView.

De fiecare dată când creați un WebView, i se atribuie automat un set de setări Web implicite. Vom recupera acest obiect WebSettings, folosind metoda getSettings (), apoi activăm JavaScript, folosind setJavaScriptEnabled ().

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

După ce ați adăugat toate acestea la MainActivity, codul dvs. ar trebui să arate așa:

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; public class MainActivity extinde AppCompatActivity {@Override protected void onCreate (Bundle savedInstanceState) {super.onCreate (salvatInstanceState); setContentView (R.layout.activity_main); String vimeoVideo = ""; WebView webView = (WebView) findViewById (R.id.myWebView); webView.setWebViewClient (nou WebViewClient () {@Override public boolean shouldOverrideUrlLoading (WebView webView, WebResourceRequest request) {webView.loadUrl ()); return true;}}); WebSettings webSettings = webView.getSettings (); webSettings.setJavaScriptEnabled (true); webView.loadData (vimeoVideo, "text / html", "utf-8");}}

Testarea aplicației Vimeo

Cunoașteți drilul până acum: instalați acest proiect pe un dispozitiv fizic Android sau AVD. WebView nu este setat să se redea automat, astfel încât va trebui să dați un videoclip atinge, pentru a dezvălui controalele media ale Vimeo. Puteți apoi reda, întrerupe, returna și returna rapid videoclipul, pentru a vă asigura că funcționează corect.

Înveliți

În acest articol, v-am arătat cum să adăugați videoclipuri YouTube, Vimeo și Dailymotion în aplicațiile dvs., folosind API-uri și SDK-uri specifice platformei și componenta WebView proprie a Android. De asemenea, v-am arătat cum puteți grupa un fișier video cu aplicația dvs., astfel încât să poată fi stocat și redat local.

Care este modul tău preferat de a afișa conținut multimedia utilizatorilor tăi? Spuneți-ne în comentariile de mai jos!