Contenuto

• Come incorporare video di YouTube nella tua app Android
• Recupero dell'ID di un video di YouTube
• Ottieni l'impronta digitale SHA-1 del tuo progetto
• Registrati con la console API di Google
• Scarica l'API di YouTube Android Player
• Aggiorna il tuo manifest
• Creazione del layout di YouTube Player
• Implementazione di YouTube Player
• 1. Estendi YouTubeBaseActivity
• 2. Inizializza YouTube Player
• 3. Implementare onInitializationSuccess e onInitializationFailure
• Riproduzione di un video di YouTube: codice completato
• Test dell'API di YouTube Android Player
• Visualizza i contenuti Dailymotion in un WebView
• Ottieni l'ID video Dailymotion
• Aggiunta di Dailymotion SDK
• Richiesta di accesso a Internet
• Aggiunta del widget PlayerWebView di Dailymotion
• Configurazione del nostro Dailymotion PlayerWebView
• Incorporamento di un video Vimeo
• Aggiornamento del manifest
• Aggiunta di una WebView alla nostra interfaccia utente
• Scegli il tuo video
• Visualizzazione di una pagina Web nella tua app Android
• Test dell'app Vimeo
• Avvolgendo

Una volta che MediaController è visibile sullo schermo, puoi riprodurre, mettere in pausa, riavvolgere e far avanzare rapidamente il video e saltare a qualsiasi punto della clip trascinando la barra di avanzamento di MediaController.

Come incorporare video di YouTube nella tua app Android

Incorporare un file video nella tua applicazione è un ottimo modo per garantire che il video sia sempre disponibile, indipendentemente dalla connessione Internet del dispositivo. Tuttavia, incorporare più video di grandi dimensioni e ad alta risoluzione nella tua app è anche un ottimo modo per aumentare le dimensioni del tuo APK!

Se sei preoccupato per le dimensioni dell'APK o se la tua applicazione include video che sono interessanti extra, allora potresti voler pubblicare quei video su una piattaforma online e poi trasmetterli in streaming attraverso la tua applicazione in fase di esecuzione.

Quando si tratta di pubblicare video online, c'è un sito web che mi viene subito in mente, quindi in questa sezione ti mostrerò come incorporare qualunque Video di YouTube nella tua app, utilizzando la libreria client API di YouTube Android Player.

Recupero dell'ID di un video di YouTube

Per iniziare, devi decidere quale video di YouTube vuoi visualizzare, quindi recuperare il suo ID video univoco.

Puoi utilizzare qualsiasi video di YouTube ma sto optando per "Tecnologia preferita del 2018". Carica il video che hai scelto e dai un'occhiata al suo URL nella barra degli indirizzi del browser, ad esempio l'URL del video è:

youtube.com/watch?v=hJLBcViaX8Q

L'ID è la parte dell'URL che identifica in modo univoco questo video, che è la stringa di caratteri alla fine dell'URL (in pratica, tutto ciò che segue il simbolo "="). L'ID video per il video è:

hJLBcViaX8Q

Prendi nota dell'ID del tuo video, poiché lo useremo in seguito.

Ottieni l'impronta digitale SHA-1 del tuo progetto

Per accedere all'API di YouTube Android Player, devi generare una chiave API con restrizioni Android. Ciò comporta il collegamento della chiave API al nome univoco del pacchetto del progetto e all'impronta digitale del certificato (SHA-1).

Puoi recuperare l'impronta digitale SHA-1 del tuo progetto, tramite la Gradle Console:

• Seleziona la scheda Gradle lungo il lato destro della finestra di Android Studio.
• Seleziona il modulo "app", seguito da "Attività> Android> firma".

• Apri la scheda Gradle Console che viene visualizzata nella parte inferiore destra dello schermo.
• Gradle Console si aprirà automaticamente. Trova il valore SHA-1 in questa finestra e prendine nota.

Stiamo utilizzando un'impronta digitale del certificato di debug, che è adatta solo per testare un'applicazione. Prima di pubblicare un'app, devi sempre generare una nuova chiave API in base al certificato di rilascio dell'applicazione.

Registrati con la console API di Google

Prima di poter utilizzare l'API Player Android di YouTube, è necessario registrare l'applicazione nella Console API di Google:

• Vai alla Console API.
  Nell'intestazione, seleziona il nome del tuo progetto corrente (in cui il cursore è posizionato nella seguente schermata).

