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

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

Монтаж

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

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

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

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

Установить библиотеку через CocoaPods

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

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

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

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

Ознакомьтесь с учебным пособием CocoaPods , чтобы узнать больше.

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

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

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

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

  3. Перетащите эти файлы и папки в свой проект. Убедитесь, что установлен флажок Копировать элементы в папку целевой группы . При перетаскивании папки «Активы» убедитесь, что установлен флажок «Создать ссылки на папки для любых добавленных папок» .

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

Добавьте YTPlayerView через конструктор интерфейсов или раскадровку.

Чтобы добавить 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 контроллера представления.

  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];

Откройте раскадровку или интерфейсный конструктор. Перетащите две кнопки на свой вид, пометив их 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];
}

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

Откройте раскадровку или интерфейсный конструктор и перетащите, удерживая нажатой клавишу Control, чтобы соединить кнопки «Воспроизвести » и «Стоп» с методами 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 .

Лучшие практики и ограничения

Библиотека строится на основе API-интерфейса IFrame Player, создавая WebView и отображая HTML и JavaScript, необходимые для базового проигрывателя. Цель библиотеки — сделать ее максимально простой в использовании, объединяя методы, которые разработчикам часто приходится записывать в пакет. Следует отметить несколько ограничений:

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

Взносы

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