Contenu

• Comment intégrer des vidéos YouTube dans votre application Android
• Récupérer l’ID d’une vidéo YouTube
• Obtenez l’empreinte SHA-1 de votre projet
• Inscrivez-vous à la console Google API
• Téléchargez l'API du lecteur Android de YouTube
• Mettre à jour votre manifeste
• Construire la disposition du lecteur YouTube
• Implémentation du lecteur YouTube
• 1. Étendre YouTubeBaseActivity
• 2. Initialiser le lecteur YouTube
• 3. Implémentez onInitializationSuccess et onInitializationFailure
• Lecture d'une vidéo sur YouTube: code terminé
• Test de l'API du lecteur Android YouTube
• Afficher le contenu de Dailymotion dans une WebView
• Obtenir l'identifiant vidéo Dailymotion
• Ajout du SDK Dailymotion
• Demander un accès Internet
• Ajout du widget PlayerWebView de Dailymotion
• Configuration de notre Dailymotion PlayerWebView
• Intégration d'une vidéo Vimeo
• Mise à jour du manifeste
• Ajout d'une WebView à notre interface utilisateur
• Choisissez votre vidéo
• Affichage d'une page Web dans votre application Android
• Tester votre application Vimeo
• Emballer

Une fois que MediaController est visible à l’écran, vous pouvez lire, suspendre, rembobiner et avancer rapidement la vidéo, et passer à n’importe quel point du clip en faisant glisser la barre de progression de MediaController.

Comment intégrer des vidéos YouTube dans votre application Android

L’incorporation d’un fichier vidéo dans votre application est un excellent moyen de garantir que la vidéo est toujours disponible, quelle que soit la connexion Internet du périphérique. Toutefois, l'intégration de plusieurs vidéos de grande taille et haute résolution dans votre application constitue également un excellent moyen d'augmenter la taille de votre APK!

Si la taille de l'APK vous préoccupe ou si votre application contient des vidéos très utiles, vous pouvez les publier sur une plate-forme en ligne, puis les diffuser via votre application au moment de l'exécution.

Quand il s’agit de publier des vidéos en ligne, un site Web vient immédiatement à l’esprit. Dans cette section, je vais vous montrer comment intégrer tout Vidéo YouTube dans votre application, à l'aide de la bibliothèque cliente de l'API du lecteur Android de YouTube.

Récupérer l’ID d’une vidéo YouTube

Pour commencer, vous devez choisir la vidéo YouTube à afficher, puis récupérer son identifiant vidéo unique.

Vous pouvez utiliser n’importe quelle vidéo YouTube, mais j’adopte l'option «Le technicien préféré de 2018.» Chargez la vidéo de votre choix et regardez son URL dans la barre d'adresse de votre navigateur. Par exemple, l'URL de la vidéo est la suivante:

youtube.com/watch?v=hJLBcViaX8Q

L'ID est la partie de l'URL qui identifie de manière unique cette vidéo, qui correspond à la chaîne de caractères située à la fin de l'URL (en général, tout ce qui suit le symbole "="). L'identifiant vidéo de la vidéo est:

hJLBcViaX8Q

Notez l’identifiant de votre vidéo, car nous l’utiliserons plus tard.

Obtenez l’empreinte SHA-1 de votre projet

Pour accéder à l’API du lecteur Android de YouTube, vous devez générer une clé d’API avec des restrictions Android. Cela implique de lier la clé API au nom de package unique et à l’empreinte digitale du certificat de votre projet (SHA-1).

Vous pouvez récupérer l’empreinte SHA-1 de votre projet via la console Gradle:

• Sélectionnez l'onglet Gradle dans la partie droite de la fenêtre d'Android Studio.
• Sélectionnez le module «app», suivi de «Tâches> Android> Signature du rapport».

• Ouvrez l'onglet Gradle Console qui apparaît vers le bas à droite de l'écran.
• La console Gradle s'ouvrira automatiquement. Recherchez la valeur SHA-1 dans cette fenêtre et notez-la.

