В жизни каждого мессенджера наступает момент, когда нужно добавить поддержку видео с различных видеохостингов. Сегодня я расскажу вам, как это сделать с помощью oEmbed.

Почему oEmbed, а не что-то другое?

  • Добавление API каждого отдельного поставщика видео делает приложение все более сложным и тяжелым.
  • Парсинг страниц видеопровайдеров занимает больше времени и дает тот же результат, что и использование oEmbed API.
  • Хорошая архитектура позволяет легко добавлять новые видеохосты в течение получаса.

Что такое oEmbed?

Из Википедии:

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

Если вкратце, то oEmbed API позволит нам получать данные о видео, конечно, если oEmbed API реализован в нужном нам видеохосте.

Итак, каковы наши следующие шаги, чтобы добиться успеха? 🤔

  1. Узнайте, поддерживает ли видеохостинг oEmbed. Этот сайт (https://oembed.com/) может частично помочь нам в этом разобраться.
    Найдите ссылку для доступа к oEmbed API.
  2. Создайте шаблон регулярного выражения, чтобы найти идентификатор видео в ссылке на видео.
  3. Сделайте запрос, получите модель ответа и создайте модель POJO из ответа.
  4. Придумайте модель предварительного просмотра, чтобы стандартизировать все ответы от всех хостов.
  5. Превратите модель POJO в модель предварительного просмотра, которую мы придумали.
  6. Откройте видео, как это делает Telegram.

Пример: Как решить проблему со ссылкой с YouTube

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

1. Узнайте, поддерживает ли видеохостинг oEmbed

Я провел много часов в Интернете, чтобы найти ответ «Поддерживает ли YouTube oEmbed» и первая же ссылка в гугле дала мне ответ.

Ссылка для YouTube oEmbed выглядит следующим образом:
https://www.youtube.com/oembed?url=$url&format=json

  • $url — это URL (вау!) для какого-то видео;
  • format=jsonуказывает, что ответ будет использовать MIME-тип application/json.

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

2. Создайте шаблон регулярного выражения, чтобы найти идентификатор видео в ссылке на видео.

Прежде чем приступить к решению этой задачи, нам необходимо ответить на несколько простых вопросов:

  1. Что такое регулярное выражение?
  2. Зачем вообще нужно писать шаблон?

So:

  1. Regex (regexp) – это регулярное выражение (иногда называемое рациональным выражением), представляющее собой последовательность символов, определяющую шаблон поиска. Википедия
  2. Нам нужно найти идентификатор видео в ссылке, чтобы избавиться от ошибок в oEmbed API.
    Некоторые ссылки на видео, которыми обмениваются пользователи, не так чисты, как хотелось бы, и часто содержат дополнительные параметры запроса, из-за чего в API хоста могут появляться непредвиденные ошибки. Поэтому приведем ссылку к условно стандартному виду, который точно работает.

Регулярное выражение видео YouTube:

Удобно, если индекс группы Regex будет равен 1. В этом случае мы можем быть уверены, что наш id нужно искать только в определенной группе Regex.

3. Сделайте запрос, получите модель ответа и создайте модель POJO из ответа.

Ранее мы нашли идентификатор видео, используя наше регулярное выражение. Теперь мы можем создать красивую ссылку для нашего любимого YouTube oEmbed API.

Логично предположить, что все запросы oEmbed используют метод HTTPGET. Попробуем перейти по этой ссылке:
https://www.youtube.com/oembed?url=https://www.youtube.com/watch?v=gGeCZMO4Ex4&format=json

В результате мы получаем данные в формате JSON. И если мы получим ответ, то сможем сделать модель POJO.

4. Придумайте модель предварительного просмотра, чтобы стандартизировать все ответы от всех хостов.

Предположим, что наша предварительная модель выглядит так:

— Для чего эта модель?
— эта модель будет содержать данные для предварительного просмотра видео. У нас будет ссылка на видео, название видео, ссылка на миниатюру, имя хоста, высота, ширина и прочее. В целом всего этого достаточно для отображения превью видео в чате.
— Что такое linkToPlay?
— linkToPlay — это ссылка для открытия встроенного плеера для видеохостинга. Эта ссылка открывает плеер на всю ширину и высоту страницы без отступов, отступов и прочих радостей верстки.
Вот как эта ссылка выглядит для YouTube: https://www.youtube.com/embed/${videoId}.
Возможно, стоит попытаться найти эту ссылку в блоке iframe в ответе на вставку. Но часто вы будете перерыть весь Интернет, чтобы найти его.

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

Мы разобрались с вопросами. Ооооооооооооооооооооооооооооооооооооооооо 👌

Идем дальше: нам нужно стандартизировать все ответы, добавить возможность превратить модель POJO в VideoPreviewModel.

5. Превратите модель POJO в модель предварительного просмотра, которую мы придумали.

1. Создать интерфейс для моделей POJO с функцией преобразования их в VideoPreviewModel

— Почему метод toPreview имеет linkToPlay: String, hostingName: String, videoId: String?
— Потому что эти параметры мы узнаем позже, а видеохостинг может их не знать. Например:

  • linkToPlay найдем в интернете как я писал выше;
  • hostingName и videoId мы укажем благодаря нашему шаблону Regex.

2. Наследуйте BaseVideoResponse в нашей модели POJO:

6. Откройте видео, как это делает Telegram

Когда мы получили VideoPreviewModel, самое простое — открыть linkToPlay и посмотреть видео.

Что нам нужно, чтобы открыть видео:

  • WebView с включенным JavaScript;
  • BottomSheetDialog;
  • Гвозди и молоток (определенно не библиотеки JS).

По сути, нам даже не нужно ничего делать, потому что вариант WebView с javaScriptEnabled = true легко принимает linkToPlay и дает нам встроенный хостинг-плеер.

Осталось только настроить наш BottomSheetDialog и сделать так, как хочет наш заказчик. И он хочет Телеграм, хехе бои…

Время писать код!

Нет, давайте просто пропустим кусок кода. Вот ссылка на пользовательский класс.

Соооо, и все! Ты обалденный! Мы сделали это вместе!
Я так тебя люблю! (⁄ ⁄• ⁄ω⁄• ⁄ ⁄)

Самая крутая часть

Эта часть самая лучшая, потому что вам не нужно писать весь этот код, который я описал в статье.
Дело в том, что пока я собирался с духом писать эту статью, я создал библиотеку и добавил в нее 12,5 самых популярных (по мнению моего менеджера проекта) видео-хостов.



TalbotGooday/Android-Oembed-Video
Простая библиотека для разбора и воспроизведения ссылок с YouTube, YouTube Music, Vimeo и Rutube и других в WebView…github .com



Что мне даст ваша библиотека?

  • Доступ к 12,5 видеохостам
  • Телеграм-подобный просмотр видео из коробки
  • Кэширование запросов
  • Расширяемые шаблоны для добавления новых видеохостов
  • Возможность ничего не делать и получить все готово к использованию
  • Возможность внести свой вклад в открытый исходный код

Пожалуйста, проверьте мою коллекцию видео хостов. Буду очень благодарен за любое дополнение, исправление, за каждую вилку и звездочку (ノ・ω・)ノ

Спасибо, что уделили время моей статье. Удачи!