Содержание

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

Когда MediaController виден на экране, вы можете воспроизводить, приостанавливать, перематывать и перематывать видео вперед и переходить к любой точке клипа, перетаскивая индикатор выполнения MediaController.

Как встроить видео YouTube в ваше приложение для Android

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

Если вас беспокоит размер APK или ваше приложение содержит видео, в которые были добавлены дополнительные материалы, вы можете опубликовать эти видео на онлайн-платформе и затем транслировать их через свое приложение во время выполнения.

Когда дело доходит до публикации видео в Интернете, тут сразу приходит на ум один веб-сайт, поэтому в этом разделе я покажу вам, как встраивать любой Видео YouTube в вашем приложении с помощью клиентской библиотеки API YouTube Player Player.

Получение идентификатора видео YouTube

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

Вы можете использовать любое видео на YouTube, но я выбираю «Избранные технологии 2018 года». Загрузите выбранное видео и посмотрите его URL в адресной строке браузера, например, URL для видео:

youtube.com/watch?v=hJLBcViaX8Q

Идентификатор - это часть URL-адреса, которая однозначно идентифицирует это видео. Это строка символов в конце URL-адреса (в основном, все после символа «=»). Идентификатор видео для видео:

hJLBcViaX8Q

Запишите идентификатор вашего видео, так как мы будем использовать его позже.

Получите отпечаток SHA-1 вашего проекта

Чтобы получить доступ к API проигрывателя YouTube для Android, вам необходимо создать ключ API с ограничениями Android. Это включает в себя привязку ключа API к уникальному имени вашего проекта и отпечатку сертификата (SHA-1).

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

• Выберите вкладку Gradle в правой части окна Android Studio.
• Выберите модуль «приложение», а затем «Задачи> Android> signatureReport».

• Откройте вкладку Gradle Console, которая появляется в правом нижнем углу экрана.
• Консоль Gradle откроется автоматически. Найдите значение SHA-1 в этом окне и запишите его.

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

Зарегистрируйтесь в Google API Console

Прежде чем вы сможете использовать API YouTube Player Player, вам нужно зарегистрировать свое приложение в консоли API Google:

• Перейдите на консоль API.
  В заголовке выберите название вашего текущего проекта (где курсор расположен на следующем скриншоте).

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

Загрузить API YouTube Player Player

Затем вам необходимо загрузить клиентскую библиотеку API YouTube Player Player. При использовании этой библиотеки рекомендуется включить ProGuard, чтобы максимально упростить APK.

Чтобы добавить библиотеку YouTube в свой проект:

• Перейдите на сайт YouTube Android Player и загрузите последнюю версию.
• Распакуйте последующий zip-файл.
• Откройте недавно распакованную папку и перейдите в ее подпапку «libs» - она ​​должна содержать файл «YouTubeAndroidPlayerApi.jar».
• В Android Studio переключитесь в представление «Проект».
• Чтобы библиотека YouTube была включена в ваш путь сборки, вам нужно импортировать файл .jar в «/ libs ». Откройте папку «app / libs» вашего проекта, а затем перетащите .jar в нужное положение.

• Откройте файл build.gradle и добавьте библиотеку YouTube в качестве зависимости проекта:

зависимости {реализация fileTree (dir: libs, include:) реализация com.android.support:appcompat-v7:28.0.0 реализация com.android.support:design:28.0.0 реализация com.android.support.constraint: компоновка ограничений : 1.1.3 testImplementation junit: junit: 4.12 androidTestImplementation com.android.support.test: runner: 1.0.2 // Добавить следующие // файлы реализации (libs / YouTubeAndroidPlayerApi.jar)}

• При появлении запроса синхронизируйте файлы Gradle.

Обновите свой манифест

Если ваше приложение будет отображаться любой онлайн-видео, тогда вам понадобится доступ к Интернету.

Откройте Manifest вашего проекта и добавьте интернет-разрешение:

Чтобы дать пользователю почувствовать этот кинематографический широкоэкранный опыт, я также настраиваю MainActivity для запуска в ландшафтном режиме:

Создание макета YouTube Player

Вы можете отобразить видео YouTube, используя либо:

• YouTubePlayerView. Если вы хотите использовать YouTubePlayerView в своем макете, вам необходимо расширить YouTubeBaseActivity в соответствующем классе Activity этого макета.
• YouTubePlayerFragment. Это фрагмент, который содержит YouTubePlayerView. Если вы решите реализовать YouTubePlayerFragment, то вы не будет должны расширяться от YouTubeBaseActivity.

Я буду использовать YouTubePlayerView, поэтому откройте файл «activity_main.xml» вашего проекта и добавьте виджет YouTubePlayerView:

Реализация проигрывателя YouTube

Затем откройте ваш MainActivity и выполните следующие задачи:

1. Расширьте YouTubeBaseActivity

Так как мы используем YouTubePlayerView в нашем макете, нам нужно расширить YouTubeBaseActivity:

открытый класс MainActivity расширяет YouTubeBaseActivity {

2. Инициализируйте YouTube Player

Мы инициализируем YouTube Player, вызывая 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, логическое значение b) {// Укажите идентификатор видео // youTubePlayer.loadVideo ("hJLBcViaX8Q");

Далее нам нужно сообщить нашему приложению, как оно должно обрабатывать неудачные инициализации. Я собираюсь показать тост:

public void onInitializationFailure (поставщик YouTubePlayer.Provider, YouTubeInitializationResult youTubeInitializationResult) {Toast.makeText (MainActivity.this, «Произошла ошибка», Toast.LENGTH_SHORT) .show (); }

Воспроизведение видео на YouTube: завершенный код

Добавьте все вышеперечисленное в ваш MainActivity, и у вас должно получиться что-то вроде этого:

импорт android.os.Bundle; импорт android.widget.Toast; import com.google.android.youtube.player.YouTubeBaseActivity; import com.google.android.youtube.player.YouTubeInitializationResult; import 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 protected void onCreate (Bundle saveInstanceState) {super.onCreate (сохраненныйInstanceState); setContentView (R.layout.activity_main); YouTubePlayerView youTubePlayerView = (YouTubePlayerView) findViewById (R.id.YouTubePlayer); // Инициализация проигрывателя YouTube // youTubePlayerView.initialize (YOUR_API_KEY, new YouTubePlayer.OnInitializedListener () {@Override // Если проигрыватель YouTube успешно инициализирован ... // public void onInitializationSuccess (поставщик YouTubePlayer.Provider, YouTubePlayer youTubePlayer, логический) b) {//.. затем начните воспроизведение следующего видео // youTubePlayer.loadVideo ("hJLBcViaX8Q");} @Override // Если инициализация не удалась ... // public void onInitializationFailure (поставщик YouTubePlayer.Provider, YouTubeInitializationResult youTubeInitializationResult) {//...then отображение тоста // Toast.makeText (MainActivity.this, «Произошла ошибка», Toast.LENGTH_SHORT) .show ();}}); }}

Тестирование API YouTube Android Player

Вы можете протестировать это приложение на физическом смартфоне или планшете Android или на AVD. Если вы используете AVD, убедитесь, что вы используете системный образ с сервисами Google Play. Приложение YouTube также должно быть установлено на AVD или физическом устройстве Android, так как API YouTube использует сервис, который распространяется как часть приложения YouTube для Android.

Установите проект на свое устройство, и видео YouTube должно начать воспроизводиться автоматически, как только загрузится приложение. Если вы нажмете на видео, вы получите доступ ко всем знакомым элементам управления YouTube, которые можно использовать для приостановки, воспроизведения, быстрой перемотки вперед и перемотки видео.

Отображение контента Dailymotion в веб-представлении

Когда дело доходит до встраивания видео в ваше приложение для Android, вы можете выбирать из широкого спектра платформ для обмена видео, и некоторые платформы даже выпустили SDK, предназначенные для того, чтобы помочь вам взаимодействовать с их контентом, включая Dailymotion.

Dailymotion Player SDK для Android представляет собой тонкую оболочку вокруг компонента Android WebView, что упрощает встраивание видео Dailymotion в ваши приложения.

В этом разделе я покажу вам, как транслировать любое видео с веб-сайта Dailymotion с помощью SDK Dailymotion Player стороннего производителя.

Получить ID видео Dailymotion

Во-первых, зайдите в Dailymotion, найдите видео, которое вы хотите отобразить, а затем получите его идентификатор видео.

Я буду использовать это замедленное видео о тумане, которое имеет следующий URL:

www.dailymotion.com/video/x71jlg3

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

Добавление Dailymotion SDK

Поскольку мы используем Dailymotion SDK, нам нужно объявить его как зависимость проекта. Откройте файл build.gradle вашего проекта и добавьте следующее:

dependencies {реализация 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 testImplementation junit: junit: 4.12 androidTestImplementation com.android.support.test: runner: 1.0.2}

При появлении запроса выберите «Синхронизировать проект с файлами Gradle».

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

Если вам интересно добавить больше функциональности Dailymotion в свои приложения, вы можете узнать больше о регистрации приложения в Dailymotion в официальных документах.

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

Еще раз, мы транслируем контент из World Wide Web, поэтому нашему проекту требуется разрешение на Интернет:

Каждое действие, которое отображает содержимое Dailymotion, должно иметь атрибут «android: configChanges», поэтому добавьте следующее в MainActivity:

Добавление виджета PlayerWebView для Dailymotion

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

Мы рассмотрим WebViews более подробно в следующем разделе, но WebViews, по сути, дают вам возможность встроить веб-страницы в ваше приложение. Если бы мы не использовали специализированный PlayerWebView SDK, то мы могли бы использовать ванильный компонент WebView Android для отображения всей веб-страницы Dailymotion в нашем приложении.

Вместо этого давайте добавим PlayerWebView в наш макет:

Настройка нашего Dailymotion PlayerWebView

Теперь мы реализовали виджет PlayerWebView, нам нужно настроить проигрыватель в нашем соответствующем классе Activity.

Откройте MainActivity и начните с получения ссылки на PlayerWebView:

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

Затем вызовите «dailyMotionPlayer.load» и передайте ему идентификатор видео, который мы получили ранее:

dailyMotionPlayer.load ( "x71jlg3");

Это дает нам следующее:

import android.support.v7.app.AppCompatActivity; импорт android.os.Bundle; import com.dailymotion.android.player.sdk.PlayerWebView; import java.util.HashMap; импорт java.util.Map; открытый класс MainActivity расширяет AppCompatActivity {private PlayerWebView dailyMotionPlayer; @Override protected void onCreate (Bundle saveInstanceState) {super.onCreate (сохраненныйInstanceState); setContentView (R.layout.activity_main); // Получить наш PlayerWebView // dailyMotionPlayer = (PlayerWebView) findViewById (R.id.dailymotionPlayer); карта playerParams = new HashMap <> (); // Загружаем видео с нашими параметрами // playerParams.put ("key", "value"); // Передаем идентификатор видео // dailyMotionPlayer.load ("x71jlg3"); }}

Установите ваш проект на физическое устройство или эмулятор Android, и ваше видео Dailymotion должно начать воспроизводиться автоматически.

Встраивание видео Vimeo

Когда дело доходит до встраивания видеоконтента, вы, как правило, хотите использовать API-интерфейс для конкретной платформы или SDK для конкретной платформы, где это возможно. Но что, если нет доступного SDK или API для платформы обмена видео, которую вы имеете в виду?

В этих сценариях вы можете использовать компонент Android WebView для отображения видео в виде веб-страницы, встроенной в макет вашей активности. В этом последнем разделе я покажу вам, как встроить видео с популярной платформы Vimeo с помощью WebView.

В дополнение к отображению видеоконтента WebViews могут быть полезны в ряде других сценариев. Например, представьте, что у вас есть контент, который нужно регулярно обновлять; размещение этого контента в Интернете с последующим отображением его в приложении через WebView дает вам возможность в любой момент изменить этот контент в режиме онлайн, не публикуя новую версию своего приложения. Однако будьте осторожны при использовании WebView, поскольку они не поддерживают многие функции, которые вы обычно ожидаете от автономного веб-браузера. В частности, в WebView нет адресной строки или навигационных элементов управления, которые могут затруднять взаимодействие с контентом.

Перед использованием WebView вы всегда должны подумать о том, может ли быть более подходящим альтернативное решение, например, вы можете выгрузить контент в веб-браузер устройства по умолчанию или внедрить пользовательские вкладки Chrome.

Обновление манифеста

Поскольку мы транслируем видео из Интернета, нам нужно добавить разрешение на Интернет в наш Манифест:

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

Добавление WebView в наш пользовательский интерфейс

Далее, давайте добавим WebView в наше приложение. Мы можем либо добавить WebView в макет нашей Activity, либо превратить всю Activity в WebView, внедрив его в метод onCreate () нашего приложения.

Я собираюсь добавить WebView в макет нашего приложения:

Выберите свое видео

Еще раз, нам нужно видео для показа, но на этот раз мы не используя идентификатор видео:

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

Этот код предоставляет следующую информацию:

• IFrame. Указывает, что мы встраиваем другую HTML-страницу в текущий контекст.
• ЦСИ. Путь к видео, поэтому ваше приложение знает, где его найти.
• ширина высота. Размеры видео.
• рамка. Отображать ли рамку вокруг кадра видео. Возможные значения: граница (1) и отсутствие границы (0).
• allowfullscreen. Это позволяет видео отображаться в полноэкранном режиме.

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

Строка 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 ваш код должен выглядеть примерно так:

import android.support.v7.app.AppCompatActivity; импорт android.os.Bundle; import android.webkit.WebResourceRequest; импорт android.webkit.WebSettings; импорт android.webkit.WebView; import android.webkit.WebViewClient; открытый класс MainActivity extends AppCompatActivity {@Override protected void onCreate (Bundle saveInstanceState) {super.onCreate (saveInstanceState); setContentView (R.layout.activity_main); Строка vimeoVideo = ""; WebView webView = (WebView) findViewById (R.id.myWebView); webView.setWebViewClient (new WebViewClient () {@Override public boolean shouldOverrideUrlLoading (WebView webView, запрос WebResourceRequest) {webView.loadUrl (request.getUrl () для запроса. ()); вернуть 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. Я также показал вам, как связать видеофайл с вашим приложением, чтобы его можно было хранить и воспроизводить локально.

Какой ваш любимый способ отображения мультимедийного контента для ваших пользователей? Дайте нам знать в комментариях ниже!