Nous utilisons une empreinte de certificat de débogage, qui ne convient que pour tester une application. Avant de publier une application, vous devez toujours générer une nouvelle clé d’API basée sur le certificat de version de cette application.

Inscrivez-vous à la console Google API

Avant de pouvoir utiliser l'API du lecteur Android YouTube, vous devez enregistrer votre application dans la console Google API:

• Rendez-vous sur la console API.
  Dans l'en-tête, sélectionnez le nom de votre projet actuel (le curseur est placé dans la capture d'écran suivante).

• Dans la fenêtre suivante, sélectionnez «Nouveau projet».
• Donnez un nom à votre projet, puis cliquez sur «Créer».
• Dans le menu de gauche, sélectionnez «Références».
• Cliquez sur le bouton bleu «Créer les identifiants», puis sélectionnez «Clé API».
• Votre clé API apparaîtra maintenant dans une fenêtre contextuelle, qui comprend une invite à restreindre cette clé API. Les clés restreintes sont plus sécurisées. Par conséquent, à moins que vous ne demandiez spécifiquement une clé d'API non restreinte, choisissez «Restreindre la clé».
• Sur l'écran suivant, attribuez un nom distinct à votre clé d'API.
• Sélectionnez le bouton radio «Applications Android».
• Cliquez sur "Ajouter le nom du package et l'empreinte digitale."
• Copiez / collez l’empreinte SHA-1 de votre projet dans la section suivante, puis entrez le nom du package de votre projet (qui figure en haut de chaque fichier de classe Java et dans le manifeste de votre projet).
• Lorsque vous êtes satisfait des informations que vous avez entrées, cliquez sur "Enregistrer".

Téléchargez l'API du lecteur Android de YouTube

Ensuite, vous devrez télécharger la bibliothèque cliente de l'API du lecteur Android YouTube. Lors de l’utilisation de cette bibliothèque, il est recommandé d’activer ProGuard afin de garder votre APK aussi léger que possible.

Pour ajouter la bibliothèque YouTube à votre projet:

• Rendez-vous sur le site Web YouTube Android Player et téléchargez la dernière version.
• Décompressez le fichier zip suivant.
• Ouvrez le dossier qui vient d'être décompressé et naviguez jusqu'à son sous-dossier «libs» - il devrait contenir un fichier «YouTubeAndroidPlayerApi.jar».
• Dans Android Studio, basculez vers la vue «Projet».
• Pour vous assurer que la bibliothèque YouTube est incluse dans votre chemin de génération, vous devez importer le fichier .jar dans le répertoire “./ libs ”. Ouvrez le dossier "app / libs" de votre projet, puis faites glisser le fichier .jar et déposez-le en position.

• Ouvrez votre fichier build.gradle et ajoutez la bibliothèque YouTube en tant que dépendance du projet:

