Umieszczanie filmów z YouTube w aplikacjach na iOS przy użyciu biblioteki pomocniczej YouTube

youtube-ios-player-helper to biblioteka typu open source, która ułatwia umieszczanie odtwarzacza iframe YouTube w aplikacji na iOS. Biblioteka tworzy WebView i most między kodem celu C a kodem JavaScript odtwarzacza YouTube, pozwalając aplikacji iOS na kontrolowanie odtwarzacza YouTube. Z tego artykułu dowiesz się, jak zainstalować bibliotekę i zacząć korzystać z niej w aplikacji na iOS.

Montaż

W tym artykule zakładamy, że masz utworzony nowy projekt aplikacji na iOS z pojedynczym widokiem kierowany na najnowszą wersję iOS i że podczas tworzenia projektu dodajesz te pliki:

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

Możesz zainstalować bibliotekę za pomocą CocoaPods lub przez skopiowanie biblioteki i plików źródłowych ze strony projektu na GitHubie.

  • Biblioteka jest dostępna do zainstalowania za pomocą CocoaPods. Pliki biblioteki i źródłowe są też dostępne na stronie GitHub Twojego projektu i można je skopiować do istniejącego projektu.

Instalowanie biblioteki za pomocą CocoaPods

Jeśli w projekcie używasz CocoaPods, dodaj poniższy wiersz do pliku Podfile, aby zainstalować bibliotekę. W tym wierszu zastąp x.y.z najnowszą wersją poda, która zostanie zidentyfikowana na stronie projektu na GitHubie.

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

W wierszu poleceń wpisz pod install, aby zaktualizować obszar roboczy zależności.

Wskazówka: jeśli używasz CocoaPods, musisz otworzyć plik .xcworkspace w Xcode, a nie .xcodeproj.

Więcej informacji znajdziesz w samouczku CocoaPods.

Ręczne instalowanie biblioteki

Aby zainstalować bibliotekę pomocniczą ręcznie, pobierz źródło za pomocą linku do pobrania z GitHuba lub skopiuj repozytorium. Gdy już będziesz mieć lokalną kopię kodu, wykonaj te czynności:

  1. Otwórz przykładowy projekt w Xcode lub Finderze.

  2. Wybierz YTPlayerView.h, YTPlayerView.m i folder Zasoby. Jeśli otworzysz obszar roboczy w Xcode, znajdziesz go w sekcjach Pods -> Development Pods -> YouTube-Player-iOS-Helper i Pods -> Development Pods -> YouTube-Player-iOS-Helper -> Zasoby. W Finderze znajdują się one w katalogu głównym projektu w katalogach Classes i Assets.

  3. Przeciągnij te pliki i foldery do projektu. Upewnij się, że opcja Kopiuj elementy do folderu grupy docelowej jest zaznaczona. Podczas przeciągania folderu Zasoby sprawdź, czy jest zaznaczona opcja Utwórz odwołania do folderów dla wszystkich dodanych folderów.

Biblioteka powinna być teraz zainstalowana.

Dodaj YTPlayerView za pomocą Kreatora interfejsów lub scenorysu

Aby dodać element YTPlayerView za pomocą konstruktora interfejsu lub scenorysu:

  1. Przeciągnij instancję UIView do widoku.

  2. Wybierz Inspektora tożsamości i zmień klasę widoku na YTPlayerView.

  3. Otwórz plik ViewController.h i dodaj ten nagłówek:

    #import “YTPlayerView.h”

    Dodaj też tę właściwość:

    @property(nonatomic, strong) IBOutlet YTPlayerView *playerView;

  4. W Kreatorze interfejsu utwórz połączenie z elementu View zdefiniowanego w poprzednim kroku z właściwością playerView Controller.

  5. Teraz otwórz ViewController.m i dodaj ten kod na końcu metody viewDidLoad:

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

skompilować i uruchomić aplikację. Po wczytaniu miniatury filmu dotknij miniatury, aby włączyć odtwarzacz wideo na pełnym ekranie.

Sterowanie odtwarzaniem filmów

Metoda ViewController::loadWithVideoId: ma wariant loadWithVideoId:playerVars:, który pozwala deweloperom przekazywać do widoku dodatkowe zmienne odtwarzacza. Zmienne te odpowiadają parametrom odtwarzacza w interfejsie IFrame Player API. Parametr playsinline umożliwia odtwarzanie filmu bezpośrednio w widoku, a nie w trybie pełnoekranowym. Gdy film jest odtwarzany w treści, aplikacja zawierająca aplikację na iOS może automatycznie sterować odtwarzaniem.

Zastąp wywołanie loadWithVideoId: tym kodem:

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

