Obsah

• Jak vložit videa YouTube do aplikace pro Android
• Načítání ID videa YouTube
• Získejte otisk prstu SHA-1 vašeho projektu
• Zaregistrujte se v Google API Console
• Stáhněte si rozhraní API pro Android Android YouTube
• Aktualizujte svůj manifest
• Vytváření rozložení YouTube Player
• Implementace přehrávače YouTube
• 1. Rozšiřte YouTubeBaseActivity
• 2. Inicializujte přehrávač YouTube
• 3. Proveďte onInitializationSuccess a onInitializationFailure
• Přehrávání videa YouTube: Dokončený kód
• Testování rozhraní API pro Android Android YouTube
• Zobrazit obsah Dailymotion ve WebView
• Získejte ID videa Dailymotion
• Přidání sady Dailymotion SDK
• Žádost o přístup k internetu
• Přidání widgetu DailyWebion PlayerWebView
• Konfigurace našeho Dailymotion PlayerWebView
• Vložení videa Vimeo
• Aktualizace manifestu
• Přidání WebView do našeho uživatelského rozhraní
• Vyberte si své video
• Zobrazení webové stránky v aplikaci pro Android
• Testování aplikace Vimeo
• Zabalení

Jakmile je MediaController viditelný na obrazovce, můžete video přehrávat, pozastavit, převinout zpět a rychle vpřed a přesunout na libovolný bod klipu přetažením ukazatele průběhu MediaControlleru.

Jak vložit videa YouTube do aplikace pro Android

Vložení videosouboru do aplikace je skvělý způsob, jak zajistit, aby video bylo vždy dostupné, bez ohledu na připojení zařízení k internetu. Vložení několika velkých videí s vysokým rozlišením do aplikace je však také skvělý způsob, jak zvětšit velikost APK!

Pokud se obáváte velikosti souboru APK nebo pokud vaše aplikace obsahuje videa, která jsou pěkná, můžete přidat tato videa na online platformu a poté je za běhu streamovat prostřednictvím aplikace.

Pokud jde o publikování videí online, je tu jeden web, který vám okamžitě napadne, takže v této sekci vám ukážu, jak vložit žádný Video YouTube ve vaší aplikaci pomocí klientské knihovny API rozhraní Android Android Player API.

Načítání ID videa YouTube

Nejprve se musíte rozhodnout, které video YouTube chcete zobrazit, a poté načíst jeho jedinečné video ID.

Můžete použít jakékoli video na YouTube, ale rozhoduji se pro „oblíbenou techniku ​​roku 2018.“ Načtěte vybrané video a podívejte se na jeho adresu URL v adresním řádku prohlížeče, například adresa URL pro video je:

youtube.com/watch?v=hJLBcViaX8Q

ID je část adresy URL, která jednoznačně identifikuje toto video, což je řetězec znaků na konci adresy URL (v podstatě vše za symbolem „=“). ID videa pro video je:

hJLBcViaX8Q

Poznamenejte si ID vašeho videa, protože to později použijeme.

Získejte otisk prstu SHA-1 vašeho projektu

Chcete-li získat přístup k rozhraní API pro Android Android YouTube, musíte vygenerovat klíč API s omezeními pro Android. To zahrnuje propojení klíče API s jedinečným názvem balíčku a otiskem certifikátu projektu (SHA-1).

Otisk prstu vašeho projektu SHA-1 můžete získat pomocí konzoly Gradle:

• Vyberte kartu Přechod na pravé straně okna aplikace Android Studio.
• Vyberte modul „aplikace“ a poté „Úkoly> Android> Podepisování zpráv“.

• Otevřete kartu Konzola přechodu, která se zobrazí směrem k pravé dolní části obrazovky.
• Konzola Gradle se otevře automaticky. V tomto okně najděte hodnotu SHA-1 a poznamenejte si ji.

Používáme otisk debugového certifikátu, který je vhodný pouze pro testování aplikace. Před zveřejněním aplikace byste měli vždy vygenerovat nový klíč API založený na certifikátu vydání této aplikace.

Zaregistrujte se v Google API Console

Než budete moci používat rozhraní YouTube Android Player API, musíte svou aplikaci zaregistrovat v konzoli Google API Console:

• Přejděte do konzoly API.
  V záhlaví vyberte název aktuálního projektu (kde je kurzor umístěn na následující obrazovce).

