Как встраивать видео YouTube в приложения для iOS с помощью библиотеки YouTube Helper

youtube-ios-player-helper – это библиотека с открытым исходным кодом, которая позволяет встраивать проигрыватель YouTube iframe в приложения для iOS. Библиотека создает элемент WebView и мост между кодом Objective-C вашего приложения и кодом JavaScript проигрывателя YouTube, что позволяет приложению iOS управлять проигрывателем YouTube. В этой статье описано, как установить библиотеку и начать использовать ее в приложении для iOS.

Установка

В этой статье предполагается, что вы создали новый проект Single View Application для iOS, предназначенный для последней версии iOS, и что при создании проекта вы добавили следующие файлы:

  • Main.storyboard
  • ViewController.h
  • ViewController.m

Библиотеку можно установить с помощью CocoaPods или скопировать ее и исходные файлы со страницы проекта на GitHub.

  • Библиотеку можно установить с помощью CocoaPods. Кроме того, библиотеку и исходные файлы можно найти на странице проекта на GitHub и скопировать в существующий проект.

Установите библиотеку с помощью CocoaPods

Если в вашем проекте используется CocoaPods, добавьте в Podfile приведенную ниже строку, чтобы установить библиотеку. В этой строке замените x.y.z на последнюю версию pod, которая будет указана на странице проекта в GitHub.

pod "youtube-ios-player-helper", "~> x.y.z"

В командной строке введите pod install, чтобы обновить рабочую область с помощью зависимостей.

Совет. Помните, что при использовании CocoaPods нужно открывать в Xcode файл .xcworkspace, а не .xcodeproj.

Подробнее о CocoaPods…

Как установить библиотеку вручную

Чтобы установить вспомогательную библиотеку вручную, скачайте исходный код по ссылке для скачивания GitHub или клонируйте репозиторий. После того как вы сохраните локальную копию кода, выполните следующие действия:

  1. Откройте пример проекта в Xcode или Finder.

  2. Выберите YTPlayerView.h, YTPlayerView.m и папку Объекты. Если вы откроете рабочую область в Xcode, эти файлы будут доступны в разделах Pods > Development Pods > YouTube-Player-iOS-Helper и Pods > Development Pods > YouTube-Player-iOS-Helper > Resources. В Finder они доступны в корневом каталоге проекта в каталогах Classes и Assets.

  3. Перетащите эти файлы и папки в проект. Убедитесь, что установлен флажок Копировать объекты в папку целевой группы. При перетаскивании папки Assets убедитесь, что установлен флажок Create Folder References for any added folders (Создавать ссылки на папки для всех добавленных папок).

Библиотека должна быть установлена.

Добавьте YTPlayerView с помощью Interface Builder или Storyboard.

Чтобы добавить YTPlayerView с помощью Interface Builder или Storyboard, выполните следующие действия:

  1. Перетащите экземпляр UIView в представление.

  2. Выберите Identity Inspector и измените класс представления на YTPlayerView.

  3. Откройте файл ViewController.h и добавьте следующий заголовок:

    #import “YTPlayerView.h”

    Также добавьте следующее свойство:

    @property(nonatomic, strong) IBOutlet YTPlayerView *playerView;
  4. В Interface Builder создайте подключение от элемента View, определенного на предыдущем шаге, к свойству playerView вашего View Controller.

  5. Теперь откройте файл ViewController.m и добавьте в конец метода viewDidLoad следующий код:

    [self.playerView loadWithVideoId:@"M7lc1UVf-VE"];

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

Управление воспроизведением видео

У метода ViewController::loadWithVideoId: есть вариант loadWithVideoId:playerVars:, который позволяет разработчикам передавать в представление дополнительные переменные проигрывателя. Эти переменные соответствуют параметрам проигрывателя в IFrame Player API. Параметр playsinline позволяет воспроизводить видео непосредственно в области просмотра, а не в полноэкранном режиме. Если видео воспроизводится в строке, содержащее его приложение iOS может программно управлять воспроизведением.

Замените вызов loadWithVideoId: следующим кодом:

NSDictionary *playerVars = @{
  @"playsinline" : @1,
};
[self.playerView loadWithVideoId:@"M7lc1UVf-VE" playerVars:playerVars];