Otwórz scenorys lub Kreator interfejsu. Przeciągnij 2 przyciski do widoku, przypisując mu etykietę Odtwórz i Zatrzymaj. Otwórz ViewController.h i dodaj te metody, które zostaną zmapowane na przyciski:

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

Teraz otwórz ViewController.m i określ te 2 funkcje:

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

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

Większość funkcji interfejsu IFrame Player API ma swoje odpowiedniki w celu C, ale niektóre nazwy mogą się nieznacznie różnić od wytycznych dotyczących kodowania Goal-C. Wyjątkami są metody sterujące głośnością filmu, ponieważ te funkcje są kontrolowane przez sprzęt telefoniczny lub mają wbudowane wystąpienia UIView przeznaczone do tego celu, takie jak MPVolumeView.

Otwórz scenorys lub konstruktor interfejsu i przeciągnij go, by połączyć przyciski Odtwórz i Zatrzymaj z metodami playVideo: i stopVideo:.

Teraz skompiluj i uruchom aplikację. Po wczytaniu miniatury filmu powinno być możliwe odtworzenie i zatrzymanie filmu za pomocą elementów sterujących odtwarzaczem oraz elementów sterujących odtwarzaczem.

Obsługa wywołań zwrotnych odtwarzacza

Może być przydatna przy automatycznym obsłudze zdarzeń odtwarzania, takich jak zmiany stanu odtwarzania czy błędy odtwarzania. W interfejsie JavaScript API służy do tego detektory zdarzeń. W języku celu C jest to realizowane za pomocą przekazania dostępu.

Poniższy kod pokazuje, jak zaktualizować deklarację interfejsu w ViewController.h, aby klasa była zgodna z protokołem przekazywania. Zmień deklarację interfejsu ViewController.h w ten sposób:

@interface ViewController : UIViewController<YTPlayerViewDelegate>

YTPlayerViewDelegate to protokół obsługi zdarzeń odtwarzania w odtwarzaczu. Aby można było zaktualizować ViewController.m w celu obsługi niektórych zdarzeń, musisz najpierw skonfigurować instancję ViewController jako przedstawiciela instancji YTPlayerView. Aby wprowadzić tę zmianę, dodaj następujący wiersz do metody viewDidLoad w ViewController.h.

self.playerView.delegate = self;

Teraz dodaj do metody ViewController.m tę metodę:

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

skompilować i uruchomić aplikację. Śledź dane wyjściowe logu w Xcode, gdy zmienia się stan odtwarzacza. Po włączeniu lub zakończeniu odtwarzania filmu powinny pojawić się aktualizacje.

Dla wygody i czytelności biblioteka zawiera stałe wartości zaczynające się od prefiksu kYT*. Pełną listę tych stałych znajdziesz na YTPlayerView.m.

Sprawdzone metody i ograniczenia

Biblioteka jest oparta na API IFrame Player przez utworzenie WebView i renderowanie kodu HTML oraz JavaScript wymaganego dla podstawowego odtwarzacza. Zadaniem biblioteki jest stworzenie jak najprostszej w użyciu i połączonych metod, których programiści często muszą zapisywać w pakietach. Pamiętaj o kilku ograniczeniach:

  • Biblioteka nie obsługuje jednoczesnego odtwarzania filmów w wielu instancjach YTPlayerView. Jeśli aplikacja ma wiele wystąpień YTPlayerView, zaleca się wstrzymanie lub zatrzymanie odtwarzania w dowolnej z instancji, zanim rozpocznie się odtwarzanie w innej instancji. W przykładowej aplikacji dołączonej do projektu elementy ViewViewler używają NSNotificationCenter do wysyłania powiadomień o rozpoczęciu odtwarzania. Inne kontrolery ViewControl otrzymają powiadomienia i wstrzymają odtwarzanie w swoich instancjach YTPlayerView.
  • Jeśli to możliwe, ponownie wykorzystaj istniejące, wczytane instancje YTPlayerView. Gdy w widoku danych trzeba zmienić film, nie twórz nowej instancji UIView ani nowej instancji YTPlayerView ani wywołaj właściwości loadVideoId: lub loadPlaylistId:. Zamiast tego użyj rodziny funkcji cueVideoById:startSeconds:, które nie ładują ponownie WebView. Występuje znaczne opóźnienie podczas wczytywania całego odtwarzacza IFrame.
  • Ten odtwarzacz nie może odtwarzać filmów prywatnych, ale może odtwarzać filmy niepubliczne. Ponieważ ta biblioteka otacza istniejący odtwarzacz iframe, jego działanie powinno być niemal takie samo jak w przypadku odtwarzacza umieszczonego na stronie internetowej w przeglądarce mobilnej.

Opublikowane treści

Ponieważ jest to projekt typu open source, należy wprowadzać poprawki i ulepszenia w gałęzi głównej projektu w GitHubie.