• V následujícím okně vyberte „Nový projekt“.
• Pojmenujte svůj projekt a poté klikněte na „Vytvořit“.
• V nabídce vlevo vyberte možnost „Přihlašovací údaje“.
• Klikněte na modré tlačítko „Vytvořit pověření“ a vyberte „Klíč API“.
• Váš klíč API se nyní objeví ve vyskakovacím okně, které obsahuje výzvu k omezení tohoto klíče API. Omezené klíče jsou bezpečnější, takže pokud výslovně nevyžadujete neomezený klíč API, rozhodněte se pro možnost Omezit klíč.
• Na následující obrazovce zadejte svůj klíč API rozlišující název.
• Vyberte přepínač „Aplikace pro Android“.
• Klikněte na „Přidat název balíčku a otisk prstu“.
• Zkopírujte / vložte otisk prstu SHA-1 projektu do následující části a poté zadejte název balíčku projektu (který se zobrazí v horní části každého souboru třídy Java a v manifestu projektu).
• Až budete s zadanými informacemi spokojeni, klikněte na tlačítko Uložit.

Stáhněte si rozhraní API pro Android Android YouTube

Dále si budete muset stáhnout klientskou knihovnu API pro Android Android Player API. Při používání této knihovny se doporučuje povolit program ProGuard, aby byl váš APK co nejlehčí.

Postup přidání knihovny YouTube do projektu:

• Přejděte na web YouTube Android Player a stáhněte si nejnovější verzi.
• Rozbalte následující soubor zip.
• Otevřete nově rozbalenou složku a přejděte do podsložky „libs“ - měla by obsahovat soubor „YouTubeAndroidPlayerApi.jar“.
• V Android Studio přepněte do zobrazení „Projekt“.
• Chcete-li zajistit, aby byla knihovna YouTube součástí vaší cesty sestavení, musíte importovat soubor .jar do „/ libs ”. Otevřete složku „aplikace / libs“ vašeho projektu a poté přetáhněte soubor .jar na místo.

• Otevřete soubor build.gradle a přidejte knihovnu YouTube jako závislost na projektu:

závislosti {implementace fileTree (dir: libs, include:) implementace com.android.support:appcompat-v7:28.0.0 implementace com.android.support:design:28.0.0 implementace com.android.support.constraint: constraint-layout : 1.1.3 testImplementation junit: junit: 4.12 androidTestImplementation com.android.support.test: runner: 1.0.2 // Přidejte následující // implementační soubory (libs / YouTubeAndroidPlayerApi.jar)}

• Po zobrazení výzvy synchronizujte své soubory Gradle.

Aktualizujte svůj manifest

Pokud se vaše aplikace zobrazí žádný online video obsahu, pak bude potřeba přístup na internet.

Otevřete manifest projektu a přidejte oprávnění k Internetu:

Abych uživateli dal ten filmový, širokoúhlý zážitek, nastavím také MainActivity tak, aby byl spuštěn v režimu na šířku:

Vytváření rozložení YouTube Player

Video YouTube můžete zobrazit pomocí jednoho z následujících způsobů:

• YouTubePlayerView. Pokud chcete ve svém rozvržení použít YouTubePlayerView, budete muset rozšířit YouTubeBaseActivity v odpovídající třídě aktivity dané rozvržení.
• YouTubePlayerFragment. Toto je fragment, který obsahuje YouTubePlayerView. Pokud se rozhodnete implementovat YouTubePlayerFragment, pak vy zvyklý musí rozšířit z YouTubeBaseActivity.

Budu používat YouTubePlayerView, takže otevřete soubor „activity_main.xml“ vašeho projektu a přidejte widget YouTubePlayerView:

Implementace přehrávače YouTube

Poté otevřete MainActivity a proveďte následující úkoly:

1. Rozšiřte YouTubeBaseActivity

Protože v našem rozvržení používáme prohlížeč YouTubePlayerView, musíme rozšířit YouTubeBaseActivity:

public class MainActivity rozšiřuje YouTubeBaseActivity {

2. Inicializujte přehrávač YouTube

Přehrávač YouTube Player inicializujeme voláním initialize () a předáním klíče API, který jsme vytvořili dříve:

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

3. Proveďte onInitializationSuccess a onInitializationFailure

Nakonec musíme určit, jak by naše aplikace měla reagovat, v závislosti na tom, zda je inicializace úspěšná nebo neúspěšná. Pokud je přehrávač YouTube úspěšně inicializován, můžeme načíst naše video předáním jedinečného ID videa:

public void onInitializationSuccess (YouTubePlayer.Provider provider, YouTubePlayer youTubePlayer, boolean b) {// Určete ID videa // youTubePlayer.loadVideo ("hJLBcViaX8Q");

Dále musíme naší aplikaci sdělit, jak by měla zpracovat neúspěšné inicializace. Zobrazím přípitek:

public void onInitializationFailure (YouTubePlayer.Provider provider, YouTubeInitializationResult youTubeInitializationResult) {Toast.makeText (MainActivity.this, "Došlo k chybě", Toast.LENGTH_SHORT) .show (); }

Přehrávání videa YouTube: Dokončený kód

Přidejte všechny výše uvedené do své MainActivity a měli byste skončit s něčím takovým:

import android.os.Bundle; importovat 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; // Rozšíření YouTubeBaseActivity // public class MainActivity rozšiřuje YouTubeBaseActivity {// Nezapomeňte to nahradit vlastním jedinečným klíčem API // public static final String YOUR_API_KEY = "YOUR_API_KEY_HERE"; @Override chráněné void onCreate (Bundle uloženéInstanceState) {super.onCreate (uloženéInstanceState); setContentView (R.layout.activity_main); YouTubePlayerView youTubePlayerView = (YouTubePlayerView) findViewById (R.id.YouTubePlayer); // Inicializace přehrávače YouTube // youTubePlayerView.initialize (YOUR_API_KEY, nový YouTubePlayer.OnInitializedListener () {@Override // Pokud je přehrávač YouTube úspěšně inicializován ... // veřejná neplatnost onInitializationSuccess (YouTubePlayer.Provider poskytovatel, YouTubePlayer youTubePlayer, boolean b) {//.. Poté začněte přehrávat následující video // youTubePlayer.loadVideo ("hJLBcViaX8Q");} @Override // Pokud se inicializace nezdaří ... // veřejné neplatné onInitializationFailure (YouTubePlayer.Provider provider, YouTubeInitializationResult youTubeInitializationResult) {//...tak zobrazí přípitek // Toast.makeText (MainActivity.this, „Došlo k chybě“, Toast.LENGTH_SHORT) .show ();}}); }}

Testování rozhraní API pro Android Android YouTube

Tuto aplikaci můžete vyzkoušet na fyzickém smartphonu nebo tabletu Android nebo na AVD. Pokud používáte AVD, ujistěte se, že používáte obraz systému, který zahrnuje služby Google Play. Aplikace YouTube musí být také nainstalována na AVD nebo na fyzickém zařízení Android, protože rozhraní API YouTube závisí na službě, která je distribuována jako součást aplikace YouTube pro Android.

Nainstalujte projekt do svého zařízení a video YouTube by se mělo začít přehrávat automaticky, jakmile se aplikace načte. Pokud klepnete na video, budete mít přístup ke všem známým ovládacím prvkům YouTube, pomocí kterých můžete video pozastavit, přehrát, rychle posunout vpřed a vzad.

Zobrazit obsah Dailymotion ve WebView

Pokud jde o vkládání videí do aplikace pro Android, existuje celá řada platforem pro sdílení videa, z nichž si můžete vybrat, a některé platformy dokonce vytvořily sady SDK určené k tomu, aby vám pomohly s jejich obsahem spolupracovat - včetně Dailymotion.

Souprava Dailymotion Player SDK pro Android poskytuje tenký obal kolem komponenty WebView pro Android, která usnadňuje vkládání videí Dailymotion do vašich aplikací.

V této části vám ukážu, jak streamovat jakékoli video z webu Dailymotion pomocí sady SDK Dailymotion Player třetí strany.

Získejte ID videa Dailymotion

Nejprve přejděte na Dailymotion, najděte video, které chcete zobrazit, a poté načtěte jeho ID videa.

Budu používat toto časosběrné video mlhy, které má následující adresu URL:

www.dailymotion.com/video/x71jlg3

ID videa je jedinečný řetězec znaků na konci jeho adresy URL, takže moje ID videa je: x71jlg3.

Přidání sady Dailymotion SDK

Protože používáme sadu Dailymotion SDK, musíme ji prohlásit za závislost na projektu. Otevřete soubor build.gradle projektu a přidejte následující:

dependencies {implementace fileTree (dir: libs, include:) // Přidejte následující // implementaci com.dailymotion.dailymotion-sdk-android: sdk: 0.1.29 implementace com.android.support:appcompat-v7:28.0.0 implementace implementace com.android.support:design:28.0.0 com.android.support.constraint: constraint-layout: 1.1.3 testImplementation junit: junit: 4.12 androidTestImplementation com.android.support.test: runner: 1.0.2}

Po zobrazení výzvy vyberte „Synchronizovat projekt se soubory gradle“.

Ve výchozím nastavení vám SDK Dailymotion SDK poskytuje přístup pouze k veřejným datům Dailymotion, jako je název a popis videa.Některé další úkoly můžete provést registrací aplikace na platformě Dailymotion, ale jelikož chceme pouze vložit video, nemusíme se starat o registraci naší aplikace.

Pokud máte zájem přidat do svých aplikací více funkcí Dailymotion, můžete se dozvědět více o registraci své aplikace pomocí Dailymotion v oficiálních dokumentech.

Žádost o přístup k internetu

Znovu streamujeme obsah z webu, takže náš projekt vyžaduje povolení k internetu:

Každá aktivita, která zobrazuje obsah Dailymotion, musí mít atribut „android: configChanges“, takže do své MainActivity přidejte následující položky:

Přidání widgetu DailyWebion PlayerWebView

Hlavní součástí sady Dailymotion SDK je prvek uživatelského rozhraní PlayerWebView, který poskytuje tenký obal kolem komponenty WebView systému Android.

Podrobněji prozkoumáme webová zobrazení v následující části, ale webová zobrazení vám v podstatě poskytují způsob, jak vložit webové stránky do vaší aplikace. Pokud bychom nepoužívali specializovaný PlayerWebView SDK SDK, pak bychom mohli pomocí komponenty vanilla WebView pro Android zobrazit celou webovou stránku Dailymotion v naší aplikaci.

Místo toho přidáme PlayerWebView k našemu rozvržení:

Konfigurace našeho Dailymotion PlayerWebView

Nyní jsme implementovali widget PlayerWebView, musíme nakonfigurovat přehrávač v naší odpovídající třídě Activity.

Otevřete MainActivity a začněte odkazem na PlayerWebView:

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

Potom zavolejte na „dailyMotionPlayer.load“ a předejte jej ID videa, které jsme načíst dříve:

dailyMotionPlayer.load ("x71jlg3");

To nám dává následující:

importovat 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 rozšiřuje AppCompatActivity {private PlayerWebView dailyMotionPlayer; @Override chráněné void onCreate (Bundle uloženéInstanceState) {super.onCreate (uloženéInstanceState); setContentView (R.layout.activity_main); // Načíst náš PlayerWebView // dailyMotionPlayer = (PlayerWebView) findViewById (R.id.dailymotionPlayer); Mapa playerParams = new HashMap <> (); // Načtěte video s našimi parametry // playerParams.put ("key", "value"); // Předejte ID videa // dailyMotionPlayer.load ("x71jlg3"); }}

Nainstalujte svůj projekt na fyzické zařízení nebo emulátor Android a vaše video Dailymotion by se mělo začít přehrávat automaticky.

Vložení videa Vimeo

Pokud jde o vkládání videoobsahu, obvykle budete chtít používat rozhraní API specifické pro platformu nebo SDK pro konkrétní platformu, kdekoli je to možné. Co když ale není k dispozici sada SDK nebo API pro platformu pro sdílení videa, kterou máte na mysli?

V těchto scénářích můžete pomocí komponenty WebView pro Android zobrazit video jako webovou stránku, která je vložena do rozvržení vaší aktivity. V této závěrečné části vám ukážu, jak vložit video z populární platformy Vimeo pomocí WebView.

Kromě zobrazování videoobsahu mohou být WebView užitečné v řadě dalších scénářů. Představte si například, že máte nějaký obsah, který je třeba pravidelně aktualizovat; hostování tohoto obsahu online a jeho zobrazení ve vaší aplikaci prostřednictvím WebView vám poskytuje flexibilitu kdykoli změnit tento obsah online, aniž byste museli zveřejňovat novou verzi své aplikace. Při používání webových zobrazení však buďte opatrní, protože nepodporují mnoho funkcí, které obvykle od samostatného webového prohlížeče očekáváte. Zejména webovým prohlížečům chybí adresní řádek nebo navigační ovládací prvky, které uživatelům ztěžují interakci s jejich obsahem.

Před použitím WebView byste měli vždy zvážit, zda by nebylo vhodnější alternativní řešení, například byste mohli obsah načíst do výchozího webového prohlížeče zařízení nebo implementovat vlastní karty Chrome.

Aktualizace manifestu

Protože streamujeme video z Internetu, musíme do našeho manifestu přidat oprávnění k Internetu:

Budu také uvádět MainActivity v režimu na šířku:

Přidání WebView do našeho uživatelského rozhraní

Dále přidáme WebView do naší aplikace. Buď můžeme přidat WebView do rozvržení naší aktivity, nebo celou aktivitu proměnit v WebView implementací do metody onCreate () naší aplikace.

Přidám WebView k rozvržení naší aplikace:

Vyberte si své video

Ještě jednou potřebujeme k zobrazení videa, ale tentokrát jsme ne pomocí ID videa:

• Vydejte se na Vimeo a vyberte video, které chcete použít; Rozhodl jsem se pro tento zimní časový odstup.
• Klikněte na tlačítko „Sdílet“.
• Vyberte ikonu „Vložit“; získáte kód pro vložení, který by měl vypadat asi takto:

Tento kód obsahuje následující informace:

• iframe. Určuje, že do aktuálního kontextu vkládáme další stránku HTML.
• src. Cesta videa, takže vaše aplikace ví, kde toto video najít.
• šířka výška. Rozměry videa.
• frameborder. Zda se má ohraničit rámeček videa. Možné hodnoty jsou hranice (1) a žádné hranice (0).
• allowfullscreen. To umožňuje zobrazení videa v režimu celé obrazovky.

Tento kód vložím do svého projektu jako řetězec, takže je třeba zkopírovat / vložit tyto informace do následující šablony:

String vimeoVideo = "VAŠE LINK JSOU ZDE';

Frustrující je, že musíme provést několik změn, než bude kód pro vložení kompatibilní s naší aplikací pro Android. Nejprve musíme přidat několik znaků „“, aby si Android Studio nestěžovalo na nesprávné formátování:

String vimeoVideo = "';

Nakonec mohou být výchozí rozměry videa pro některé smartphony s Androidem příliš velké.
Při výrobě byste obvykle experimentovali s různými rozměry, abyste zjistili, co přináší nejlepší výsledky, napříč co největším počtem různých konfigurací obrazovky. Chceme-li však zabránit tomu, aby se tento článek dostal mimo kontrolu, používám pouze následující, které by na vaší „typické“ obrazovce smartphonu Android měly poskytovat dobré výsledky:

String vimeoVideo = "';

Zobrazení webové stránky v aplikaci pro Android

Nyní jsme vytvořili naše rozvržení a máme připravený celý HTML, otevřete MainActivity a umožňuje implementovat naše WebView.

Začněte přidáním řetězce HTML:

String vimeoVideo = "';

Dále musíme načíst výše uvedenou webovou stránku do našeho WebView pomocí metody loadUrl ():

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

JavaScript je ve výchozím nastavení zakázán, takže ho musíme povolit v našem WebView.

Při každém vytvoření WebView je automaticky přiřazena sada výchozích nastavení WebSettings. Tento objekt WebSettings načteme pomocí metody getSettings () a poté povolíme JavaScript pomocí setJavaScriptEnabled ().

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

Po přidání všeho do MainActivity by váš kód měl vypadat asi takto:

importovat android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.webkit.WebResourceRequest; importovat android.webkit.WebSettings; import android.webkit.WebView; import android.webkit.WebViewClient; public class MainActivity rozšiřuje AppCompatActivity {@Override chráněné void onCreate (Bundle uloženéInstanceState) {super.onCreate (uloženéInstanceState); setContentView (R.layout.activity_main); String vimeoVideo = ""; WebView webView = (WebView) findViewById (R.id.myWebView); webView.setWebViewClient (nový WebViewClient () {@Override veřejný boolean shouldOverrideUrlLoading (WebView webView, WebResourceRequest request) {webView.loadUrl (request.getUrl (). ()); návrat true;}}); WebSettings webSettings = webView.getSettings (); webSettings.setJavaScriptEnabled (true); webView.loadData (vimeoVideo, "text / html", "utf-8");}}

Testování aplikace Vimeo

Nyní znáte cvičení: nainstalujte tento projekt na fyzické zařízení Android nebo AVD. WebView není nastaven na automatické přehrávání, takže budete muset dát videu klepnutí, abyste odhalili ovládací prvky médií Vimeo. Poté můžete video přehrát, pozastavit, převinout zpět a rychle vpřed, abyste se ujistili, že funguje správně.

Zabalení

V tomto článku jsem vám ukázal, jak přidat do svých videí videa YouTube, Vimeo a Dailymotion pomocí rozhraní API a SDK specifických pro platformu a vlastní komponenty WebView pro Android. Také jsem vám ukázal, jak spojit video soubor s vaší aplikací, aby mohl být uložen a přehráván místně.

Jaký je váš oblíbený způsob, jak zobrazit multimediální obsah svým uživatelům? Dejte nám vědět v komentářích níže!