dépendances {implementation fileTree (dir: libs, include:) implémentation com.android.support:appcompat-v7:28.0.0 implémentation com.android.support:design:28.0.0 implémentation com.android.support.constraint: contrainte-layout : 1.1.3 testImplementation junit: junit: 4.12 androidTestImplementation com.android.support.test: runner: 1.0.2 // Ajouter les // fichiers d'implémentation suivants (libs / YouTubeAndroidPlayerApi.jar)}

• Lorsque vous y êtes invité, synchronisez vos fichiers Gradle.

Mettre à jour votre manifeste

Si votre application va afficher tout contenu vidéo en ligne, il devra alors avoir accès à Internet.

Ouvrez le manifeste de votre projet et ajoutez la permission Internet:

Pour donner à l’utilisateur un avant-goût de cette expérience cinématographique sur écran large, je configure également MainActivity pour qu’elle soit lancée en mode paysage:

Construire la disposition du lecteur YouTube

Vous pouvez afficher une vidéo YouTube en utilisant:

• YouTubePlayerView. Si vous souhaitez utiliser YouTubePlayerView dans votre modèle, vous devez étendre YouTubeBaseActivity à la classe d'activité correspondante.
• YouTubePlayerFragment. Ceci est un fragment qui contient un YouTubePlayerView. Si vous choisissez d'implémenter un YouTubePlayerFragment, alors vous habitude doivent s’étendre de YouTubeBaseActivity.

J'utiliserai YouTubePlayerView. Ouvrez le fichier «activity_main.xml» de votre projet et ajoutez un widget YouTubePlayerView:

Implémentation du lecteur YouTube

Ensuite, ouvrez votre MainActivity et effectuez les tâches suivantes:

1. Étendre YouTubeBaseActivity

Comme nous utilisons un YouTubePlayerView dans notre présentation, nous devons étendre YouTubeBaseActivity:

Classe publique MainActivity étend YouTubeBaseActivity {

2. Initialiser le lecteur YouTube

Nous initialisons le lecteur YouTube en appelant initialize () et en transmettant la clé d'API créée précédemment:

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

3. Implémentez onInitializationSuccess et onInitializationFailure

Enfin, nous devons spécifier la réaction de notre application, selon que l’initialisation est un succès ou un échec. Si le lecteur YouTube est correctement initialisé, nous pouvons charger notre vidéo en transmettant l’ID vidéo unique:

public void onInitializationSuccess (fournisseur YouTubePlayer.Provider, YouTubePlayer youTubePlayer, boolean b) {// Spécifiez l'ID de la vidéo // youTubePlayer.loadVideo ("hJLBcViaX8Q");

Ensuite, nous devons indiquer à notre application comment elle doit gérer les initialisations ayant échoué. Je vais afficher un toast:

public void onInitializationFailure (fournisseur YouTubePlayer.Provider, YouTubeInitializationResult youTubeInitializationResult) {Toast.makeText (MainActivity.this, "Une erreur est survenue, Toast.LENGTH_SHORT) .show (); }

Lecture d'une vidéo sur YouTube: code terminé

Ajoutez tout ce qui précède à votre activité principale et vous devriez obtenir quelque chose comme ceci:

importer android.os.Bundle; importer android.widget.Toast; importer com.google.android.youtube.player.YouTubeBaseActivity; importer com.google.android.youtube.player.YouTubeInitializationResult; importer com.google.android.youtube.player.YouTubePlayer; importer com.google.android.youtube.player.YouTubePlayerView; // Extension de YouTubeBaseActivity // Classe publique MainActivity étend YouTubeBaseActivity {// N'oubliez pas de la remplacer par votre propre clé API unique // 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); // Initialisation du lecteur YouTube // youTubePlayerView.initialize (YOUR_API_KEY, nouveau YouTubePlayer.OnInitializedListener () {@Override // Si le lecteur YouTube est initialisé avec succès ... // annulation publique onInitializationSuccess (fournisseur YouTubePlayer.Provider, YouTubePlayer youPlayer, boolean b) {//..alors lancez la lecture de la vidéo suivante // youTubePlayer.loadVideo ("hJLBcViaX8Q");} @Override // Si l'échec de l'initialisation ... // annule public onInitializationFailure (fournisseur YouTubePlayer.Provider, YouTubeInitializationResult you, InitInitializationResult) {//... affiche ensuite un toast // Toast.makeText (MainActivity.this, "Une erreur est survenue", Toast.LENGTH_SHORT) .show ();}}); }}

Test de l'API du lecteur Android YouTube

Vous pouvez tester cette application sur un smartphone ou une tablette Android physique ou sur un AVD. Si vous utilisez un AVD, assurez-vous d’utiliser une image système incluant les services Google Play. L’application YouTube doit également être installée sur l’AVD ou sur un appareil Android physique, car l’API de YouTube repose sur un service distribué dans le cadre de l’application YouTube pour Android.

Installez le projet sur votre appareil. La lecture de la vidéo YouTube devrait commencer automatiquement dès le chargement de l'application. Si vous appuyez sur la vidéo, vous aurez accès à toutes les commandes YouTube habituelles que vous pouvez utiliser pour mettre en pause, lire, avancer rapidement et revenir en arrière.

Afficher le contenu de Dailymotion dans une WebView

Pour intégrer des vidéos dans votre application Android, vous avez le choix parmi une large gamme de plates-formes de partage de vidéos. Certaines ont même produit des kits de développement (SDK) conçus pour vous aider à interagir avec leur contenu, y compris Dailymotion.

Le kit de développement logiciel Dailymotion Player pour Android fournit une enveloppe fine autour du composant WebView d’Android, ce qui facilite l’incorporation de vidéos Dailymotion dans vos applications.

Dans cette section, je vais vous montrer comment diffuser une vidéo du site Web de Dailymotion à l’aide du kit de développement logiciel tiers de Dailymotion.

Obtenir l'identifiant vidéo Dailymotion

Tout d’abord, rendez-vous sur Dailymotion, recherchez une vidéo que vous souhaitez afficher, puis récupérez son ID vidéo.

J'utiliserai cette vidéo de brouillard avec le temps suivant:

www.dailymotion.com/video/x71jlg3

L’ID de la vidéo est la chaîne de caractères unique située à la fin de son URL; mon ID de vidéo est donc: x71jlg3.

Ajout du SDK Dailymotion

Puisque nous utilisons le SDK Dailymotion, nous devons le déclarer en tant que dépendance du projet. Ouvrez le fichier build.gradle de votre projet et ajoutez les éléments suivants:

dependencies {implementation fileTree (dir: libs, include:) // Ajoutez ce qui suit // implémentation com.dailymotion.dailymotion-sdk-android: sdk: 0.1.29 implémentation com.android.support:appcompat-v7:28.0.0 implementation com.android.support:design:28.0.0 implémentation com.android.support.constraint: constraint-layout: 1.1.3 testImplementation junit: junit: 4.12 androidTestImplementation com.android.support.test: runner: 1.0.2}

Lorsque vous y êtes invité, sélectionnez «Synchroniser le projet avec des fichiers Gradle».

Notez que par défaut, le SDK Dailymotion ne vous donne accès qu’aux données publiques de Dailymotion, telles que le titre et la description d’une vidéo.Vous pouvez effectuer des tâches supplémentaires en enregistrant votre application sur la plate-forme Dailymotion, mais comme nous souhaitons simplement intégrer une vidéo, nous n’avons pas besoin de nous inquiéter de l’enregistrement de notre application.

Si vous souhaitez ajouter davantage de fonctionnalités Dailymotion à vos applications, vous pouvez en apprendre davantage sur l’enregistrement de votre application auprès de Dailymotion, dans la documentation officielle.

Demander un accès Internet

Une fois encore, nous diffusons du contenu à partir du World Wide Web. Par conséquent, notre projet nécessite l’autorisation Internet:

Chaque activité qui affiche du contenu Dailymotion doit avoir un attribut «android: configChanges», ajoutez donc ce qui suit à votre MainActivity:

Ajout du widget PlayerWebView de Dailymotion

Le composant principal du kit de développement logiciel Dailymotion SDK est un élément de l’interface utilisateur PlayerWebView, qui fournit une enveloppe mince autour du composant WebView d’Android.

Nous allons explorer WebViews de manière plus détaillée dans la section suivante, mais WebViews vous permet essentiellement d’incorporer des pages Web dans votre application. Si nous n’utilisions pas PlayerWebView, le logiciel spécialisé du SDK, nous pourrions utiliser le composant WebView vanilla d’Android pour afficher une page Web entière de Dailymotion dans notre application.

Au lieu de cela, ajoutons un PlayerWebView à notre présentation:

Configuration de notre Dailymotion PlayerWebView

Maintenant que nous avons implémenté le widget PlayerWebView, nous devons configurer le lecteur dans notre classe d’activité correspondante.

Ouvrez votre MainActivity et commencez par obtenir une référence à PlayerWebView:

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

Ensuite, appelez «dailyMotionPlayer.load» et transmettez-lui l'ID vidéo que nous avons précédemment récupéré:

dailyMotionPlayer.load ("x71jlg3");

Cela nous donne les éléments suivants:

importer android.support.v7.app.AppCompatActivity; importer android.os.Bundle; importer com.dailymotion.android.player.sdk.PlayerWebView; importer java.util.HashMap; importer java.util.Map; Classe publique MainActivity étend AppCompatActivity {private PlayerWebView dailyMotionPlayer; @Override protected void onCreate (Bundle savedInstanceState) {super.onCreate (savedInstanceState); setContentView (R.layout.activity_main); // Récupérer notre PlayerWebView // dailyMotionPlayer = (PlayerWebView) findViewById (R.id.dailymotionPlayer); Carte playerParams = new HashMap <> (); // Charge la vidéo avec nos paramètres // playerParams.put ("key", "value"); // passe l'ID de la vidéo // dailyMotionPlayer.load ("x71jlg3"); }}

Installez votre projet sur un périphérique ou un émulateur Android physique. La lecture de votre vidéo Dailymotion devrait commencer automatiquement.

Intégration d'une vidéo Vimeo

Lorsque vous intégrez du contenu vidéo, vous souhaiterez généralement utiliser une API ou un kit de développement logiciel (SDK) spécifique à la plate-forme, dans la mesure du possible. Mais que se passe-t-il s’il n’ya pas de SDK ou d’API disponible pour la plate-forme de partage de vidéos que vous envisagez?

Dans ces scénarios, vous pouvez utiliser le composant WebView d’Android pour afficher la vidéo sous forme de page Web intégrée à la présentation de votre activité. Dans cette dernière section, je vais vous montrer comment incorporer une vidéo de la plate-forme Vimeo, à l’aide d’une WebView.

En plus d'afficher du contenu vidéo, WebViews peut être utile dans un certain nombre d'autres scénarios. Par exemple, imaginez que certains contenus doivent être mis à jour régulièrement. héberger ce contenu en ligne, puis l'afficher dans votre application via WebView vous donne la possibilité de modifier ce contenu en ligne à tout moment, sans avoir à publier une nouvelle version de votre application. Cependant, soyez prudent lorsque vous utilisez WebViews, car ils ne prennent pas en charge de nombreuses fonctionnalités que vous attendiez généralement d’un navigateur Web autonome. En particulier, WebViews manque d'une barre d'adresse ou de contrôles de navigation, ce qui peut rendre leur contenu difficile à interagir avec les utilisateurs.

Avant d’utiliser WebView, vous devez toujours déterminer si une autre solution peut être plus appropriée. Par exemple, vous pouvez transférer le contenu sur le navigateur Web par défaut du périphérique ou implémenter des onglets personnalisés Chrome.

Mise à jour du manifeste

Comme nous diffusons une vidéo à partir d’Internet, nous devons ajouter la permission Internet à notre manifeste:

Je vais aussi lancer MainActivity en mode paysage:

Ajout d'une WebView à notre interface utilisateur

Ensuite, ajoutons une WebView à notre application. Nous pouvons soit ajouter la vue Web à la présentation de notre activité, soit transformer l’activité entière en vue Web, en l’implémentant dans la méthode onCreate () de notre application.

Je vais ajouter une WebView à la présentation de notre application:

Choisissez votre vidéo

Encore une fois, nous avons besoin d’une vidéo à afficher, mais cette fois, nous sommes ne pas en utilisant un identifiant vidéo:

• Rendez-vous sur Vimeo et choisissez une vidéo que vous souhaitez utiliser. J'ai opté pour ce laps de temps d'hiver.
• Cliquez sur le bouton "Partager".
• Sélectionnez l'icône "Embed"; Cela vous fournira un code intégré qui devrait ressembler à ceci:

Ce code fournit les informations suivantes:

• iframe. Spécifie que nous intégrons une autre page HTML dans le contexte actuel.
• src. Le chemin de la vidéo afin que votre application sache où trouver cette vidéo.
• largeur hauteur. Les dimensions de la vidéo.
• bordure de cadre. Indique s'il faut afficher une bordure autour du cadre de la vidéo. Les valeurs possibles sont border (1) et no border (0).
• permettre à plein écran. Cela permet à la vidéo d'être affichée en mode plein écran.

Je vais ajouter ce code intégré à mon projet sous forme de chaîne. Vous devez donc copier / coller ces informations dans le modèle suivant:

String vimeoVideo = "VOTRE LIEN VA ICI';

Frustrement, nous devons apporter quelques modifications avant que le code intégré ne soit compatible avec notre application Android. Premièrement, nous devons ajouter quelques caractères "" afin qu'Android Studio ne se plaint pas de la mise en forme incorrecte:

String vimeoVideo = "';

Enfin, les dimensions vidéo par défaut peuvent être trop grandes pour certains écrans de smartphone Android.
En production, vous avez l'habitude d'essayer différentes dimensions pour voir ce qui donne les meilleurs résultats, dans autant de configurations d'écran que possible. Cependant, pour éviter que cet article ne devienne incontrôlable, je vais simplement utiliser les éléments suivants, qui devraient fournir de bons résultats sur l'écran de votre smartphone Android "typique":

String vimeoVideo = "';

Affichage d'une page Web dans votre application Android

Maintenant que nous avons créé notre mise en page et que notre code HTML est prêt, ouvrez votre MainActivity et implémentons notre WebView.

Commencez par ajouter la chaîne HTML:

String vimeoVideo = "';

Ensuite, nous devons charger la page Web ci-dessus dans notre WebView, en utilisant la méthode loadUrl ():

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

JavaScript est désactivé par défaut, nous devons donc l'activer dans notre WebView.

Chaque fois que vous créez une vue Web, un ensemble de paramètres Web par défaut lui est automatiquement attribué. Nous allons récupérer cet objet WebSettings à l'aide de la méthode getSettings (), puis activer JavaScript à l'aide de setJavaScriptEnabled ().

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

Après avoir ajouté tout cela à votre MainActivity, votre code devrait ressembler à ceci:

importer android.support.v7.app.AppCompatActivity; importer android.os.Bundle; importer android.webkit.WebResourceRequest; importer android.webkit.WebSettings; importer android.webkit.WebView; importer android.webkit.WebViewClient; Classe publique MainActivity étend AppCompatActivity {@Override protected void onCreate (Bundle savedInstanceState) {super.onCreate (savedInstanceState); setContentView (R.layout.activity_main); String vimeoVideo = ""; WebView webView = (WebView) findViewById (R.id.myWebView); webView.setWebViewClient (nouvelle WebViewClient () {@Override public boolean shouldOverrideUrlLoading (WebView webView, demande WebResourceRequest) {webView.loadUrl (request.). ()); return true;}}); WebSettings webSettings = webView.getSettings (); webSettings.setJavaScriptEnabled (true); webView.loadData (vimeoVideo, "text / html", "utf-8");}}

Tester votre application Vimeo

Vous connaissez déjà l’exercice: installez ce projet sur un périphérique Android physique ou AVD. WebView n’est pas configuré pour la lecture automatique, vous devez donc appuyer sur la vidéo pour afficher les commandes multimédias de Vimeo. Vous pouvez ensuite lire, mettre en pause, rembobiner et avancer rapidement la vidéo pour vous assurer qu’elle fonctionne correctement.

Emballer

Dans cet article, je vous ai montré comment ajouter des vidéos YouTube, Vimeo et Dailymotion à vos applications, en utilisant des API et des kits de développement logiciel (SDK) spécifiques à la plate-forme, ainsi que le propre composant WebView d’Android. Je vous ai également montré comment regrouper un fichier vidéo avec votre application afin qu'il puisse être stocké et lu localement.

Quelle est votre manière préférée d’afficher du contenu multimédia à vos utilisateurs? Faites-nous savoir dans les commentaires ci-dessous!