• Nella finestra successiva, seleziona "Nuovo progetto".
• Assegna un nome al tuo progetto, quindi fai clic su "Crea".
• Nel menu a sinistra, seleziona "Credenziali".
• Fai un clic sul pulsante blu "Crea credenziali", quindi seleziona "Chiave API".
• La chiave API verrà ora visualizzata in un popup, che include un prompt per limitare questa chiave API. Le chiavi con restrizioni sono più sicure, quindi a meno che non sia necessaria una chiave API senza restrizioni, scegliere "Limita chiave".
• Nella schermata successiva, dai alla tua chiave API un nome distintivo.
• Seleziona il pulsante di opzione "App Android".
• Fai clic su "Aggiungi nome pacchetto e impronta digitale".
• Copia / incolla l'impronta digitale SHA-1 del tuo progetto nella sezione successiva, quindi inserisci il nome del pacchetto del tuo progetto (che appare nella parte superiore di ogni file di classe Java e nel Manifesto del tuo progetto).
• Quando sei soddisfatto delle informazioni che hai inserito, fai clic su "Salva".

Scarica l'API di YouTube Android Player

Successivamente, dovrai scaricare la libreria client dell'API Player Android di YouTube. Quando si utilizza questa libreria, si consiglia di abilitare ProGuard per mantenere l'APK il più leggero possibile.

Per aggiungere la libreria YouTube al tuo progetto:

• Vai al sito Web YouTube Android Player e scarica l'ultima versione.
• Decomprimi il file zip successivo.
• Apri la cartella appena decompressa e vai alla sua sottocartella "libs" - dovrebbe contenere un file "YouTubeAndroidPlayerApi.jar".
• In Android Studio, passa alla vista "Progetto".
• Per assicurarti che la libreria di YouTube sia inclusa nel tuo percorso di compilazione, dovrai importare il file .jar nel "/ libs ". Apri la cartella "app / libs" del tuo progetto, quindi trascina e rilascia il file .jar in posizione.

• Apri il tuo file build.gradle e aggiungi la libreria YouTube come dipendenza del progetto:

