Zawartość
- Jak osadzać filmy z YouTube w aplikacji na Androida
- Pobieranie identyfikatora filmu z YouTube
- Uzyskaj odcisk palca SHA-1 swojego projektu
- Zarejestruj się w Google API Console
- Pobierz interfejs API YouTube Android Player
- Zaktualizuj swój manifest
- Budowanie układu odtwarzacza YouTube
- Wdrażanie odtwarzacza YouTube
- 1. Rozszerz YouTubeBaseActivity
- 2. Zainicjuj odtwarzacz YouTube
- 3. Wdrożenie onInitializationSuccess i onInitializationFailure
- Odtwarzanie filmu z YouTube: Ukończony kod
- Testowanie interfejsu API YouTube Android Player
- Wyświetlaj zawartość Dailymotion w WebView
- Uzyskaj identyfikator wideo Dailymotion
- Dodanie Dailymotion SDK
- Żądanie dostępu do Internetu
- Dodawanie widżetu PlayerWebView Dailymotion
- Konfigurowanie naszego Dailymotion PlayerWebView
- Osadzanie wideo Vimeo
- Aktualizacja manifestu
- Dodanie WebView do naszego interfejsu użytkownika
- Wybierz swój film
- Wyświetlanie strony internetowej w aplikacji na Androida
- Testowanie aplikacji Vimeo
- Podsumowując
Gdy MediaController będzie widoczny na ekranie, możesz odtwarzać, wstrzymywać, przewijać i przewijać wideo oraz przeskakiwać do dowolnego miejsca w klipie, przeciągając pasek postępu MediaController.
Jak osadzać filmy z YouTube w aplikacji na Androida
Osadzenie pliku wideo w aplikacji to świetny sposób na zapewnienie, że wideo jest zawsze dostępne, niezależnie od połączenia internetowego urządzenia. Jednak osadzenie w aplikacji wielu dużych filmów o wysokiej rozdzielczości to także świetny sposób na zwiększenie rozmiaru pliku APK!
Jeśli obawiasz się o rozmiar pliku APK lub Twoja aplikacja zawiera filmy, które są miłym dodatkiem, możesz opublikować te filmy na platformie online, a następnie przesłać je strumieniowo za pośrednictwem aplikacji w czasie wykonywania.
Jeśli chodzi o publikowanie filmów online, przychodzi mi na myśl jedna witryna, więc w tej sekcji pokażę, jak osadzić film każdy Wideo z YouTube w Twojej aplikacji przy użyciu biblioteki klienta YouTube Android API API.
Pobieranie identyfikatora filmu z YouTube
Aby rozpocząć, musisz zdecydować, który film z YouTube chcesz wyświetlić, a następnie pobrać jego unikalny identyfikator.
Możesz użyć dowolnego filmu na YouTube, ale wybieram „Ulubioną technologię 2018”. Załaduj wybrany film i spójrz na jego adres URL w pasku adresu przeglądarki, na przykład adres URL filmu:
youtube.com/watch?v=hJLBcViaX8Q
Identyfikator to część adresu URL, która jednoznacznie identyfikuje ten film, czyli ciąg znaków na końcu adresu URL (w zasadzie wszystko po symbolu „=”). Identyfikator wideo to:
hJLBcViaX8Q
Zanotuj identyfikator swojego filmu, ponieważ wykorzystamy go później.
Uzyskaj odcisk palca SHA-1 swojego projektu
Aby uzyskać dostęp do interfejsu API YouTube Android Player, musisz wygenerować klucz API z ograniczeniami Androida. Wiąże się to z połączeniem klucza API z unikalną nazwą twojego projektu i odciskiem palca certyfikatu (SHA-1).
Możesz pobrać odcisk palca SHA-1 swojego projektu za pomocą konsoli Gradle:
- Wybierz kartę Gradle po prawej stronie okna Android Studio.
- Wybierz moduł „aplikacja”, a następnie „Zadania> Android> raport podpisywania”.
- Otwórz zakładkę Gradle Console, która pojawia się w prawym dolnym rogu ekranu.
- Konsola Gradle otworzy się automatycznie. Znajdź wartość SHA-1 w tym oknie i zanotuj ją.
Używamy odcisku palca certyfikatu debugowania, który jest odpowiedni tylko do testowania aplikacji. Przed opublikowaniem aplikacji zawsze należy wygenerować nowy klucz API na podstawie certyfikatu wydania tej aplikacji.
Zarejestruj się w Google API Console
Aby móc korzystać z interfejsu API YouTube Android Player, musisz zarejestrować swoją aplikację w konsoli Google API:
- Udaj się do konsoli API.
W nagłówku wybierz nazwę bieżącego projektu (gdzie kursor znajduje się na poniższym zrzucie ekranu).
- W kolejnym oknie wybierz „Nowy projekt”.
- Nadaj nazwę swojemu projektowi, a następnie kliknij „Utwórz”.
- W menu po lewej stronie wybierz „Poświadczenia”.
- Kliknij niebieski przycisk „Utwórz poświadczenia”, a następnie wybierz „Klucz API”.
- Twój klucz API pojawi się teraz w wyskakującym okienku, które zawiera monit o ograniczenie tego klucza API. Klucze z ograniczeniami są bezpieczniejsze, więc jeśli nie potrzebujesz specjalnie nieograniczonego klucza API, wybierz „Ogranicz klucz”.
- Na kolejnym ekranie nadaj kluczowi API charakterystyczną nazwę.
- Wybierz przycisk opcji „Aplikacje na Androida”.
- Kliknij „Dodaj nazwę pakietu i odcisk palca”.
- Skopiuj / wklej odcisk palca SHA-1 swojego projektu do następnej sekcji, a następnie wprowadź nazwę pakietu projektu (która pojawia się u góry każdego pliku klasy Java i w Manifeście projektu).
- Gdy podoba Ci się wprowadzona informacja, kliknij „Zapisz”.
Pobierz interfejs API YouTube Android Player
Następnie musisz pobrać bibliotekę klienta YouTube Android API API. Podczas korzystania z tej biblioteki zaleca się włączenie ProGuard, aby Twój pakiet APK był tak lekki, jak to możliwe.
Aby dodać bibliotekę YouTube do swojego projektu:
- Wejdź na stronę YouTube Android Player i pobierz najnowszą wersję.
- Rozpakuj kolejny plik zip.
- Otwórz nowo rozpakowany folder i przejdź do jego podfolderu „libs” - powinien on zawierać plik „YouTubeAndroidPlayerApi.jar”.
- W Android Studio przejdź do widoku „Projekt”.
- Aby upewnić się, że biblioteka YouTube jest uwzględniona na ścieżce kompilacji, musisz zaimportować plik .jar do projektu „
katalog / libs ”. Otwórz folder „app / libs” swojego projektu, a następnie przeciągnij i upuść plik .jar na swoje miejsce.
- Otwórz plik build.gradle i dodaj bibliotekę YouTube jako zależność projektu:
zależności {implementacja fileTree (reż: libs, include:) implementacja com.android.support:appcompat-v7:28.0.0 implementacja com.android.support:design:28.0.0 implementacja com.android.support.constraint: układ z ograniczeniami : 1.1.3 testImplementation junit: junit: 4.12 androidTestImplementation com.android.support.test: runner: 1.0.2 // Dodaj następujące // pliki implementacyjne (libs / YouTubeAndroidPlayerApi.jar)}
- Po wyświetleniu monitu zsynchronizuj pliki Gradle.
Zaktualizuj swój manifest
Jeśli aplikacja będzie wyświetlana każdy treści wideo online, wtedy będzie potrzebował dostępu do Internetu.
Otwórz Manifest projektu i dodaj pozwolenie internetowe:
Aby dać użytkownikowi zasmakować tego kinowego obrazu szerokoekranowego, włączam także funkcję MainActivity w trybie poziomym:
Budowanie układu odtwarzacza YouTube
Możesz wyświetlić film na YouTube, używając:
- YouTubePlayerView. Jeśli chcesz używać YouTubePlayerView w swoim układzie, musisz rozszerzyć YouTubeBaseActivity w odpowiedniej klasie aktywności tego układu.
- YouTubePlayerFragment. To jest fragment, który zawiera YouTubePlayerView. Jeśli zdecydujesz się wdrożyć YouTubePlayerFragment, to Ty przyzwyczajenie trzeba rozszerzyć z YouTubeBaseActivity.
Będę używać YouTubePlayerView, więc otwórz plik „activity_main.xml” i dodaj widżet YouTubePlayerView:
Wdrażanie odtwarzacza YouTube
Następnie otwórz MainActivity i wykonaj następujące zadania:
1. Rozszerz YouTubeBaseActivity
Ponieważ korzystamy z YouTubePlayerView w naszym układzie, musimy rozszerzyć YouTubeBaseActivity:
klasa publiczna MainActivity rozszerza YouTubeBaseActivity {
2. Zainicjuj odtwarzacz YouTube
Inicjalizujemy odtwarzacz YouTube, wywołując metodę initialize () i przekazując wcześniej utworzony klucz API:
YouTubePlayerView youTubePlayerView = (YouTubePlayerView) findViewById (R.id.YouTubePlayer); youTubePlayerView.initialize (YOUR_API_KEY, nowy YouTubePlayer.OnInitializedListener () {
3. Wdrożenie onInitializationSuccess i onInitializationFailure
Na koniec musimy określić, jak powinna reagować nasza aplikacja, w zależności od tego, czy inicjalizacja zakończy się sukcesem, czy niepowodzeniem. Jeśli odtwarzacz YouTube zostanie pomyślnie zainicjowany, możemy załadować nasz film, przekazując unikalny identyfikator wideo:
public void onInitializationSuccess (dostawca YouTubePlayer.Provider, YouTubePlayer youTubePlayer, boolean b) {// Podaj identyfikator wideo // youTubePlayer.loadVideo („hJLBcViaX8Q”);
Następnie musimy powiedzieć naszej aplikacji, jak powinna obsługiwać nieudane inicjalizacje. Pokażę Toast:
public void onInitializationFailure (dostawca YouTubePlayer.Provider, YouTubeInitializationResult youTubeInitializationResult) {Toast.makeText (MainActivity.this, „Wystąpił błąd”, Toast.LENGTH_SHORT) .show (); }
Odtwarzanie filmu z YouTube: Ukończony kod
Dodaj wszystkie powyższe do MainActivity, a powinieneś otrzymać coś takiego:
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; // Rozszerz YouTubeBaseActivity // klasa publiczna MainActivity rozszerza YouTubeBaseActivity {// Nie zapomnij zastąpić tego własnym unikalnym kluczem API // public static final String YOUR_API_KEY = "YOUR_API_KEY_HERE"; @Override chronione void onCreate (pakiet saveInstanceState) {super.onCreate (saveInstanceState); setContentView (R.layout.activity_main); YouTubePlayerView youTubePlayerView = (YouTubePlayerView) findViewById (R.id.YouTubePlayer); // Zainicjuj odtwarzacz YouTube // youTubePlayerView.initialize (YOUR_API_KEY, nowy YouTubePlayer.OnInitializedListener () {@Override // Jeśli odtwarzacz YouTube został pomyślnie zainicjowany ... // public void onInitializationSuccess (YouTubePlayer.Provider dostawca, YouTubePlayer youTubePlayer, boolean b) {//.. następnie zacznij odtwarzanie następującego filmu // youTubePlayer.loadVideo („hJLBcViaX8Q”);} @Override // Jeśli inicjalizacja się nie powiedzie ... // public void onInitializationFailure (dostawca YouTubePlayer.Provider, YouTubeInitializationResult youTubeInitializationResult) {//... następnie wyświetl toast // Toast.makeText (MainActivity.this, „Wystąpił błąd”, Toast.LENGTH_SHORT) .show ();}}); }}
Testowanie interfejsu API YouTube Android Player
Możesz przetestować tę aplikację na fizycznym smartfonie lub tablecie z Androidem lub AVD. Jeśli używasz AVD, upewnij się, że używasz obrazu systemu zawierającego usługi Google Play. Aplikacja YouTube musi być również zainstalowana na AVD lub fizycznym urządzeniu z Androidem, ponieważ interfejs API YouTube opiera się na usłudze rozpowszechnianej w ramach aplikacji YouTube na Androida.
Zainstaluj projekt na swoim urządzeniu, a wideo z YouTube powinno zacząć się automatycznie, gdy tylko aplikacja się załaduje. Po dotknięciu filmu uzyskasz dostęp do wszystkich znanych elementów sterujących YouTube, których możesz używać do wstrzymywania, odtwarzania, szybkiego przewijania do przodu i do tyłu.
Wyświetlaj zawartość Dailymotion w WebView
Jeśli chodzi o osadzanie filmów w aplikacji na Androida, istnieje szeroka gama platform udostępniania wideo, z których możesz wybierać, a niektóre platformy opracowały nawet zestawy SDK przeznaczone do pomocy w interakcji z ich treściami - w tym Dailymotion.
Zestaw Dailymotion Player SDK dla Androida zapewnia cienkie opakowanie wokół komponentu WebView Androida, co ułatwia osadzanie filmów Dailymotion w aplikacjach.
W tej sekcji pokażę, jak przesyłać strumieniowo dowolny film ze strony Dailymotion przy użyciu zewnętrznego pakietu SDK Dailymotion Player.
Uzyskaj identyfikator wideo Dailymotion
Najpierw udaj się do Dailymotion, znajdź film, który chcesz wyświetlić, a następnie pobierz jego identyfikator wideo.
Użyję tego filmu poklatkowego z mgły, który ma następujący adres URL:
www.dailymotion.com/video/x71jlg3
Identyfikator filmu to unikatowy ciąg znaków na końcu jego adresu URL, więc mój identyfikator filmu to: x71jlg3.
Dodanie Dailymotion SDK
Ponieważ używamy Dailymotion SDK, musimy zadeklarować go jako zależność od projektu. Otwórz plik build.gradle projektu i dodaj następujące elementy:
zależności {implementacja fileTree (reż: libs, include:) // Dodaj następującą // implementację com.dailymotion.dailymotion-sdk-android: sdk: implementacja 0.1.29 com.android.support:appcompat-v7:28.0.0 com.android.support:design:28.0.0 implementacja com.android.support.constraint: constraint-layout: 1.1.3 testImplementation junit: junit: 4.12 androidTestImplementation com.android.support.test: runner: 1.0.2}
Po wyświetleniu monitu wybierz opcję „Synchronizuj projekt z plikami stopniowymi”.
Pamiętaj, że domyślnie zestaw Dailymotion SDK zapewnia dostęp tylko do publicznych danych Dailymotion, takich jak tytuł i opis filmu.Możesz wykonać dodatkowe zadania, rejestrując aplikację na platformie Dailymotion, ale ponieważ chcemy tylko osadzić film, nie musimy się martwić rejestracją naszej aplikacji.
Jeśli chcesz dodać więcej funkcji Dailymotion do swoich aplikacji, możesz dowiedzieć się więcej o rejestracji aplikacji w Dailymotion, w oficjalnych dokumentach.
Żądanie dostępu do Internetu
Po raz kolejny przesyłamy strumieniowo treści z sieci WWW, więc nasz projekt wymaga pozwolenia internetowego:
Każde działanie, które wyświetla zawartość Dailymotion, musi mieć atrybut „android: configChanges”, dlatego dodaj do MainActivity:
Dodawanie widżetu PlayerWebView Dailymotion
Głównym składnikiem Dailymotion SDK jest element interfejsu PlayerWebView, który zapewnia cienkie opakowanie wokół komponentu WebView Androida.
Będziemy badać WebViews bardziej szczegółowo w poniższej sekcji, ale WebViews zasadniczo pozwalają ci na osadzenie stron internetowych w twojej aplikacji. Jeśli nie korzystamy ze specjalnego PlayerWebView pakietu SDK, możemy użyć waniliowego komponentu WebView Androida, aby wyświetlić całą stronę internetową Dailymotion w naszej aplikacji.
Zamiast tego dodajmy PlayerWebView do naszego układu:
Konfigurowanie naszego Dailymotion PlayerWebView
Teraz wdrożyliśmy widget PlayerWebView, musimy skonfigurować odtwarzacz w odpowiedniej klasie aktywności.
Otwórz swoją MainActivity i zacznij od uzyskania odniesienia do PlayerWebView:
dailyMotionPlayer = (PlayerWebView) findViewById (R.id.dailymotionPlayer);
Następnie wywołaj „dailyMotionPlayer.load” i przekaż identyfikator wideo, który pobraliśmy wcześniej:
dailyMotionPlayer.load („x71jlg3”);
To daje nam następujące rzeczy:
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; klasa publiczna MainActivity rozszerza AppCompatActivity {private PlayerWebView dailyMotionPlayer; @Override chronione void onCreate (pakiet saveInstanceState) {super.onCreate (saveInstanceState); setContentView (R.layout.activity_main); // Odzyskaj nasz PlayerWebView // dailyMotionPlayer = (PlayerWebView) findViewById (R.id.dailymotionPlayer); Mapa Zainstaluj swój projekt na fizycznym urządzeniu z Androidem lub emulatorze, a wideo Dailymotion powinno zacząć się automatycznie odtwarzać. 
Osadzanie wideo Vimeo
Jeśli chodzi o osadzanie treści wideo, zwykle w miarę możliwości należy używać interfejsu API specyficznego dla platformy lub zestawu SDK dla platformy. Ale co, jeśli nie ma dostępnego zestawu SDK ani interfejsu API dla platformy udostępniania wideo, o której myślisz?
W tych scenariuszach możesz użyć komponentu WebView Androida, aby wyświetlić wideo jako stronę internetową osadzoną w układzie Twojej aktywności. W tej ostatniej sekcji pokażę Ci, jak osadzić wideo z popularnej platformy Vimeo za pomocą WebView.
Oprócz wyświetlania treści wideo WebView może być przydatny w wielu innych scenariuszach. Wyobraź sobie na przykład, że masz treści, które wymagają regularnej aktualizacji; hosting tych treści online, a następnie wyświetlenie ich w aplikacji za pośrednictwem WebView daje możliwość zmiany tych treści online w dowolnym momencie, bez konieczności publikowania nowej wersji aplikacji. Zachowaj jednak ostrożność podczas korzystania z WebViews, ponieważ nie obsługują one wielu funkcji, których zwykle można oczekiwać od samodzielnej przeglądarki internetowej. W szczególności WebView nie ma paska adresu ani elementów sterujących nawigacyjnych, co może utrudniać użytkownikom interakcję z ich treścią.
Przed użyciem WebView zawsze powinieneś rozważyć, czy alternatywne rozwiązanie może być bardziej odpowiednie, na przykład możesz przenieść zawartość do domyślnej przeglądarki internetowej urządzenia lub zaimplementować niestandardowe karty Chrome.
Aktualizacja manifestu
Ponieważ przesyłamy strumieniowo wideo z Internetu, musimy dodać uprawnienie internetowe do naszego manifestu:
Zamierzam również uruchomić MainActivity w trybie poziomym:
Dodanie WebView do naszego interfejsu użytkownika
Następnie dodajmy WebView do naszej aplikacji. Możemy albo dodać WebView do układu naszej Aktywności, albo przekształcić całą Aktywność w WebView, implementując go w metodzie onCreate () naszej aplikacji.
Dodam WebView do układu naszej aplikacji:
Wybierz swój film
Po raz kolejny potrzebujemy filmu do wyświetlenia, ale tym razem jesteśmy nie za pomocą identyfikatora wideo:
- Udaj się do Vimeo i wybierz film, którego chcesz użyć; Zdecydowałem się na ten zimowy upływ czasu.
- Kliknij przycisk „Udostępnij”.
- Wybierz ikonę „Osadź”; zapewni Ci to kod do osadzenia, który powinien wyglądać mniej więcej tak:
Ten kod zawiera następujące informacje:
- iframe. Określa, że osadzamy inną stronę HTML w bieżącym kontekście.
- src. Ścieżka filmu, aby Twoja aplikacja wiedziała, gdzie go znaleźć.
- szerokość wysokość. Wymiary wideo.
- Brzeg ramki. Określa, czy wyświetlać ramkę wokół klatki filmu. Możliwe wartości to border (1) i no border (0).
- Zezwól na tryb pełnoekranowy. Umożliwia to wyświetlanie wideo w trybie pełnoekranowym.
Zamierzam dodać ten kod do osadzenia do mojego projektu jako ciąg, więc musisz skopiować / wkleić te informacje do następującego szablonu:
Ciąg vimeoVideo = "
TWOJE LINK JEST TUTAJ';Frustrujące jest to, że musimy wprowadzić kilka zmian, aby kod do osadzenia był zgodny z naszą aplikacją na Androida. Najpierw musimy dodać kilka znaków „”, aby Android Studio nie narzekało na nieprawidłowe formatowanie:
Ciąg vimeoVideo = "
';Wreszcie domyślne wymiary wideo mogą być zbyt duże dla niektórych ekranów smartfonów z Androidem.
W produkcji zwykle eksperymentujesz z różnymi wymiarami, aby zobaczyć, co zapewnia najlepsze wyniki, na jak największej liczbie różnych konfiguracji ekranu. Aby jednak nie dopuścić do tego, aby ten artykuł wymknął się spod kontroli, skorzystam z następujących elementów, które powinny zapewnić dobre wyniki na „typowym” ekranie smartfona z Androidem:
Ciąg vimeoVideo = "
';Wyświetlanie strony internetowej w aplikacji na Androida
Teraz stworzyliśmy nasz układ i mamy gotowy HTML do działania, otwórz MainActivity i pozwól zaimplementować nasz WebView.
Zacznij od dodania ciągu HTML:
Ciąg vimeoVideo = "
';Następnie musimy załadować powyższą stronę internetową do naszego WebView, używając metody loadUrl ():
webView.loadUrl (request.getUrl (). toString ());
JavaScript jest domyślnie wyłączony, więc musimy go włączyć w naszym WebView.
Za każdym razem, gdy tworzysz WebView, automatycznie przypisywany jest mu zestaw domyślnych ustawień WebSettings. Odzyskamy ten obiekt WebSettings, używając metody getSettings (), a następnie włączymy JavaScript, używając setJavaScriptEnabled ().
WebSettings webSettings = webView.getSettings (); webSettings.setJavaScriptEnabled (true);
Po dodaniu tego wszystkiego do MainActivity kod powinien wyglądać mniej więcej tak:
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; klasa publiczna MainActivity rozszerza AppCompatActivity {@Override chroniony void onCreate (pakiet saveInstanceState) {super.onCreate (saveInstanceState); setContentView (R.layout.activity_main); Ciąg vimeoVideo = "
"; WebView webView = (WebView) findViewById (R.id.myWebView); webView.setWebViewClient (nowy WebViewClient () {@Override public boolean powinienOverrideUrlLoading (WebView webView, żądanie WebResourceRequest) {webView.loadUrl (request.getUrling). ()); return true;}}); WebSettings webSettings = webView.getSettings (); webSettings.setJavaScriptEnabled (true); webView.loadData (vimeoVideo, "text / html", "utf-8");}}Testowanie aplikacji Vimeo
Znasz już ćwiczenie: zainstaluj ten projekt na fizycznym urządzeniu z Androidem lub AVD. WebView nie jest ustawiony na automatyczne odtwarzanie, więc musisz dotknąć wideo, aby odsłonić sterowanie multimediami Vimeo. Następnie możesz odtwarzać, wstrzymywać, przewijać i przewijać wideo, aby upewnić się, że działa poprawnie.
Podsumowując
W tym artykule pokazałem, jak dodawać filmy YouTube, Vimeo i Dailymotion do swoich aplikacji, używając specyficznych dla platformy interfejsów API i SDK oraz własnego komponentu WebView dla Androida. Pokazałem również, jak spakować plik wideo z aplikacją, aby można go było przechowywać i odtwarzać lokalnie.
Jaki jest twój ulubiony sposób wyświetlania użytkownikom treści multimedialnych? Daj nam znać w komentarzach poniżej!
