Content

• Com incrustar vídeos de YouTube a la vostra aplicació per a Android
• Recuperació de l'ID d'un vídeo de YouTube
• Obteniu l’empremta SHA-1 del vostre projecte
• Registra't a la consola de l'API de Google
• Baixeu l'API de YouTube Android Player
• Actualitzeu el vostre manifest
• Construcció del disseny del reproductor de YouTube
• Implantació del reproductor de YouTube
• 1. Extendre YouTubeBaseActivity
• 2. Inicialitzeu el reproductor de YouTube
• 3. Implementar onInitializationSuccess i onInitializationFailure
• Reproducció d'un vídeo de YouTube: codi completat
• Prova de l'API de Android Android Player
• Mostra el contingut de Dailymotion en una WebView
• Obteniu l'identificador de vídeo Dailymotion
• Afegir el SDK de Dailymotion
• Sol·licita accés a Internet
• Afegir el giny de PlayerWebView Dailymotion
• Configuració del nostre reproductor de DailymotionWebView
• Incrustar un vídeo de Vimeo
• Actualització del manifest
• Afegir un WebView a la vostra interfície d'interès
• Tria el teu vídeo
• Es mostra una pàgina web a l'aplicació Android
• Prova de l'aplicació Vimeo
• Embalatge

Una vegada que el MediaController sigui visible a la pantalla, podeu reproduir, fer una pausa, rebobinar i avançar ràpidament el vídeo i saltar a qualsevol punt del clip arrossegant la barra de progrés del MediaController.

Com incrustar vídeos de YouTube a la vostra aplicació per a Android

Incrustar un fitxer de vídeo dins de la vostra aplicació és una bona manera de garantir que el vídeo sempre està disponible, independentment de la connexió a Internet del dispositiu. Tot i això, incrustar diversos vídeos de gran resolució i alta resolució a la vostra aplicació també és una manera excel·lent d’augmentar la mida del vostre APK.

Si us preocupa la mida d’APK o la vostra aplicació inclou vídeos amb addicionals addicionals, potser voldreu publicar aquests vídeos a una plataforma en línia i, a continuació, transmetre’ls a través de l’aplicació en temps de realització.

Quan es tracta de publicar vídeos en línia, hi ha un lloc web que apareix al vostre instant de manera instantània, així que en aquesta secció us mostraré com incrustar cap Vídeo de YouTube a la vostra aplicació mitjançant la biblioteca de clients de l'API de Android Android Player.

Recuperació de l'ID d'un vídeo de YouTube

Per començar, heu de decidir quin vídeo de YouTube voleu visualitzar i, a continuació, recuperar el seu identificador de vídeo únic.

Podeu utilitzar qualsevol vídeo de YouTube, però estic optant per la "tecnologia preferida del 2018". Carregueu el vídeo escollit i feu una ullada a la seva URL a la barra d'adreces del vostre navegador, per exemple, l'URL del vídeo és:

youtube.com/watch?v=hJLBcViaX8Q

L’ID és la part de l’URL que identifica de manera exclusiva aquest vídeo, que és la cadena de caràcters al final de l’URL (bàsicament, tot després del símbol “=”). L'identificador de vídeo per al vídeo és:

hJLBcViaX8Q

Anoteu la vostra identificació de vídeo, tal com la farem servir més endavant.

Obteniu l’empremta SHA-1 del vostre projecte

Per accedir a l’API de YouTube Android Player, haureu de generar una clau d’API amb restriccions a Android. Es tracta d’enllaçar la clau d’API al nom del paquet únic i a l’empremta digital del certificat (SHA-1).

Podeu recuperar l’empremta digital del projecte SHA-1 a través de la consola Gradle:

• Seleccioneu la pestanya Gradle que hi ha a la part dreta de la finestra d'Android Studio.
• Seleccioneu el mòdul "aplicació", seguit de "Tasques> Android> signatureReport".

• Obriu la pestanya Consola Gradle que apareix cap a la part inferior dreta de la pantalla.
• La consola Gradle s'obrirà automàticament. Cerqueu el valor SHA-1 en aquesta finestra i anoteu-ne.