dipendenze {implementazione fileTree (dir: libs, include:) implementazione com.android.support:appcompat-v7:28.0.0 implementazione com.android.support:design:28.0.0 implementazione com.android.support.constraint: layout di vincolo : 1.1.3 testImplementation junit: junit: 4.12 androidTestImplementation com.android.support.test: runner: 1.0.2 // Aggiungi i seguenti // file di implementazione (libs / YouTubeAndroidPlayerApi.jar)}

• Quando richiesto, sincronizza i file Gradle.

Aggiorna il tuo manifest

Se l'applicazione verrà visualizzata qualunque contenuti video online, quindi dovrà accedere a Internet.

Apri il manifest del tuo progetto e aggiungi l'autorizzazione Internet:

Per dare all'utente un assaggio di quell'esperienza cinematografica e widescreen, sto anche impostando MainActivity per l'avvio in modalità orizzontale:

Creazione del layout di YouTube Player

Puoi visualizzare un video di YouTube utilizzando:

• YouTubePlayerView. Se desideri utilizzare YouTubePlayerView nel tuo layout, dovrai estendere YouTubeBaseActivity nella corrispondente classe di attività di quel layout.
• YouTubePlayerFragment. Questo è un frammento che contiene YouTubePlayerView. Se scegli di implementare YouTubePlayerFragment, allora tu non lo farà deve estendersi da YouTubeBaseActivity.

Userò YouTubePlayerView, quindi apri il file "activity_main.xml" del tuo progetto e aggiungerò un widget YouTubePlayerView:

Implementazione di YouTube Player

Quindi, apri MainActivity e completa le seguenti attività:

1. Estendi YouTubeBaseActivity

Dato che stiamo usando YouTubePlayerView nel nostro layout, dobbiamo estendere YouTubeBaseActivity:

MainActivity di classe pubblica estende YouTubeBaseActivity {

2. Inizializza YouTube Player

Inizializziamo YouTube Player chiamando initialize () e passando la chiave API creata in precedenza:

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

3. Implementare onInitializationSuccess e onInitializationFailure

Infine, dobbiamo specificare come deve reagire la nostra applicazione, a seconda che l'inizializzazione abbia esito positivo o negativo. Se YouTube Player viene inizializzato correttamente, possiamo caricare il nostro video, passando l'ID video univoco:

public void onInitializationSuccess (provider YouTubePlayer.Provider, YouTubePlayer youTubePlayer, booleano b) {// Specifica l'ID video // youTubePlayer.loadVideo ("hJLBcViaX8Q");

Successivamente, dobbiamo dire alla nostra applicazione come dovrebbe gestire le inizializzazioni non riuscite. Visualizzerò un brindisi:

public void onInitializationFailure (provider YouTubePlayer.Provider, YouTubeInitializationResult youTubeInitializationResult) {Toast.makeText (MainActivity.this, "Si è verificato un errore", Toast.LENGTH_SHORT) .show (); }

Riproduzione di un video di YouTube: codice completato

Aggiungi tutto quanto sopra al tuo MainActivity e dovresti finire con qualcosa del genere:

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; // Estendi YouTubeBaseActivity // MainActivity di classe pubblica estende YouTubeBaseActivity {// Non dimenticare di sostituirlo con la tua chiave API unica // String statica finale pubblica YOUR_API_KEY = "YOUR_API_KEY_HERE"; @Override protetto void onCreate (Bundle savedInstanceState) {super.onCreate (savedInstanceState); setContentView (R.layout.activity_main); YouTubePlayerView youTubePlayerView = (YouTubePlayerView) findViewById (R.id.YouTubePlayer); // Inizializza il player di YouTube // youTubePlayerView.initialize (YOUR_API_KEY, nuovo YouTubePlayer.OnInitializedListener () {@Override // Se il player di YouTube viene inizializzato correttamente ... // public void onInitializationSuccess (YouTubePlayer.Provider provider, YouTubePlayer youTubePlayer, boolean b) {//..quindi inizia a riprodurre il seguente video // youTubePlayer.loadVideo ("hJLBcViaX8Q");} @Override // Se l'inizializzazione fallisce ... // void pubblico onInitializationFailure (YouTubePlayer.Provider provider, YouTubeInitializationResult youTubeInitializationResult) {//... quindi visualizzare un brindisi // Toast.makeText (MainActivity.this, "Si è verificato un errore", Toast.LENGTH_SHORT) .show ();}}); }}

Test dell'API di YouTube Android Player

Puoi testare questa applicazione su uno smartphone o tablet Android fisico o su un AVD. Se stai utilizzando un AVD, assicurati di utilizzare un'immagine di sistema che includa i servizi di Google Play. L'app YouTube deve inoltre essere installata sull'AVD o sul dispositivo Android fisico, poiché l'API YouTube si basa su un servizio distribuito come parte dell'app YouTube per Android.

Installa il progetto sul tuo dispositivo e la riproduzione del video di YouTube dovrebbe iniziare automaticamente non appena l'applicazione viene caricata. Se tocchi il video, avrai accesso a tutti i controlli YouTube familiari che puoi utilizzare per mettere in pausa, riprodurre, avanzare rapidamente e riavvolgere il video.

Visualizza i contenuti Dailymotion in un WebView

Quando si tratta di incorporare video nella tua app Android, c'è una vasta gamma di piattaforme di condivisione video tra cui puoi scegliere e alcune piattaforme hanno persino prodotto SDK dedicati ad aiutarti a interagire con i loro contenuti, incluso Dailymotion.

L'SDK di Dailymotion Player per Android fornisce un involucro sottile attorno al componente WebView di Android, che semplifica l'integrazione dei video Dailymotion nelle applicazioni.

In questa sezione, ti mostrerò come trasmettere in streaming qualsiasi video dal sito Web Dailymotion, utilizzando l'SDK Dailymotion Player di terze parti.

Ottieni l'ID video Dailymotion

Per prima cosa, vai su Dailymotion, trova un video che desideri visualizzare, quindi recupera il suo ID video.

Userò questo video time-lapse di fog, che ha il seguente URL:

www.dailymotion.com/video/x71jlg3

L'ID del video è la stringa univoca di caratteri alla fine del suo URL, quindi il mio ID video è: x71jlg3.

Aggiunta di Dailymotion SDK

Dal momento che stiamo usando Dailymotion SDK, dobbiamo dichiararlo come dipendenza del progetto. Apri il file build.gradle del tuo progetto e aggiungi quanto segue:

dipendenze {implementazione fileTree (dir: libs, include:) // Aggiungi il seguente // implementazione com.dailymotion.dailymotion-sdk-android: sdk: 0.1.29 implementazione com.android.support:appcompat-v7:28.0.0 implementazione com.android.support:design:28.0.0 implementazione com.android.support.constraint: layout di vincolo: 1.1.3 testImplementation junit: junit: 4.12 androidTestImplementation com.android.support.test: runner: 1.0.2}

Quando richiesto, selezionare "Sincronizza progetto con file pendenza".

Tieni presente che, per impostazione predefinita, Dailymotion SDK ti dà accesso solo ai dati pubblici di Dailymotion, come il titolo e la descrizione di un video.Puoi eseguire alcune attività aggiuntive registrando la tua applicazione con la piattaforma Dailymotion, ma poiché vogliamo solo incorporare un video, non dobbiamo preoccuparci di registrare la nostra applicazione.

Se sei interessato ad aggiungere più funzionalità Dailymotion alle tue app, puoi saperne di più sulla registrazione della tua applicazione con Dailymotion, dai documenti ufficiali.

Richiesta di accesso a Internet

Ancora una volta, stiamo trasmettendo contenuti in streaming dal World Wide Web, quindi il nostro progetto richiede l'autorizzazione di Internet:

Ogni attività che mostra i contenuti di Dailymotion deve avere un attributo "android: configChanges", quindi aggiungi quanto segue a MainActivity:

Aggiunta del widget PlayerWebView di Dailymotion

Il componente principale di Dailymotion SDK è un elemento dell'interfaccia utente PlayerWebView, che fornisce un sottile involucro attorno al componente WebView di Android.

Esploreremo le visualizzazioni Web in modo più dettagliato nella sezione seguente, ma le visualizzazioni Web offrono essenzialmente un modo per incorporare pagine Web nella tua applicazione. Se non stessimo utilizzando PlayerWebView specializzato dell'SDK, potremmo utilizzare il componente WebView vaniglia di Android per visualizzare un'intera pagina Web Dailymotion all'interno della nostra applicazione.

Invece, aggiungiamo un PlayerWebView al nostro layout:

Configurazione del nostro Dailymotion PlayerWebView

Ora abbiamo implementato il widget PlayerWebView, dobbiamo configurare il lettore nella nostra corrispondente classe di attività.

Apri MainActivity e inizia ottenendo un riferimento a PlayerWebView:

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

Quindi, chiama "dailyMotionPlayer.load" e passagli l'ID video che abbiamo recuperato in precedenza:

dailyMotionPlayer.load ( "x71jlg3");

Questo ci dà quanto segue:

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; classe pubblica MainActivity estende AppCompatActivity {private PlayerWebView dailyMotionPlayer; @Override protetto void onCreate (Bundle savedInstanceState) {super.onCreate (savedInstanceState); setContentView (R.layout.activity_main); // Recupera il nostro PlayerWebView // dailyMotionPlayer = (PlayerWebView) findViewById (R.id.dailymotionPlayer); Carta geografica playerParams = new HashMap <> (); // Carica il video con i nostri parametri // playerParams.put ("chiave", "valore"); // Passa l'ID video // dailyMotionPlayer.load ("x71jlg3"); }}

Installa il tuo progetto su un dispositivo o emulatore Android fisico e la riproduzione del tuo video Dailymotion dovrebbe iniziare automaticamente.

Incorporamento di un video Vimeo

Quando si tratta di incorporare contenuti video, in genere si desidera utilizzare un'API specifica per la piattaforma o un SDK specifico per la piattaforma ove possibile. Ma cosa succede se non è disponibile un SDK o un'API per la piattaforma di condivisione video che hai in mente?

In questi scenari, puoi utilizzare il componente WebView di Android per visualizzare il video come una pagina web incorporata nel layout della tua attività. In questa sezione finale, ti mostrerò come incorporare un video dalla popolare piattaforma Vimeo, utilizzando un WebView.

Oltre a visualizzare contenuti video, WebViews può essere utile in numerosi altri scenari. Ad esempio, immagina di avere alcuni contenuti che devono essere aggiornati regolarmente; l'hosting di tali contenuti online e la loro visualizzazione nell'applicazione tramite WebView ti dà la flessibilità di modificare tali contenuti online in qualsiasi momento, senza dover pubblicare una nuova versione della tua app. Tuttavia, sii prudente quando usi le WebView poiché non supportano molte delle funzionalità che ti aspetteresti in genere da un browser Web autonomo. In particolare, WebView non dispone di una barra degli indirizzi o di controlli di navigazione, il che può rendere difficile l'interazione del contenuto da parte degli utenti.

Prima di utilizzare un WebView, dovresti sempre considerare se una soluzione alternativa potrebbe essere più appropriata, ad esempio potresti scaricare il contenuto sul browser Web predefinito del dispositivo o implementare le schede personalizzate di Chrome.

Aggiornamento del manifest

Dato che stiamo trasmettendo un video in streaming da Internet, dobbiamo aggiungere l'autorizzazione Internet al nostro manifest:

Ho anche intenzione di avviare MainActivity in modalità orizzontale:

Aggiunta di una WebView alla nostra interfaccia utente

Quindi, aggiungiamo un WebView alla nostra app. Possiamo aggiungere il WebView al layout della nostra attività o trasformare l'intera attività in un WebView, implementandolo nel metodo onCreate () della nostra applicazione.

Ho intenzione di aggiungere un WebView al layout della nostra applicazione:

Scegli il tuo video

Ancora una volta, abbiamo bisogno di un video da visualizzare, ma questa volta lo siamo non utilizzando un ID video:

• Vai su Vimeo e scegli un video che desideri utilizzare; Ho optato per questo lasso di tempo invernale.
• Fai un clic sul pulsante "Condividi".
• Seleziona l'icona "Incorpora"; questo ti fornirà un codice di incorporamento che dovrebbe assomigliare a questo:

Questo codice fornisce le seguenti informazioni:

• iframe. Specifica che stiamo incorporando un'altra pagina HTML nel contesto corrente.
• src. Il percorso del video, quindi la tua app sa dove trovare questo video.
• larghezza altezza. Le dimensioni del video.
• frameborder. Indica se visualizzare un bordo attorno alla cornice del video. I valori possibili sono border (1) e no border (0).
• allowfullscreen. Ciò consente di visualizzare il video in modalità a schermo intero.

Ho intenzione di aggiungere questo codice di incorporamento al mio progetto come una stringa, quindi è necessario copiare / incollare queste informazioni nel seguente modello:

String vimeoVideo = "IL TUO LINK VA QUI';

Frustrantemente, dobbiamo apportare alcune modifiche prima che il codice di incorporamento sia compatibile con la nostra app Android. Innanzitutto, dobbiamo aggiungere alcuni caratteri "", in modo che Android Studio non si lamenti di una formattazione errata:

String vimeoVideo = "';

Infine, le dimensioni video predefinite potrebbero essere troppo grandi per alcuni schermi di smartphone Android.
In produzione, in genere si sperimentano varie dimensioni per vedere cosa offre i risultati migliori, attraverso il maggior numero possibile di diverse configurazioni dello schermo. Tuttavia, per evitare che l'articolo sfugga al controllo, userò solo quanto segue, che dovrebbe fornire buoni risultati sul tuo "tipico" schermo dello smartphone Android:

String vimeoVideo = "';

Visualizzazione di una pagina Web nella tua app Android

Ora abbiamo creato il nostro layout e il nostro HTML è pronto, apriamo MainActivity e consentiamo di implementare il nostro WebView.

Inizia aggiungendo la stringa HTML:

String vimeoVideo = "';

Successivamente, dobbiamo caricare la pagina Web sopra nella nostra WebView, usando il metodo loadUrl ():

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

JavaScript è disabilitato per impostazione predefinita, quindi dovremo abilitarlo nel nostro WebView.

Ogni volta che crei un WebView, viene automaticamente assegnato un set di Impostazioni Web predefinite. Recupereremo questo oggetto WebSettings, utilizzando il metodo getSettings (), quindi abiliteremo JavaScript, usando setJavaScriptEnabled ().

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

Dopo aver aggiunto tutto questo a MainActivity, il tuo codice dovrebbe assomigliare a questo:

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; classe pubblica MainActivity estende AppCompatActivity {@Override protetto void 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.loadUrl (request.getU) ()); return true;}}); WebSettings webSettings = webView.getSettings (); webSettings.setJavaScriptEnabled (true); webView.loadData (vimeoVideo, "text / html", "utf-8");}}

Test dell'app Vimeo

Ormai conosci l'esercitazione: installa questo progetto su un dispositivo Android fisico o AVD. WebView non è impostato per essere riprodotto automaticamente, quindi dovrai dare un tocco al video per rivelare i controlli multimediali di Vimeo. Puoi quindi riprodurre, mettere in pausa, riavvolgere e far avanzare rapidamente il video, per assicurarti che funzioni correttamente.

Avvolgendo

In questo articolo, ti ho mostrato come aggiungere video YouTube, Vimeo e Dailymotion alle tue app, utilizzando API e SDK specifici della piattaforma e il componente WebView di Android. Ti ho anche mostrato come raggruppare un file video con la tua applicazione, in modo che possa essere archiviato e riprodotto localmente.

Qual è il tuo modo preferito di mostrare contenuti multimediali ai tuoi utenti? Fateci sapere nei commenti qui sotto!