Откройте раскадровку или Interface Builder. Перетащите две кнопки в представление и назовите их Play и Stop. Откройте файл ViewController.h и добавьте следующие методы, которые будут сопоставлены с кнопками:

- (IBAction)playVideo:(id)sender;
- (IBAction)stopVideo:(id)sender;

Теперь откройте файл ViewController.m и определите две функции:

- (IBAction)playVideo:(id)sender {
  [self.playerView playVideo];
}

- (IBAction)stopVideo:(id)sender {
  [self.playerView stopVideo];
}

Большинство функций IFrame Player API имеют эквиваленты на Objective-C, хотя названия некоторых из них могут немного отличаться, чтобы лучше соответствовать правилам написания кода на Objective-C. Исключения составляют методы управления громкостью видео, поскольку они контролируются аппаратным обеспечением телефона или встроенными экземплярами UIView, предназначенными для этой цели, например MPVolumeView.

Откройте раскадровку или Interface Builder и перетащите элементы управления, чтобы подключить кнопки Play и Stop к методам playVideo: и stopVideo:.

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

Обработка обратных вызовов проигрывателя

Программная обработка событий воспроизведения, таких как изменение состояния воспроизведения и ошибки воспроизведения, может быть полезной. В JavaScript API это делается с помощью прослушивателей событий. В Objective-C для этого используется делегат.

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

@interface ViewController : UIViewController<YTPlayerViewDelegate>

YTPlayerViewDelegate – это протокол для обработки событий воспроизведения в проигрывателе. Чтобы настроить обработку некоторых событий в ViewController.m, сначала нужно задать экземпляр ViewController в качестве делегата экземпляра YTPlayerView. Для этого добавьте в метод viewDidLoad в файле ViewController.h следующую строку:

self.playerView.delegate = self;

Теперь добавьте в ViewController.m следующий метод:

- (void)playerView:(YTPlayerView *)playerView didChangeToState:(YTPlayerState)state {
  switch (state) {
    case kYTPlayerStatePlaying:
      NSLog(@"Started playback");
      break;
    case kYTPlayerStatePaused:
      NSLog(@"Paused playback");
      break;
    default:
      break;
  }
}

Соберите и запустите приложение. Посмотрите выходные данные журнала в Xcode по мере изменения состояния проигрывателя. Данные должны обновляться при воспроизведении и остановке видео.

Для удобства и удобочитаемости библиотека предоставляет константы, начинающиеся с префикса kYT*. Полный список этих констант можно найти на странице YTPlayerView.m.

Рекомендации и ограничения

Библиотека основана на IFrame Player API. Она создает элемент WebView и выполняет рендеринг HTML и JavaScript, необходимых для работы базового проигрывателя. Цель библиотеки – максимально упростить работу, объединив в пакет методы, которые разработчикам часто приходится писать. Обратите внимание на следующие ограничения:

  • Библиотека не поддерживает одновременное воспроизведение видео в нескольких экземплярах YTPlayerView. Если у вашего приложения несколько экземпляров YTPlayerView, рекомендуем приостановить или остановить воспроизведение во всех существующих экземплярах, прежде чем запускать воспроизведение в другом экземпляре. В примере приложения, который поставляется вместе с проектом, ViewControllers использует NSNotificationCenter для отправки уведомлений о том, что воспроизведение скоро начнется. Другие контроллеры ViewControllers получат уведомление и приостановят воспроизведение в своих экземплярах YTPlayerView.
  • По возможности повторно используйте существующие загруженные экземпляры YTPlayerView. Если в представлении нужно изменить видео, не создавайте новый экземпляр UIView или YTPlayerView и не вызывайте loadVideoId: или loadPlaylistId:. Вместо этого используйте семейство функций cueVideoById:startSeconds:, которые не перезагружают WebView. При загрузке всего проигрывателя iframe возникает заметная задержка.
  • Проигрыватель не может воспроизводить видео с ограниченным доступом, но может воспроизводить видео, доступные по ссылке. Поскольку эта библиотека является оболочкой для существующего проигрывателя iframe, поведение проигрывателя должно быть почти таким же, как у проигрывателя, встроенного в веб-страницу в мобильном браузере.

Добавленное вами

Поскольку это проект с открытым исходным кодом, отправляйте исправления и улучшения в основную ветку проекта на GitHub.