Estem utilitzant una empremta digital de certificat de depuració, adequada només per provar una aplicació. Abans de publicar una aplicació, sempre heu de generar una nova clau d’API basada en el certificat d’alliberament d’aquesta aplicació.

Registra't a la consola de l'API de Google

Abans de poder utilitzar l’API de YouTube Android Player, heu de registrar la vostra aplicació a la consola de l’API de Google:

• Dirigiu-vos a la consola API.
  A la capçalera, seleccioneu el nom del vostre projecte actual (on es troba el cursor a la captura de pantalla següent).

• A la finestra següent, seleccioneu "Projecte nou".
• Poseu un nom al vostre projecte i, a continuació, feu clic a "Crea".
• Al menú de l'esquerra, seleccioneu "Credencials".
• Feu un clic al botó blau "Crear credencials" i, a continuació, seleccioneu "Clau API".
• La vostra clau d’API ara apareixerà en una finestra emergent, que inclou un missatge per restringir aquesta clau d’API. Les claus restringides són més segures, de manera que, a menys que necessiti específicament una clau d’API sense restriccions, opteu per “Restringir la clau”.
• A la pantalla següent, poseu a la vostra clau d’API un nom distintiu.
• Seleccioneu el botó de ràdio "Aplicacions d'Android".
• Feu clic a "Afegir nom del paquet i empremta digital".
• Copieu / enganxeu l’empremta digital del projecte SHA-1 a la secció següent i introduïu el nom del paquet del vostre projecte (que apareix a la part superior de tots els fitxers de classe Java i al manifest del vostre projecte).
• Quan estigueu satisfet amb la informació que heu introduït, feu clic a "Desa".

Baixeu l'API de YouTube Android Player

A continuació, haureu de descarregar la biblioteca de clients de l'API de YouTube Android Player. Quan utilitzeu aquesta biblioteca, us recomanem que activeu ProGuard per ajudar a mantenir el vostre APK el més lleuger possible.

Per afegir la biblioteca de YouTube al vostre projecte:

• Dirigiu-vos al lloc web de YouTube Android Player i descarregueu la versió més recent.
• Descomprimiu el fitxer zip posterior.
• Obriu la carpeta recent no descomprimida i navegueu a la seva subcarpeta "libs": hauria de contenir un fitxer "YouTubeAndroidPlayerApi.jar".
• A Android Studio, canvieu a la vista "Projecte".
• Per assegurar-vos que la biblioteca de YouTube s’inclogui a la vostra ruta de creació, haureu d’importar el .jar al "projecte"directori / libs ”. Obriu la carpeta "app / libs" del vostre projecte i, després, arrossegueu i deixeu anar el .jar a la seva posició.

• Obriu el vostre fitxer build.gradle i afegiu la biblioteca de YouTube com a dependència del projecte:

