Inhoud

• Hoe YouTube-video's in te sluiten in je Android-app
• De ID van een YouTube-video ophalen
• Download de SHA-1-vingerafdruk van uw project
• Registreer u bij de Google API-console
• Download de YouTube Android Player API
• Update uw manifest
• De lay-out van YouTube Player bouwen
• Implementatie van de YouTube Player
• 1. Breid YouTubeBaseActivity uit
• 2. Initialiseer YouTube Player
• 3. Implementeer onInitializationSuccess en onInitializationFailure
• Een YouTube-video afspelen: voltooide code
• De YouTube Android Player API testen
• Dailymotion-inhoud weergeven in een WebView
• Download de video-ID van Dailymotion
• De Dailymotion SDK toevoegen
• Verzoek om internettoegang
• De PlayerWebView-widget van Dailymotion toevoegen
• Configureren van onze Dailymotion PlayerWebView
• Een Vimeo-video insluiten
• Het manifest bijwerken
• Een WebView toevoegen aan onze gebruikersinterface
• Kies je video
• Een webpagina weergeven in uw Android-app
• Uw Vimeo-app testen
• Afsluiten

Zodra de MediaController op het scherm zichtbaar is, kunt u de video afspelen, pauzeren, terugspoelen en vooruitspoelen en naar elk punt in de clip springen door de voortgangsbalk van MediaController te slepen.

Hoe YouTube-video's in te sluiten in je Android-app

Het insluiten van een videobestand in uw applicatie is een geweldige manier om ervoor te zorgen dat video altijd beschikbaar is, ongeacht de internetverbinding van het apparaat. Het insluiten van meerdere grote video's met een hoge resolutie in je app is echter ook een geweldige manier om de grootte van je APK te vergroten!

Als je je zorgen maakt over de APK-grootte, of als je applicatie video's bevat die leuk zijn om extra's te hebben toegevoegd, wil je die video's misschien publiceren op een online platform en ze vervolgens via runtime via je applicatie streamen.

Als het gaat om het online publiceren van video's, is er één website die onmiddellijk in me opkomt, dus in dit gedeelte laat ik u zien hoe u ieder YouTube-video in uw app, met behulp van de YouTube Android Player API-clientbibliotheek.

De ID van een YouTube-video ophalen

Om te beginnen, moet je beslissen welke YouTube-video je wilt weergeven en vervolgens de unieke video-ID ophalen.

Je kunt elke YouTube-video gebruiken, maar ik kies voor '' s favoriete technologie van 2018. 'Laad je gekozen video en kijk naar de URL in de adresbalk van je browser, bijvoorbeeld de URL voor de video is:

youtube.com/watch?v=hJLBcViaX8Q

De ID is het gedeelte van de URL dat deze video op unieke wijze identificeert. Dit is de reeks tekens aan het einde van de URL (eigenlijk alles na het symbool '='). De video-ID voor de video is:

hJLBcViaX8Q

Noteer de ID van je video, omdat we deze later zullen gebruiken.

Download de SHA-1-vingerafdruk van uw project

Om toegang te krijgen tot de YouTube Android Player API, moet je een API-sleutel met Android-beperkingen genereren. Dit houdt in dat de API-sleutel wordt gekoppeld aan de unieke pakketnaam en certificaatvingerafdruk van uw project (SHA-1).

Je kunt de SHA-1-vingerafdruk van je project ophalen via de Gradle-console:

• Selecteer het tabblad Gradle aan de rechterkant van het venster van Android Studio.
• Selecteer de "app" -module, gevolgd door "Taken> Android> signingReport".

• Open het tabblad Gradle Console dat rechtsonder in het scherm verschijnt.
• De Gradle-console wordt automatisch geopend. Zoek de SHA-1-waarde in dit venster en noteer deze.

We gebruiken een vingerafdruk van het foutopsporingscertificaat, die alleen geschikt is voor het testen van een toepassing. Voordat u een app publiceert, moet u altijd een nieuwe API-sleutel genereren op basis van het releasecertificaat van die applicatie.

