Зміст

• Як вставити відео YouTube у свій додаток для Android
• Отримання ідентифікатора відео YouTube
• Отримайте відбиток пальця SHA-1 вашого проекту
• Зареєструйтесь на консолі API Google
• Завантажте API програвача YouTube для Android
• Оновіть свій Маніфест
• Побудова макета YouTube Player
• Впровадження програвача YouTube
• 1. Розширення YouTubeBaseActivity
• 2. Ініціалізуйте програвач YouTube
• 3. Запровадити onInitializationSuccess та onInitializationFailure
• Відтворення відео YouTube: Завершений код
• Тестування API програвача YouTube для Android
• Відображення вмісту Dailymotion у веб-перегляді
• Отримайте ідентифікатор відео Dailymotion
• Додавання SDK Dailymotion
• Запит доступу до Інтернету
• Додавання віджета PlayerWebView Dailymotion Dailymotion
• Налаштування нашого Dailymotion PlayerWebView
• Вставлення відео Vimeo
• Оновлення маніфесту
• Додавання WebView до нашого інтерфейсу
• Виберіть своє відео
• Відображення веб-сторінки в додатку для Android
• Тестування програми Vimeo
• Підведенню

Після того, як MediaController видно на екрані, ви можете відтворити, призупинити, перемотати назад і перемотати вперед відео, а також перейти до будь-якої точки кліпу, перетягнувши панель прогресу MediaController.

Як вставити відео YouTube у свій додаток для Android

Вставлення відеофайлу у вашу програму - це прекрасний спосіб забезпечити доступність відео завжди незалежно від підключення до Інтернету пристрою. Однак вбудовування декількох великих відео з високою роздільною здатністю у ваш додаток - це також чудовий спосіб збільшити розмір вашого APK!

Якщо ви стурбовані розміром APK або ваша програма включає в себе відео, які додають додаткові додаткові додатки, ви можете опублікувати ці відео на веб-платформі, а потім передати їх у програму під час виконання програми.

Що стосується публікації відео в Інтернеті, є один веб-сайт, який миттєво виникає на увазі, тому в цьому розділі я покажу вам, як вставити будь-який YouTube-відео у вашому додатку, використовуючи клієнтську бібліотеку API Android Player.

Отримання ідентифікатора відео YouTube

Для початку потрібно визначити, яке відео на YouTube ви хочете відображати, а потім отримати його унікальний ідентифікатор відео.

Ви можете використовувати будь-яке відео YouTube, але я вибираю "Улюблену техніку 2018 року". Завантажте вибране відео та подивіться на його URL-адресу в адресному рядку веб-переглядача, наприклад, URL-адреса для цього відео:

youtube.com/watch?v=hJLBcViaX8Q

Ідентифікатор - це частина URL-адреси, яка однозначно ідентифікує це відео, яка є рядком символів в кінці URL-адреси (в основному все після символу "="). Ідентифікатор відео для цього відео:

hJLBcViaX8Q

Запишіть ідентифікатор вашого відео, як ми будемо використовувати це пізніше.

Отримайте відбиток пальця SHA-1 вашого проекту

Щоб отримати доступ до API програвача YouTube Android Player, вам потрібно створити ключ API з обмеженнями для Android. Це передбачає прив'язку ключа API до унікальної назви пакета та відбитка сертифікату (SHA-1).

Ви можете отримати відбиток пальця SHA-1 вашого проекту через консоль Gradle:

• Виберіть вкладку Gradle в правій частині вікна Android Studio.
• Виберіть модуль "додаток", а потім "Завдання> Android> підписання звіту".

• Відкрийте вкладку "Консоль Gradle", яка відображається в нижній правій частині екрана.
• Консоль Gradle відкриється автоматично. Знайдіть значення SHA-1 у цьому вікні та запишіть його.

Ми використовуємо відбиток сертифіката налагодження, який підходить лише для тестування програми. Перед публікацією програми завжди слід генерувати новий ключ API на основі сертифіката звільнення програми.

Зареєструйтесь на консолі API Google

Перш ніж ви можете скористатись програмою API для програвача Android Android, потрібно зареєструвати свою програму в консолі API API Google:

• Перейдіть до консолі API.
  У заголовку виберіть назву поточного проекту (де курсор розташований на наступному скріншоті).