dependencies {implement fileTree (dir: libs, include:) implementació com.android.support:appcompat-v7:28.0.0 implementació com.android.support:design:28.0.0 implementació com.android.support.constraint: constraint-layout : 1.1.3 testImplementation junit: junit: 4.12 androidTestImplementation com.android.support.test: runner: 1.0.2 // Afegiu els següents fitxers de implementació // libs / YouTubeAndroidPlayerApi.jar)}

• Quan se us demana, sincronitzeu els vostres fitxers Gradle.

Actualitzeu el vostre manifest

Si la vostra aplicació es mostrarà cap contingut de vídeo en línia, llavors serà necessari accedir a Internet.

Obriu el Manifest del vostre projecte i afegiu el permís d’Internet:

Per tal que l'usuari tingui un gust d'aquesta experiència cinematogràfica i de pantalla panoràmica, també estic configurant MainActivity per llançar-se en mode paisatge:

Construcció del disseny del reproductor de YouTube

Podeu visualitzar un vídeo de YouTube mitjançant:

• YouTubePlayerView. Si voleu utilitzar YouTubePlayerView en la vostra disposició, haureu d’estendre YouTubeBaseActivity a la classe d’Activitat corresponent del disseny.
• YouTubePlayerFragment. Aquest és un fragment que conté un YouTubePlayerView. Si trieu implementar un YouTubePlayerFragment, vosaltres mateixos no ho faré s’han d’estendre des de YouTubeBaseActivity.

Utilitaré YouTubePlayerView, per tant, obriu el fitxer "Activity_main.xml" del vostre projecte i afegeix un widget YouTubePlayerView:

Implantació del reproductor de YouTube

A continuació, obriu el vostre MainActivity i completeu les tasques següents:

1. Extendre YouTubeBaseActivity

Com que utilitzem YouTubePlayerView en el nostre disseny, hem d’estendre YouTubeBaseActivity:

public class MainActivity s'estén YouTubeBaseActivity {

2. Inicialitzeu el reproductor de YouTube

Inicialitzem YouTube Player trucant a inicialitzar () i passant la clau d’API que hem creat anteriorment:

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

3. Implementar onInitializationSuccess i onInitializationFailure

Finalment, hem d’especificar com hauria de reaccionar la nostra aplicació, segons si la inicialització és un èxit o un fracàs. Si el reproductor de YouTube s’inicialitza amb èxit, llavors podrem carregar el nostre vídeo passant l’ID de vídeo únic:

public void onInitializationSuccess (proveïdor de YouTubePlayer.Provider, YouTubePlayer youTubePlayer, boolean b) {// Especifiqueu l'ID del vídeo // youTubePlayer.loadVideo ("hJLBcViaX8Q");

A continuació, hem d’explicar a la nostra aplicació com ha de gestionar les inicialitzacions fallides. Jo mostraré un brindis:

public void onInitializationFailure (proveïdor de YouTubePlayer.Provider, YouTubeInitializationResult youTubeInitializationResult) {Toast.makeText (MainActivity.this, "S'ha produït un error", Toast.LENGTH_SHORT) .show (); }

Reproducció d'un vídeo de YouTube: codi completat

Afegiu tot el que hi ha més amunt a MainActivity i haureu d’acabar amb una cosa així:

importa android.os.Bundle; importa android.widget.Toast; importa com.google.android.youtube.player.YouTubeBaseActivity; importa com.google.android.youtube.player.YouTubeInitializationResult; importa com.google.android.youtube.player.YouTubePlayer; importa com.google.android.youtube.player.YouTubePlayerView; // Amplia YouTubeBaseActivity // classe pública MainActivity estén YouTubeBaseActivity {// No oblideu substituir-ho per la vostra pròpia clau d’API única // public static final String YOUR_API_KEY = "YOUR_API_KEY_HERE"; @Override protected void onCreate (Bundle savedInstanceState) {super.onCreate (savedInstanceState); setContentView (R.layout.activity_main); YouTubePlayerView youTubePlayerView = (YouTubePlayerView) findViewById (R.id.YouTubePlayer); // Inicialitzeu el reproductor de YouTube // youTubePlayerView.initialize (YOUR_API_KEY, nou YouTubePlayer.OnInitializedListener () {@Override // Si el reproductor de YouTube s'inicialitza amb èxit ... // public void onInitializationSuccess (YouTubePlayer.Provider provider, YouTubePlayer boolanean b) {//..then comença a reproduir el següent vídeo // youTubePlayer.loadVideo ("hJLBcViaX8Q");} @Override // Si la inicialització falla ... // public void onInitializationFailure (proveïdor YouTubePlayer.Provider, YouTubeInitializationResult youTubeInitializationResult) {//... expandir un toast // Toast.makeText (MainActivity.this, "S'ha produït un error", Toast.LENGTH_SHORT) .show ();}}); }}

Prova de l'API de Android Android Player

Podeu provar aquesta aplicació en un smartphone o tauleta Android físic o en un AVD. Si feu servir un AVD, assegureu-vos que utilitzeu una imatge del sistema que inclogui serveis de Google Play. L'aplicació de YouTube també s'ha d'instal·lar a l'AVD o dispositiu físic Android, ja que l'API de YouTube es basa en un servei que es distribueix com a part de l'aplicació YouTube per a Android.

Instal·leu el projecte al dispositiu i el vídeo de YouTube hauria de començar a reproduir-se automàticament tan aviat com es carrega l’aplicació. Si toqueu el vídeo, tindreu accés a tots els controls de YouTube familiars que podeu utilitzar per aturar, reproduir, avançar ràpidament i rebobinar el vídeo.

Mostra el contingut de Dailymotion en una WebView

Quan es tracta d’incrustar vídeos a l’aplicació per a Android, hi ha una àmplia gamma de plataformes per compartir vídeo que podeu triar, i algunes plataformes fins i tot han produït SDK dedicats a ajudar-vos a interactuar amb el seu contingut, inclòs Dailymotion.

El SDK de Dailymotion Player per a Android proporciona un embolcall prim al component WebView d'Android, que facilita la inserció de vídeos Dailymotion a les aplicacions.

En aquesta secció, us mostraré com transmetre qualsevol vídeo des del lloc web de Dailymotion mitjançant l’ús del SDK de tercer de Dailymotion Player.

Obteniu l'identificador de vídeo Dailymotion

Primerament, dirigiu-vos a Dailymotion, cerqueu un vídeo que vulgueu visualitzar i, a continuació, recupereu la seva identificació de vídeo.

Faré servir aquest vídeo de boira per a un lapse de temps, que té l’URL següent:

www.dailymotion.com/video/x71jlg3

L’ID del vídeo és l’única cadena de caràcters al final de la seva URL, de manera que el meu identificador de vídeo és: x71jlg3.

Afegir el SDK de Dailymotion

Com que utilitzem el SDK de Dailymotion, hem de declarar-lo com a dependència del projecte. Obriu el fitxer build.gradle del vostre projecte i afegiu-hi el següent:

dependencies {implement fileTree (dir: libs, include:) // Afegiu la següent // implementació com.dailymotion.dailymotion-sdk-android: sdk: implementació 0.1.29 com.android.support:appcompat-v7:28.0.0 implementació com.android.support:design:28.0.0 implementació com.android.support.constraint: restraint-layout: 1.1.3 testImplementation junit: junit: 4.12 androidTestImplementation com.android.support.test: runner: 1.0.2}

Quan se us demani, seleccioneu "Sincronitza el projecte amb fitxers de grada".

Tingueu en compte que, per defecte, el SDK de Dailymotion només us permet accedir a les dades públiques de Dailymotion, com ara el títol i la descripció d'un vídeo.Podeu realitzar algunes tasques addicionals registrant la vostra sol·licitud a la plataforma Dailymotion, però com que només volem incrustar un vídeo, no haurem de preocupar-nos de registrar la nostra sol·licitud.

Si us interessa afegir més funcions Dailymotion a les vostres aplicacions, podeu obtenir més informació sobre com registreu la vostra sol·licitud a Dailymotion, a través dels documents oficials.

Sol·licita accés a Internet

Una vegada més, actualitzem contingut de World Wide Web, de manera que el nostre projecte requereix el permís d’Internet:

Totes les activitats que mostren contingut Dailymotion han de tenir un atribut “android: configChanges”, de manera que afegiu el següent a MainActivity:

Afegir el giny de PlayerWebView Dailymotion

El component principal del SDK de Dailymotion és un element de la interfície gràfica de PlayerWebView, que proporciona un embolcall prim al component WebView d’Android.

Explorem WebViews amb més detall a la secció següent, però WebViews us proporciona, bàsicament, una manera d’incrustar pàgines web a l’aplicació. Si no utilitzem el reproductor especialitzat PlayerWebView del SDK, podríem utilitzar el component WebView vainillat d’Android per mostrar tota la pàgina web Dailymotion dins de la nostra aplicació.

En canvi, afegim un PlayerWebView al nostre disseny:

Configuració del nostre reproductor de DailymotionWebView

Ara hem implementat el widget PlayerWebView, hem de configurar el reproductor a la nostra classe d'activitats corresponent.

Obriu el vostre MainActivity i comenceu a obtenir una referència al PlayerWebView:

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

A continuació, truqueu a "dailyMotionPlayer.load" i feu-li passar la identificació de vídeo que vam recuperar anteriorment:

dailyMotionPlayer.load ("x71jlg3");

Això ens proporciona el següent:

importa android.support.v7.app.AppCompatActivity; importa android.os.Bundle; importa com.dailymotion.android.player.sdk.PlayerWebView; importar java.util.HashMap; importa java.util.Map; public class MainActivity estén AppCompatActivity {private PlayerWebView dailyMotionPlayer; @Override protected void onCreate (Bundle savedInstanceState) {super.onCreate (savedInstanceState); setContentView (R.layout.activity_main); // Recupereu el nostre PlayerWebView // dailyMotionPlayer = (PlayerWebView) findViewById (R.id.dailymotionPlayer); Mapa playerParams = HashMap nou <> (); // Carrega el vídeo amb els nostres paràmetres // playerParams.put ("clau", "valor"); // Passar l'identificador de vídeo // dailyMotionPlayer.load ("x71jlg3"); }}

Instal·leu el projecte en un dispositiu físic o emulador Android i el vídeo de Dailymotion hauria de començar a reproduir-se automàticament.

Incrustar un vídeo de Vimeo

Quan es tracta d’incrustar contingut de vídeo, normalment haureu d’utilitzar sempre que sigui possible una API específica de la plataforma o un SDK específic per a la plataforma. Però, i si no hi ha cap SDK o API disponible per a la plataforma de compartició de vídeo que tens en compte?

En aquests escenaris, podeu utilitzar el component WebView d'Android per visualitzar el vídeo com a pàgina web integrada en el disseny de la vostra activitat. En aquesta secció final, us mostraré com incorporar un vídeo a la popular plataforma Vimeo mitjançant WebView.

A més de mostrar contingut de vídeo, WebViews poden ser útils en diversos escenaris. Per exemple, imagineu-vos que teniu algun contingut que cal actualitzar regularment; Allotjar aquest contingut en línia i després mostrar-lo a la vostra aplicació mitjançant un WebView us proporciona la flexibilitat de canviar aquest contingut en línia en qualsevol moment sense necessitat de publicar una nova versió de la vostra aplicació. Tanmateix, només tingueu precaució quan utilitzeu WebViews, ja que no admeten moltes de les funcions que normalment espereu d’un navegador web autònom. En particular, a WebViews no hi ha una barra d’adreces ni controls de navegació, cosa que pot dificultar la interacció del seu contingut amb els usuaris.

Abans d’utilitzar un WebView, sempre heu de considerar si una solució alternativa pot ser més adequada, per exemple, podeu descarregar el contingut al navegador web predeterminat del dispositiu o implementar fitxes personalitzades de Chrome.

Actualització del manifest

Com que transmetem un vídeo des d’Internet, hem d’afegir el permís d’Internet al nostre Manifest:

També llançaré MainActivity en mode paisatge:

Afegir un WebView a la vostra interfície d'interès

A continuació, afegim un WebView a la nostra aplicació. Podem afegir WebView al disseny de la nostra activitat o convertir tota l'Activitat en un WebView mitjançant la implementació del mètode onCreate () de la nostra aplicació.

Afegiré un WebView al disseny de la nostra aplicació:

Tria el teu vídeo

Una vegada més, necessitem un vídeo per mostrar, però aquesta vegada ho estem no mitjançant un identificador de vídeo:

• Dirigiu-vos a Vimeo i trieu el vídeo que vulgueu fer servir; He optat per aquest lapse d’hivern.
• Feu un clic al botó "Compartir".
• Seleccioneu la icona "Incrustar"; això us proporcionarà un codi incrustat que hauria de tenir una aparença així:

Aquest codi proporciona la informació següent:

• iframe. Especifica que incrustem una altra pàgina HTML dins del context actual.
• src. La ruta del vídeo, de manera que la vostra aplicació sap on trobar aquest vídeo.
• amplada alçada. Les dimensions del vídeo.
• frameborder. Si voleu mostrar una vora al voltant del marc del vídeo. Els valors possibles són la vora (1) i la vora (0).
• allowfullscreen. D’aquesta manera, es pot visualitzar el vídeo en mode de pantalla completa.

Afegiré aquest codi incrustat al meu projecte com a cadena, per la qual cosa heu de copiar / enganxar aquesta informació a la plantilla següent:

Cadena vimeoVideo = "EL TEU ENLLAÇ VA AQUÍ';

Frustrativament, hem de fer uns quants canvis abans que el codi incrustat sigui compatible amb la nostra aplicació Android. Primer, hem d’afegir uns quants "" caràcters per tal que Android Studio no es queixi per un format incorrecte:

Cadena vimeoVideo = "';

Finalment, les dimensions de vídeo per defecte poden ser massa grans per a algunes pantalles d’smartphone d’Android.
En producció, normalment experimenteu amb diverses dimensions per veure quins són els millors resultats, a través de tantes configuracions de pantalla diferents. Tanmateix, per evitar que aquest article es descontroli, només utilitzaré el següent, que hauria de proporcionar bons resultats a la pantalla “típica” del telèfon intel·ligent Android:

Cadena vimeoVideo = "';

Es mostra una pàgina web a l'aplicació Android

Ara hem creat el nostre disseny i tenim el nostre HTML a punt per començar, obrim el vostre MainActivity i deixem implementar el nostre WebView.

Comença per afegir la cadena HTML:

Cadena vimeoVideo = "';

A continuació, hem de carregar la pàgina web anterior al WebView mitjançant el mètode loadUrl ():

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

De manera predeterminada, JavaScript està desactivat, per la qual cosa haurem d’habilitar-lo a la nostra WebView.

Cada vegada que es crea un WebView, se li assigna automàticament un conjunt de configuracions web predeterminades. Recuperarem aquest objecte WebSettings mitjançant el mètode getSettings () i, després, habilitarem JavaScript, mitjançant setJavaScriptEnabled ().

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

Després d’afegir tot això a MainActivity, el codi hauria d’assemblar a una cosa així:

importa android.support.v7.app.AppCompatActivity; importa android.os.Bundle; importa android.webkit.WebResourceRequest; importar android.webkit.WebSettings; importa android.webkit.WebView; importa android.webkit.WebViewClient; public class MainActivity estén AppCompatActivity {@Override protected void onCreate (Bundle savedInstanceState) {super.onCreate (savedInstanceState); setContentView (R.layout.activity_main); Cadena vimeoVideo = ""; WebView webView = (WebView) findViewById (R.id.myWebView); webView.setWebViewClient (nou WebViewClient () {@Override public boolean shouldOverrideUrlLoading (WebView webView, WebResourceRequest request) {webView.loadUrl ()); retornar veritable;}}); WebSettings webSettings = webView.getSettings (); webSettings.setJavaScriptEnabled (true); webView.loadData (vimeoVideo, "text / html", "utf-8");}}

Prova de l'aplicació Vimeo

Ja coneixeu el simulacre: instal·leu aquest projecte en un dispositiu físic Android o AVD. El WebView no està configurat per reproduir-se automàticament, per la qual cosa haureu de donar un toc al vídeo per revelar els controls de comunicació de Vimeo. A continuació, podeu reproduir el vídeo, fer una pausa, rebobinar i avançar ràpidament per assegurar-vos que funciona correctament.

Embalatge

En aquest article, us vaig mostrar com afegir vídeos de YouTube, Vimeo i Dailymotion a les vostres aplicacions, mitjançant API i SDKs específiques de la plataforma i el component WebView d'Android. També us vaig ensenyar com agrupar un fitxer de vídeo amb l'aplicació, de manera que es pot emmagatzemar i reproduir localment.

Quina és la vostra manera preferida de mostrar contingut multimèdia als usuaris? Feu-nos-ho saber als comentaris a continuació!