Registreer u bij de Google API-console

Voordat u de YouTube Android Player API kunt gebruiken, moet u uw applicatie registreren in de Google API Console:

• Ga naar de API-console.
  Selecteer in de kop de naam van uw huidige project (waar de cursor in de volgende schermafbeelding staat).

• Selecteer "Nieuw project" in het volgende venster.
• Geef uw project een naam en klik vervolgens op 'Maken'.
• Selecteer 'Referenties' in het menu aan de linkerkant.
• Klik met de blauwe knop 'Aanmeldgegevens maken' en selecteer vervolgens 'API-sleutel'.
• Uw API-sleutel verschijnt nu in een pop-up waarin u wordt gevraagd deze API-sleutel te beperken. Beperkte sleutels zijn veiliger, dus tenzij u specifiek een onbeperkte API-sleutel nodig heeft, kiest u voor "Beperkte sleutel".
• Geef uw API-sleutel op het volgende scherm een ​​onderscheidende naam.
• Selecteer het keuzerondje "Android-apps".
• Klik op 'Pakketnaam en vingerafdruk toevoegen'.
• Kopieer / plak de SHA-1-vingerafdruk van uw project in de volgende sectie en voer vervolgens de pakketnaam van uw project in (die bovenaan elk Java-klassebestand en in het Manifest van uw project wordt weergegeven).
• Als u tevreden bent met de informatie die u heeft ingevoerd, klikt u op 'Opslaan'.

Download de YouTube Android Player API

Vervolgens moet je de YouTube Android Player API-clientbibliotheek downloaden. Wanneer u deze bibliotheek gebruikt, wordt u aangeraden ProGuard in te schakelen om uw APK zo licht mogelijk te houden.

Om de YouTube-bibliotheek aan je project toe te voegen:

• Ga naar de YouTube Android Player-website en download de nieuwste versie.
• Pak het volgende zipbestand uit.
• Open de nieuw uitgepakte map en navigeer naar de submap "libs" - deze moet een "YouTubeAndroidPlayerApi.jar" -bestand bevatten.
• Schakel in Android Studio naar de weergave "Project".
• Om ervoor te zorgen dat de YouTube-bibliotheek is opgenomen in uw build-pad, moet u de .jar importeren in het project '/ libs ”directory. Open de map "app / libs" van uw project en sleep de .jar naar de gewenste positie.

• Open uw build.gradle-bestand en voeg de YouTube-bibliotheek toe als projectafhankelijkheid:

afhankelijkheden {implementatie fileTree (dir: libs, include:) implementatie com.android.support:appcompat-v7:28.0.0 implementatie com.android.support:design:28.0.0 implementatie com.android.support.constraint: constraint-layout : 1.1.3 testImplementation junit: junit: 4.12 androidTestImplementation com.android.support.test: runner: 1.0.2 // Voeg de volgende // implementatiebestanden toe (libs / YouTubeAndroidPlayerApi.jar)}

• Synchroniseer uw Gradle-bestanden wanneer u hierom wordt gevraagd.

Update uw manifest

Als uw toepassing wordt weergegeven ieder online video-inhoud, dan heeft u toegang tot internet nodig.

Open het manifest van uw project en voeg de internetmachtiging toe:

Om de gebruiker een voorproefje te geven van die filmische, breedbeeldervaring, stel ik MainActivity ook in om te starten in landschapsmodus:

De lay-out van YouTube Player bouwen

Je kunt een YouTube-video weergeven met:

• YouTubePlayerView. Als je YouTubePlayerView in je lay-out wilt gebruiken, moet je YouTubeBaseActivity uitbreiden in de overeenkomstige activiteitsklasse van die lay-out.
• YouTubePlayerFragment. Dit is een fragment dat een YouTubePlayerView bevat. Als je ervoor kiest om een ​​YouTubePlayerFragment te implementeren, dan ben jij het zal niet moeten uitbreiden van YouTubeBaseActivity.

Ik gebruik YouTubePlayerView, dus open het bestand "activity_main.xml" van je project en voeg een YouTubePlayerView-widget toe:

Implementatie van de YouTube Player

Open vervolgens uw MainActivity en voltooi de volgende taken:

1. Breid YouTubeBaseActivity uit

Omdat we een YouTubePlayerView in onze lay-out gebruiken, moeten we YouTubeBaseActivity uitbreiden:

openbare klasse MainActivity breidt YouTubeBaseActivity uit {

2. Initialiseer YouTube Player

We initialiseren de YouTube Player door initialize () aan te roepen en de eerder gemaakte API-sleutel door te geven:

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

3. Implementeer onInitializationSuccess en onInitializationFailure

Ten slotte moeten we specificeren hoe onze applicatie moet reageren, afhankelijk van of de initialisatie een succes of een mislukking is. Als de YouTube Player succesvol is geïnitialiseerd, kunnen we onze video laden door de unieke video-ID door te geven:

openbare nietig op onitializationSuccess (YouTubePlayer.Provider-provider, YouTubePlayer youTubePlayer, boolean b) {// Geef de video-ID op // youTubePlayer.loadVideo ("hJLBcViaX8Q");

Vervolgens moeten we onze applicatie vertellen hoe deze moet omgaan met mislukte initialisaties. Ik ga een Toast weergeven:

openbare ongeldig opInitializationFailure (YouTubePlayer.Provider provider, YouTubeInitializationResult youTubeInitializationResult) {Toast.makeText (MainActivity.this, "Er is een fout opgetreden", Toast.LENGTH_SHORT) .show (); }

Een YouTube-video afspelen: voltooide code

Voeg al het bovenstaande toe aan je MainActivity en je zou zoiets moeten eindigen:

android.os.bundle importeren; android.widget.Toast importeren; 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; // Verleng YouTubeBaseActivity // public class MainActivity breidt YouTubeBaseActivity uit {// vergeet niet dit te vervangen door uw eigen unieke API-sleutel // public static final String YOUR_API_KEY = "YOUR_API_KEY_HERE"; @Override beschermde nietig onCreate (bundle saveInstanceState) {super.onCreate (saveInstanceState); setContentView (R.layout.activity_main); YouTubePlayerView youTubePlayerView = (YouTubePlayerView) findViewById (R.id.YouTubePlayer); // Initialiseer de YouTube Player // youTubePlayerView.initialize (YOUR_API_KEY, nieuwe YouTubePlayer.OnInitializedListener () {@Override // Als de YouTube Player succesvol is geïnitialiseerd ... // public void onInitializationSuccess (YouTubePlayer.Provider provider, YouTubePlayer youTubePlayer, Boolean b) {//.. start dan het afspelen van de volgende video // youTubePlayer.loadVideo ("hJLBcViaX8Q");} @Override // Als de initialisatie mislukt ... // public void onInitializationFailure (YouTubePlayer.Provider provider, YouTubeInitializationResult youTubeInitializationResult) {//... toon dan een toast // Toast.makeText (MainActivity.this, "Er is een fout opgetreden", Toast.LENGTH_SHORT) .show ();}}); }}

De YouTube Android Player API testen

U kunt deze applicatie testen op een fysieke Android-smartphone of -tablet of een AVD. Als u een AVD gebruikt, moet u ervoor zorgen dat u een systeemimage gebruikt die Google Play-services bevat. De YouTube-app moet ook op de AVD of het fysieke Android-apparaat worden geïnstalleerd, omdat de YouTube API afhankelijk is van een service die wordt gedistribueerd als onderdeel van de YouTube voor Android-app.

Installeer het project op uw apparaat en de YouTube-video zou automatisch moeten beginnen te spelen zodra de applicatie wordt geladen. Als je op de video tikt, heb je toegang tot alle bekende YouTube-bedieningselementen die je kunt gebruiken om de video te pauzeren, af te spelen, vooruit te spoelen en terug te spoelen.

Dailymotion-inhoud weergeven in een WebView

Als het gaat om het insluiten van video's in uw Android-app, is er een breed scala aan platforms voor het delen van video's waaruit u kunt kiezen, en sommige platforms hebben zelfs SDK's gemaakt die zijn bedoeld om u te helpen communiceren met hun inhoud - waaronder Dailymotion.

De Dailymotion Player SDK voor Android biedt een dunne wikkel rond de WebView-component van Android, waardoor het eenvoudiger wordt om Dailymotion-video's in uw applicaties in te sluiten.

In dit gedeelte laat ik je zien hoe je elke video van de Dailymotion-website kunt streamen met behulp van de externe Dailymotion Player SDK.

Download de video-ID van Dailymotion

Ga eerst naar Dailymotion, zoek een video die u wilt weergeven en haal vervolgens de video-ID op.

Ik gebruik deze time-lapse-video van mist, die de volgende URL heeft:

www.dailymotion.com/video/x71jlg3

De ID van de video is de unieke reeks tekens aan het einde van de URL, dus mijn video-ID is: x71jlg3.

De Dailymotion SDK toevoegen

Omdat we de Dailymotion SDK gebruiken, moeten we deze als een projectafhankelijkheid verklaren. Open het build.gradle-bestand van uw project en voeg het volgende toe:

afhankelijkheden {implementatie fileTree (dir: libs, include:) // Voeg de volgende toe // implementatie com.dailymotion.dailymotion-sdk-android: sdk: 0.1.29 implementatie com.android.support:appcompat-v7:28.0.0 implementatie com.android.support:design:28.0.0 implementatie com.android.support.constraint: constraint-layout: 1.1.3 testImplementation junit: junit: 4.12 androidTestImplementation com.android.support.test: runner: 1.0.2}

Selecteer "Synchroniseer project met gradle-bestanden" wanneer u hierom wordt gevraagd.

Houd er rekening mee dat de Dailymotion SDK standaard alleen toegang geeft tot de openbare gegevens van Dailymotion, zoals de titel en de beschrijving van een video.U kunt een aantal extra taken uitvoeren door uw applicatie te registreren bij het Dailymotion-platform, maar omdat we alleen een video willen insluiten, hoeven we ons geen zorgen te maken over het registreren van onze applicatie.

Als u interessant bent om meer Dailymotion-functionaliteit aan uw apps toe te voegen, kunt u meer informatie over het registreren van uw toepassing bij Dailymotion vinden in de officiële documenten.

Verzoek om internettoegang

Nogmaals, we streamen inhoud van het World Wide Web, dus ons project vereist de internetmachtiging:

Elke activiteit die Dailymotion-inhoud weergeeft, moet het kenmerk 'android: configChanges' hebben, dus voeg het volgende toe aan uw MainActivity:

De PlayerWebView-widget van Dailymotion toevoegen

Het hoofdbestanddeel van de Dailymotion SDK is een PlayerWebView UI-element, dat een dunne wikkel vormt rond het WebView-onderdeel van Android.

We zullen WebViews in meer detail in het volgende gedeelte verkennen, maar WebViews bieden u in wezen een manier om webpagina's in uw toepassing in te sluiten. Als we de gespecialiseerde PlayerWebView van de SDK niet gebruiken, kunnen we de vanille WebView-component van Android gebruiken om een ​​volledige Dailymotion-webpagina in onze applicatie weer te geven.

Laten we in plaats daarvan een PlayerWebView aan onze lay-out toevoegen:

Configureren van onze Dailymotion PlayerWebView

Nu we de PlayerWebView-widget hebben geïmplementeerd, moeten we de speler in onze overeenkomstige activiteitsklasse configureren.

Open uw MainActivity en begin met een verwijzing naar PlayerWebView:

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

Roep vervolgens "dailyMotionPlayer.load" aan en geef de video-ID door die we eerder hebben opgehaald:

dailyMotionPlayer.load ( "x71jlg3");

Dit geeft ons het volgende:

android.support.v7.app.AppCompatActivity importeren; android.os.bundle importeren; com.dailymotion.android.player.sdk.PlayerWebView importeren; java.util.HashMap importeren; import java.util.Map; openbare klasse MainActivity breidt AppCompatActivity uit {private PlayerWebView dailyMotionPlayer; @Override beschermde nietig onCreate (bundle saveInstanceState) {super.onCreate (saveInstanceState); setContentView (R.layout.activity_main); // Onze PlayerWebView ophalen // dailyMotionPlayer = (PlayerWebView) findViewById (R.id.dailymotionPlayer); Kaart playerParams = nieuwe HashMap <> (); // Laad de video met onze parameters // playerParams.put ("key", "value"); // Geef de video-ID door // dailyMotionPlayer.load ("x71jlg3"); }}

Installeer uw project op een fysiek Android-apparaat of emulator en uw Dailymotion-video zou automatisch moeten beginnen te spelen.

Een Vimeo-video insluiten

Als het gaat om het insluiten van video-inhoud, wilt u meestal waar mogelijk een platformspecifieke API of platformspecifieke SDK gebruiken. Maar wat als er geen SDK of API beschikbaar is voor het videodeelplatform dat u in gedachten heeft?

In deze scenario's kunt u de WebView-component van Android gebruiken om de video weer te geven als een webpagina die is ingesloten in de lay-out van uw activiteit. In dit laatste gedeelte laat ik u zien hoe u een video van het populaire Vimeo-platform kunt insluiten met behulp van een WebView.

WebViews kunnen niet alleen video-inhoud weergeven, maar kunnen ook in een aantal andere scenario's worden gebruikt. Stel je bijvoorbeeld voor dat je inhoud hebt die regelmatig moet worden bijgewerkt; die inhoud online hosten en vervolgens in uw applicatie weergeven via een WebView geeft u de flexibiliteit om die inhoud op elk gewenst moment online te wijzigen, zonder dat u een nieuwe versie van uw app hoeft te publiceren. Wees echter voorzichtig wanneer u WebViews gebruikt, omdat deze veel van de functies die u normaal gesproken van een zelfstandige webbrowser verwacht, niet ondersteunen. In het bijzonder ontbreekt het WebViews aan een adresbalk of navigatiebesturing, waardoor gebruikers moeilijk kunnen communiceren met hun inhoud.

Voordat u een WebView gebruikt, moet u altijd overwegen of een alternatieve oplossing meer geschikt is, u kunt bijvoorbeeld de inhoud naar de standaardwebbrowser van het apparaat verplaatsen of aangepaste Chrome-tabbladen implementeren.

Het manifest bijwerken

Omdat we een video van internet streamen, moeten we de internetmachtiging toevoegen aan ons manifest:

Ik ga MainActivity ook in landschapsmodus lanceren:

Een WebView toevoegen aan onze gebruikersinterface

Laten we vervolgens een WebView aan onze app toevoegen. We kunnen WebView toevoegen aan de lay-out van onze activiteit of de hele activiteit omzetten in een WebView door deze te implementeren in de onCreate () -methode van onze applicatie.

Ik ga een WebView toevoegen aan de lay-out van onze applicatie:

Kies je video

Nogmaals, we hebben een video nodig om weer te geven, maar deze keer zijn we niet met behulp van een video-ID:

• Ga naar Vimeo en kies een video die je wilt gebruiken; Ik heb gekozen voor deze wintertijdspanne.
• Geef de knop 'Delen' een klik.
• Selecteer het pictogram 'Insluiten'; Hiermee krijgt u een insluitcode die er ongeveer zo uit zou moeten zien:

Deze code biedt de volgende informatie:

• iframe. Geeft aan dat we een andere HTML-pagina in de huidige context insluiten.
• src. Het pad van de video, zodat uw app weet waar deze video te vinden is.
• breedte hoogte. De afmetingen van de video.
• frameborder. Of een rand rond het frame van de video moet worden weergegeven. De mogelijke waarden zijn rand (1) en geen rand (0).
• sta volledig scherm toe. Hierdoor kan de video op volledig scherm worden weergegeven.

Ik ga deze insluitcode als een string aan mijn project toevoegen, dus je moet deze informatie in de volgende sjabloon kopiëren / plakken:

String vimeoVideo = "UW LINK GAAT HIER';

Frustrerend moeten we enkele wijzigingen aanbrengen voordat de insluitcode compatibel is met onze Android-app. Eerst moeten we enkele "" tekens toevoegen, zodat Android Studio niet klaagt over onjuiste opmaak:

String vimeoVideo = "';

Ten slotte zijn de standaardvideodimensies te groot voor sommige Android-smartphoneschermen.
In de productie experimenteer je meestal met verschillende dimensies om te zien wat de beste resultaten oplevert, in zoveel mogelijk verschillende schermconfiguraties. Om te voorkomen dat dit artikel uit de hand loopt, ga ik gewoon het volgende gebruiken, wat goede resultaten zou moeten opleveren op uw "typische" Android-smartphonescherm:

String vimeoVideo = "';

Een webpagina weergeven in uw Android-app

Nu hebben we onze lay-out gemaakt en onze HTML gereed voor gebruik, open uw MainActivity en laten we onze WebView implementeren.

Begin met het toevoegen van de HTML-string:

String vimeoVideo = "';

Vervolgens moeten we de bovenstaande webpagina laden in onze WebView, met behulp van de methode loadUrl ():

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

JavaScript is standaard uitgeschakeld, dus we moeten het inschakelen in onze WebView.

Telkens wanneer u een WebView maakt, krijgt deze automatisch een set standaard WebSettings toegewezen. We halen dit WebSettings-object op met de methode getSettings () en schakelen vervolgens JavaScript in met setJavaScriptEnabled ().

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

Nadat u dit alles aan uw MainActivity hebt toegevoegd, zou uw code er ongeveer zo uit moeten zien:

android.support.v7.app.AppCompatActivity importeren; android.os.bundle importeren; android.webkit.WebResourceRequest importeren; android.webkit.WebSettings importeren; android.webkit.WebView importeren; android.webkit.WebViewClient importeren; openbare klasse MainActivity breidt AppCompatActivity uit {@Override beschermde nietig onCreate (bundle saveInstanceState) {super.onCreate (saveInstanceState); setContentView (R.layout.activity_main); String vimeoVideo = ""; WebView webView = (WebView) findViewById (R.id.myWebView); webView.setWebViewClient (nieuw WebViewClient () {@Override public boolean shouldOverrideUrlLoading (WebView webView, WebResourceRequest request) {webView.loadUrl (request.getUrling)) to to. ()); return true;}}); WebSettings webSettings = webView.getSettings (); webSettings.setJavaScriptEnabled (true); webView.loadData (vimeoVideo, "text / html", "utf-8");}}

Uw Vimeo-app testen

U kent de oefening inmiddels: installeer dit project op een fysiek Android-apparaat of AVD. De WebView is niet ingesteld om automatisch te worden afgespeeld, dus je moet de video een tik geven om de mediabediening van Vimeo te onthullen. Je kunt de video vervolgens afspelen, pauzeren, terugspoelen en snel vooruitspoelen om te controleren of deze correct functioneert.

Afsluiten

In dit artikel heb ik je laten zien hoe je YouTube-, Vimeo- en Dailymotion-video's aan je apps kunt toevoegen, met behulp van platformspecifieke API's en SDK's en het eigen WebView-onderdeel van Android. Ik heb je ook laten zien hoe je een videobestand met je applicatie bundelt, zodat het lokaal kan worden opgeslagen en afgespeeld.

Wat is uw favoriete manier om multimedia-inhoud aan uw gebruikers weer te geven? Laat het ons weten in de reacties hieronder!