• У наступному вікні виберіть "Новий проект".
• Дайте назву проекту та натисніть «Створити».
• У меню ліворуч виберіть "Посвідчення".
• Натисніть на синю кнопку "Створити облікові дані", а потім виберіть "Ключ API".
• Ваш ключ API тепер з’явиться у спливаючому вікні, що включає в себе запит про обмеження цього ключа API. Клавіші з обмеженим доступом є більш безпечними, тому, якщо вам спеціально не потрібен необмежений ключ API, виберіть "Обмежити ключ".
• На наступному екрані вкажіть для вашого ключа API характерне ім’я.
• Виберіть перемикач "Програми для Android".
• Натисніть "Додати ім'я пакета та відбиток пальця".
• Скопіюйте / вставте відбиток пальця SHA-1 проекту в наступний розділ, а потім введіть назву пакета вашого проекту (що з’являється у верхній частині кожного файлу класу Java та в Manifest вашого проекту).
• Коли ви задоволені введеною вами інформацією, натисніть "Зберегти".

Завантажте API програвача YouTube для Android

Далі вам потрібно завантажити клієнтську бібліотеку API для Android Player. Під час використання цієї бібліотеки рекомендується ввімкнути ProGuard, щоб ваш APK був максимально легким.

Щоб додати бібліотеку YouTube до вашого проекту:

• Перейдіть на веб-сайт YouTube Android Player та завантажте останню версію.
• Розпакуйте подальший поштовий файл.
• Відкрийте щойно розпаковану папку та перейдіть до її папки "libs" - вона повинна містити файл "YouTubeAndroidPlayerApi.jar".
• В Android Studio переключіться на подання "Проект".
• Щоб переконатися, що бібліотека YouTube включена у ваш шлях створення, вам потрібно буде імпортувати .jar в проект "/ libs ”. Відкрийте папку "app / libs" вашого проекту, а потім перетягніть .jar на місце.

• Відкрийте файл build.gradle та додайте бібліотеку YouTube як залежність від проекту:

залежності {виконання fileTree (реж .: libs, включають:) реалізація com.android.support:appcompat-v7:28.0.0 реалізація 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 // Додати наступні // файли реалізації (libs / YouTubeAndroidPlayerApi.jar)}

• Коли буде запропоновано, синхронізуйте файли Gradle.

Оновіть свій Маніфест

Якщо ваша програма відображатиметься будь-який онлайн-відео-вміст, тоді йому знадобиться доступ до Інтернету.

Відкрийте Маніфест свого проекту та додайте дозвіл в Інтернеті:

Щоб надати користувачеві смак цього кінематографічного, широкоекранного досвіду, я також налаштував MainActivity на запуск у ландшафтному режимі:

Побудова макета YouTube Player

Ви можете показувати відео YouTube, використовуючи:

• YouTubePlayerView. Якщо ви хочете використовувати YouTubePlayerView у своєму макеті, вам знадобиться розширити YouTubeBaseActivity у відповідному класі активності цього макета.
• YouTubePlayerFragment. Це фрагмент, який містить YouTubePlayerView. Якщо ви вирішили реалізувати фрагмент YouTubePlayerFragment, тоді ви не буде повинні поширюватися на YouTubeBaseActivity.

Я буду використовувати YouTubePlayerView, тому відкрийте файл "Activity_main.xml" вашого проекту та додайте віджет YouTubePlayerView:

Впровадження програвача YouTube

Далі відкрийте свою MainActivity та виконайте такі завдання:

1. Розширення YouTubeBaseActivity

Оскільки ми використовуємо YouTubePlayerView у своєму макеті, нам потрібно розширити YouTubeBaseActivity:

MainActivity публічного класу розширює YouTubeBaseActivity {

2. Ініціалізуйте програвач YouTube

Ми ініціалізуємо програвач YouTube за допомогою виклику Initialize () та передачі ключа API, який ми створили раніше:

YouTubePlayerView youTubePlayerView = (YouTubePlayerView) findViewById (R.id.YouTubePlayer); youTubePlayerView.initialize (YOUR_API_KEY, новий YouTubePlayer.OnInitializedListener () {

3. Запровадити onInitializationSuccess та onInitializationFailure

Нарешті, нам потрібно вказати, як повинна реагувати наша програма, залежно від того, чи ініціалізація є успішною, чи невдалою. Якщо програвач YouTube ініціалізований успішно, ми можемо завантажити наше відео, передавши унікальний ідентифікатор відео:

public void onInitializationSuccess (постачальник YouTubePlayer.Provider, YouTubePlayer youTubePlayer, boolean b) {// Вкажіть ідентифікатор відео // youTubePlayer.loadVideo ("hJLBcViaX8Q");

Далі нам потрібно розповісти нашій програмі, як вона має обробляти невдалі ініціалізації. Я збираюся показати тост:

публічна недійсність onInitializationFailure (постачальник YouTubePlayer.Provider, YouTubeInitializationResult youTubeInitializationResult) {Toast.makeText (MainActivity.this, "Виникла помилка", Toast.LENGTH_SHORT). show (); }

Відтворення відео YouTube: Завершений код

Додайте все вищезазначене до своєї MainActivity, і вам слід зробити щось подібне:

імпортувати android.os.Bundle; імпорт android.widget.Toast; імпортувати com.google.android.youtube.player.YouTubeBaseActivity; імпортувати com.google.android.youtube.player.YouTubeInitializationResult; імпортувати com.google.android.youtube.player.YouTubePlayer; імпортувати com.google.android.youtube.player.YouTubePlayerView; // Розширення YouTubeBaseActivity // MainActivity публічного класу розширює YouTubeBaseActivity {// Не забудьте замінити це своїм унікальним ключем API // public static final String YOUR_API_KEY = "YOUR_API_KEY_HERE"; @Override захищений недійсним onCreate (пакет збереженихInstanceState) {super.onCreate (збереженийInstanceState); setContentView (R.layout.activity_main); YouTubePlayerView youTubePlayerView = (YouTubePlayerView) findViewById (R.id.YouTubePlayer); // Ініціалізуйте програвач YouTube // youTubePlayerView.initialize (YOUR_API_KEY, новий YouTubePlayer.OnInitializedListener () {@Override // Якщо програвач YouTube успішно ініціалізується ... // публічне недійсне оновлення Ініціалізація (успіх) (постачальник YouTubePlayer.Provider, YouTubePlayer youTubeoPlayer, b) {//.. Потім почніть відтворювати таке відео // youTubePlayer.loadVideo ("hJLBcViaX8Q");} @Override // Якщо ініціалізація не вдасться ... // публічна недійсність onInitializationFailure (YouTubePlayer.Provider провайдер, YouTubeInitializationResult youTubeInitializationResult) {//... тоді відобразити тост // Toast.makeText (MainActivity.this, "Виникла помилка", Toast.LENGTH_SHORT) .show ();}}); }}

Тестування API програвача YouTube для Android

Ви можете протестувати цю програму на фізичному смартфоні або планшеті Android або на AVD. Якщо ви використовуєте AVD, переконайтеся, що ви використовуєте зображення системи, що включає служби Google Play. Додаток YouTube також має бути встановлено на AVD або фізичному пристрої Android, оскільки API YouTube покладається на службу, яка розповсюджується як частина додатка YouTube для Android.

Встановіть проект на свій пристрій, і відео YouTube має почати відтворюватися автоматично, як тільки програма завантажиться. Якщо ви торкнетесь відео, ви отримаєте доступ до всіх звичних елементів управління YouTube, які ви можете використовувати для паузи, відтворення, перемотування вперед та назад.

Відображення вмісту Dailymotion у веб-перегляді

Що стосується вбудовування відео у додаток для Android, існує широкий спектр платформ для обміну відео, які ви можете вибрати, а деякі платформи навіть створили SDK, призначені для того, щоб допомогти вам взаємодіяти зі своїм вмістом, включаючи Dailymotion.

SDK Dailymotion Player SDK для Android забезпечує тонку обгортку навколо компонента WebView Android, що полегшує вбудовування відео Dailymotion у ваші програми.

У цьому розділі я покажу вам, як передавати будь-яке відео з веб-сайту Dailymotion, використовуючи сторонній пакет SDK Dailymotion Player.

Отримайте ідентифікатор відео Dailymotion

По-перше, перейдіть до Dailymotion, знайдіть відео, яке ви хочете показати, а потім отримайте його ідентифікатор відео.

Я використовую цей проміжок часу із туманом, який має таку URL-адресу:

www.dailymotion.com/video/x71jlg3

Ідентифікатор відео - це унікальний рядок символів в кінці його URL-адреси, тому мій ідентифікатор відео: x71jlg3.

Додавання SDK Dailymotion

Оскільки ми використовуємо пакет SDK Dailymotion, нам потрібно оголосити це як залежність від проекту. Відкрийте файл build.gradle проекту та додайте наступне:

залежності ({file fileTree (dir: libs, include:) // Додати наступні // реалізація com.dailymotion.dailymotion-sdk-android: sdk: 0.1.29 виконання com.android.support:appcompat-v7:28.0.0 реалізація com.android.support:design:28.0.0 реалізація com.android.support.constraint: макет обмежень: 1.1.3 тест виконання: липень: 4.12 androidTestImplementation com.android.support.test: runner: 1.0.2}

За запитом виберіть "Синхронізувати проект з файлами Gradle".

Зауважте, що SDK Dailymotion за замовчуванням надає лише доступ до публічних даних Dailymotion, таких як назва та опис відео.Ви можете виконати деякі додаткові завдання, зареєструвавши свою програму на платформі Dailymotion, але оскільки ми просто хочемо вставити відео, нам не потрібно турбуватися про реєстрацію нашої програми.

Якщо вам цікаво додавати більше функцій Dailymotion у свої додатки, ви можете дізнатися більше про реєстрацію своєї програми за допомогою Dailymotion на офіційних документах.

Запит доступу до Інтернету

Знову ми передаємо вміст із всесвітньої мережі Інтернет, тому наш проект вимагає дозволу в Інтернеті:

Кожна активність, яка відображає вміст Dailymotion, повинна мати атрибут "android: configChanges", тому додайте до свого MainActivity наступне:

Додавання віджета PlayerWebView Dailymotion Dailymotion

Основним компонентом SDK Dailymotion є елемент інтерфейсу PlayerWebView, який забезпечує тонку обгортку навколо компонента WebView Android.

Ми будемо детальніше вивчати WebView в наступному розділі, але WebView, по суті, дасть вам змогу вставляти веб-сторінки у вашу програму. Якщо ми не використовували спеціалізований програвач PlayerWebView від SDK, ми можемо використовувати ванільний компонент WebView для Android для відображення всієї веб-сторінки Dailymotion у нашій програмі.

Натомість додамо PlayerWebView до нашого макета:

Налаштування нашого Dailymotion PlayerWebView

Тепер ми реалізували віджет PlayerWebView, нам потрібно налаштувати програвач у відповідному класі активності.

Відкрийте MainActivity і почніть з посилання на PlayerWebView:

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

Потім зателефонуйте "dailyMotionPlayer.load" і передайте йому ідентифікатор відео, який ми отримали раніше:

dailyMotionPlayer.load ("x71jlg3");

Це дає нам таке:

імпортувати android.support.v7.app.AppCompatActivity; імпортувати android.os.Bundle; імпортувати com.dailymotion.android.player.sdk.PlayerWebView; імпорт java.util.HashMap; імпорт java.util.Map; публічний клас MainActivity розширює AppCompatActivity {приватний PlayerWebView dailyMotionPlayer; @Override захищений недійсним onCreate (пакет збереженихInstanceState) {super.onCreate (збереженийInstanceState); setContentView (R.layout.activity_main); // Отримайте наш PlayerWebView // dailyMotionPlayer = (PlayerWebView) findViewById (R.id.dailymotionPlayer); Карта playerParams = новий HashMap <> (); // Завантажте відео з нашими параметрами // playerParams.put ("ключ", "значення"); // Передати ідентифікатор відео // dailyMotionPlayer.load ("x71jlg3"); }}

Встановіть свій проект на фізичний пристрій Android або емулятор, і ваше відео Dailymotion має почати відтворюватися автоматично.

Вставлення відео Vimeo

Що стосується вбудовування відеоконтенту, зазвичай потрібно використовувати платформу API або SDK для платформи, де це можливо. Але що робити, якщо у вас немає пам’яті SDK чи API для платформи відеообміну, про яку ви пам’ятаєте?

У цих сценаріях ви можете використовувати компонент WebView Android для відображення відео як веб-сторінки, вбудованої у макет вашої активності. У цьому останньому розділі я покажу вам, як вставити відео з популярної платформи Vimeo за допомогою WebView.

Окрім показу відеоконтенту, WebViews може бути корисним у ряді інших сценаріїв. Наприклад, уявіть, що у вас є якийсь контент, який потрібно регулярно оновлювати; розміщення цього вмісту в Інтернеті, а потім його відображення у вашій програмі через WebView дає можливість змінювати цей вміст в Інтернеті в будь-який час без необхідності публікувати нову версію свого додатка. Однак будьте обережні, використовуючи WebViews, оскільки вони не підтримують багато функцій, яких ви зазвичай очікуєте від автономного веб-браузера. Зокрема, у веб-переглядах відсутній адресний рядок або навігаційні елементи керування, що може ускладнити їхній вміст для взаємодії з користувачами.

Перш ніж використовувати WebView, слід завжди розглянути питання про те, чи може бути альтернативнішим рішення альтернативне рішення, наприклад, ви можете завантажити вміст у веб-браузер за замовчуванням на пристрої або застосувати спеціальні вкладки Chrome.

Оновлення маніфесту

Оскільки ми передаємо відео з Інтернету, нам потрібно додати Інтернет-дозвіл на наш Маніфест:

Я також запускаю MainActivity в ландшафтному режимі:

Додавання WebView до нашого інтерфейсу

Далі додамо WebView до нашої програми. Ми можемо або додати веб-перегляд до макета нашої діяльності, або перетворити всю активність у веб-перегляд, реалізуючи її в методі onCreate () нашої програми.

Я додам WebView до макета нашої програми:

Виберіть своє відео

Ще раз нам потрібне відео для показу, але цього разу ми є ні за допомогою ідентифікатора відео:

• Перейдіть до Vimeo та виберіть відео, яке ви хочете використовувати; Я вибрав цей зимовий проміжок часу.
• Натисніть кнопку "Поділитися".
• Виберіть піктограму «Вставити»; це надасть вам вбудований код, який повинен виглядати приблизно так:

Цей код надає таку інформацію:

• iframe Вказує, що ми вставляємо іншу сторінку HTML у поточний контекст.
• src. Шлях відео, тому ваша програма знає, де знайти це відео.
• ширина висота. Розміри відео
• рамка. Чи відображати рамку навколо кадру відео. Можливі значення - межа (1) і без кордону (0).
• Повний екран. Це дозволяє відображати відео в повноекранному режимі.

Я додам цей вбудований код до свого проекту як рядок, тому вам потрібно скопіювати / вставити цю інформацію в такий шаблон:

Рядок vimeoVideo = "ВАША ПОСИЛАННЯ ТУТ ТУТ';

Розчаровуючи, нам потрібно внести кілька змін, перш ніж вбудований код буде сумісний з нашою програмою Android. Спочатку нам потрібно додати кілька символів "", щоб Android Studio не скаржився на неправильне форматування:

Рядок vimeoVideo = "';

Нарешті, параметри відео за замовчуванням можуть бути занадто великими для деяких екранів смартфонів Android.
У виробництві ви зазвичай експериментуєте з різними розмірами, щоб побачити, що дає найкращі результати в якомога більше різних конфігураціях екрана. Однак, щоб уникнути контролю над цією статтею, я просто використаю наступне, що має забезпечити хороші результати на вашому "типовому" екрані смартфона Android:

Рядок vimeoVideo = "';

Відображення веб-сторінки в додатку для Android

Тепер ми створили наш макет і готові до запуску наш HTML, відкрили вашу MainActivity і дозволимо реалізувати наш WebView.

Почніть з додавання рядка HTML:

Рядок vimeoVideo = "';

Далі нам потрібно завантажити вищевказану веб-сторінку в наш WebView, використовуючи метод loadUrl ():

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

JavaScript відключений за замовчуванням, тому нам потрібно буде включити його в нашому WebView.

Кожен раз, коли ви створюєте WebView, йому автоматично призначається набір веб-налаштувань за замовчуванням. Ми отримаємо цей об’єкт WebSettings, використовуючи метод getSettings (), а потім увімкніть JavaScript, використовуючи setJavaScriptEnabled ().

WebSettings webSettings = webView.getSettings (); webSettings.setJavaScriptEnabled (вірно);

Додавши все це до своєї MainActivity, ваш код повинен виглядати приблизно так:

імпортувати android.support.v7.app.AppCompatActivity; імпортувати android.os.Bundle; імпортувати android.webkit.WebResourceRequest; імпортувати android.webkit.WebSettings; імпортувати android.webkit.WebView; імпортувати android.webkit.WebViewClient; публічний клас MainActivity розширює AppCompatActivity {@Override, захищений недійсним onCreate (пакет збереженихInstanceState) {super.onCreate (збереженийInstanceState); setContentView (R.layout.activity_main); Рядок vimeoVideo = ""; WebView webView = (WebView). ()); return true;}}); WebSettings webSettings = webView.getSettings (); webSettings.setJavaScriptEnabled (true); webView.loadData (vimeoVideo, "text / html", "utf-8");}}

Тестування програми Vimeo

Наразі ви вже знаєте: встановіть цей проект на фізичному пристрої Android або AVD. WebView не налаштовано для автоматичного відтворення, тому вам потрібно буде натиснути на відео, щоб розкрити засоби управління мультимедіа Vimeo. Потім ви можете відтворити, призупинити, перемотувати назад і перемотати вперед, щоб переконатися, що воно працює правильно.

Підведенню

У цій статті я показав вам, як додати відео YouTube, Vimeo та Dailymotion до своїх додатків, використовуючи API та SDK, орієнтовані на платформу, та власний компонент WebView Android. Я також показав вам, як поєднати відеофайл зі своєю програмою, щоб він міг зберігатись та відтворюватися локально.

Який ваш улюблений спосіб відображення мультимедійного вмісту своїм користувачам? Повідомте нас у коментарях нижче!