Google używa technologii AI do tłumaczenia treści na Twój preferowany język. Tłumaczenia wygenerowane przez AI mogą zawierać błędy.

Umieszczanie filmów na YouTube w aplikacjach na iOS za pomocą biblioteki pomocniczej YouTube

youtube-ios-player-helper to biblioteka open source, która pomaga osadzić odtwarzacz YouTube w ramce iframe w aplikacji na iOS. Biblioteka tworzy element WebView i pomost między kodem Objective-C aplikacji a kodem JavaScript odtwarzacza YouTube, co umożliwia aplikacji na iOS sterowanie odtwarzaczem YouTube. Z tego artykułu dowiesz się, jak zainstalować bibliotekę i zacząć jej używać w aplikacji na iOS.

Instalacja

W tym artykule zakładamy, że masz już utworzony nowy projekt aplikacji na iOS z jednym widokiem, który jest przeznaczony na najnowszą wersję iOS, oraz że podczas tworzenia projektu dodasz te pliki:

Main.storyboard
ViewController.h
ViewController.m

Bibliotekę możesz zainstalować za pomocą CocoaPods lub kopiując bibliotekę i pliki źródłowe ze strony projektu w GitHub.

Bibliotekę można zainstalować za pomocą CocoaPods. Biblioteka i pliki źródłowe są też dostępne na stronie projektu w GitHub i można je skopiować do istniejącego projektu.

Instalowanie biblioteki za pomocą CocoaPods

Jeśli Twój projekt korzysta z CocoaPods, aby zainstalować bibliotekę, dodaj do pliku Podfile ten wiersz: W tym wierszu zastąp x.y.z najnowszą wersją pod, którą znajdziesz na stronie projektu w GitHub.

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

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

Wskazówka: pamiętaj, że gdy używasz CocoaPods, musisz otworzyć w Xcode plik .xcworkspace, a nie plik .xcodeproj.

Więcej informacji znajdziesz w samouczku CocoaPods tutorial.

Ręczne instalowanie biblioteki

Aby ręcznie zainstalować bibliotekę pomocniczą, pobierz źródło za pomocą linku do pobierania w GitHub lub sklonuj repozytorium. Gdy będziesz mieć lokalną kopię kodu, wykonaj te czynności:

Otwórz przykładowy projekt w Xcode lub Finderze.
Wybierz YTPlayerView.h, YTPlayerView.m i folder Assets. Jeśli otworzysz obszar roboczy w Xcode, te pliki i foldery będą dostępne w sekcjach Pods –> Development Pods –> YouTube-Player-iOS-Helper i Pods –> Development Pods –> YouTube-Player-iOS-Helper –> Resources. W Finderze, te pliki i foldery są dostępne w katalogu głównym projektu w katalogach Classes i Assets.
Przeciągnij te pliki i foldery do projektu. Upewnij się, że jest zaznaczone pole Copy items into destination group’s folder (Kopiuj elementy do folderu grupy docelowej). Podczas przeciągania folderu Assets upewnij się, że jest zaznaczone pole Create Folder References for any added folders (Utwórz odniesienia do folderów dla wszystkich dodanych folderów).

Biblioteka powinna być teraz zainstalowana.

Dodawanie elementu `YTPlayerView` za pomocą narzędzia Interface Builder lub Storyboard

Aby dodać element YTPlayerView za pomocą narzędzia Interface Builder lub Storyboard:

Przeciągnij instancję UIView do widoku.
Wybierz inspektora tożsamości i zmień klasę widoku na YTPlayerView.

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;

W narzędziu Interface Builder utwórz połączenie między elementem View zdefiniowanym w poprzednim kroku a właściwością playerView kontrolera widoku.
Teraz otwórz ViewController.m i dodaj ten kod na końcu metody viewDidLoad:
```
[self.playerView loadWithVideoId:@"M7lc1UVf-VE"];
```

Skompiluj i uruchom aplikację. Gdy wczyta się miniatura filmu, kliknij ją, aby uruchomić odtwarzacz wideo na pełnym ekranie.

Sterowanie odtwarzaniem filmu

Metoda ViewController::loadWithVideoId: ma wariant loadWithVideoId:playerVars:, który umożliwia deweloperom przekazywanie do widoku dodatkowych zmiennych odtwarzacza. Te zmienne odtwarzacza odpowiadają parametrom odtwarzacza w interfejsie IFrame Player API. Parametr playsinline umożliwia odtwarzanie filmu bezpośrednio w widoku, a nie na pełnym ekranie. Gdy film jest odtwarzany w tekście, aplikacja na iOS może programowo sterować odtwarzaniem.

Zastąp wywołanie loadWithVideoId: tym kodem:

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

Otwórz Storyboard lub Interface Builder. Przeciągnij do widoku 2 przyciski i nazwij je Odtwórz i Zatrzymaj. Otwórz plik ViewController.h i dodaj te metody, które zostaną przypisane do przycisków:

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

Teraz otwórz plik ViewController.m i zdefiniuj 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 odpowiedniki w Objective-C, chociaż niektóre z nazw mogą się nieco różnić, aby lepiej pasować do wytycznych dotyczących kodowania w Objective-C. Wyjątkiem są metody sterowania głośnością filmu, ponieważ są one sterowane przez sprzęt telefonu lub za pomocą wbudowanych UIView instancji przeznaczonych do tego celu, takich jak MPVolumeView.

Otwórz Storyboard lub Interface Builder i przeciągnij z wciśniętym klawiszem Control, aby połączyć przyciski Odtwórz i Zatrzymaj z metodami playVideo: i stopVideo:.

Teraz skompiluj i uruchom aplikację. Gdy wczyta się miniatura filmu, oprócz elementów sterujących odtwarzaczem powinny być dostępne natywne elementy sterujące, za pomocą których można odtwarzać i zatrzymywać film.

Obsługa wywołań zwrotnych odtwarzacza

Może się przydać programowe obsługiwanie zdarzeń odtwarzania, takich jak zmiany stanu odtwarzania i błędy odtwarzania. W interfejsie JavaScript API służą do tego detektory zdarzeń. W Objective-C służy do tego delegat.

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

@interface ViewController : UIViewController<YTPlayerViewDelegate>

YTPlayerViewDelegate to protokół obsługi zdarzeń odtwarzania w odtwarzaczu. Aby zaktualizować ViewController.m i obsługiwać niektóre zdarzenia, musisz najpierw ustawić instancję ViewController jako delegata instancji YTPlayerView. Aby wprowadzić tę zmianę, dodaj ten wiersz do metody viewDidLoad w ViewController.h.

self.playerView.delegate = self;

Teraz dodaj tę metodę do pliku 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;
  }
}

Skompiluj i uruchom aplikację. Obserwuj dane wyjściowe logu w Xcode, gdy zmienia się stan odtwarzacza. Powinny się pojawiać aktualizacje, gdy film jest odtwarzany lub zatrzymywany.

Biblioteka zawiera stałe, które zaczynają się od prefiksu kYT*, aby ułatwić ich używanie i zwiększyć czytelność kodu. Pełną listę tych stałych znajdziesz w pliku YTPlayerView.m.

Sprawdzone metody i ograniczenia

Biblioteka jest oparta na interfejsie IFrame Player API. Tworzy element WebView i renderuje kod HTML i JavaScript wymagany do podstawowego odtwarzacza. Celem biblioteki jest jak największa łatwość użycia. Łączy ona metody, które deweloperzy często muszą pisać, w pakiet. Należy pamiętać o tych ograniczeniach:

Biblioteka nie obsługuje jednoczesnego odtwarzania filmów w wielu YTPlayerView instancjach. Jeśli Twoja aplikacja ma wiele YTPlayerView instancji, zalecamy wstrzymanie lub zatrzymanie odtwarzania w istniejących instancjach przed rozpoczęciem odtwarzania w innej instancji. W przykładowej aplikacji, która jest dostarczana z projektem, kontrolery widoku używają NSNotificationCenter do wysyłania powiadomień o zbliżającym się rozpoczęciu odtwarzania. Inne kontrolery widoku otrzymują powiadomienia i wstrzymują odtwarzanie w swoich YTPlayerView instancjach.
W miarę możliwości używaj ponownie istniejących, wczytanych instancji YTPlayerView. Gdy trzeba zmienić film w widoku, nie twórz nowej instancji UIView ani nowej instancji YTPlayerView i nie wywołuj metod loadVideoId: ani loadPlaylistId:. Zamiast tego użyj rodziny funkcji cueVideoById:startSeconds: , które nie powodują ponownego wczytania elementu WebView. Wczytywanie całego odtwarzacza w ramce iframe trwa zauważalnie długo.
Ten odtwarzacz nie może odtwarzać filmów prywatnych, ale może odtwarzać filmy niepubliczne. Ponieważ ta biblioteka otacza istniejący odtwarzacz w ramce iframe, jego działanie powinno być niemal identyczne z działaniem odtwarzacza osadzonego na stronie internetowej w przeglądarce mobilnej.

Opublikowane treści

Ponieważ jest to projekt open source, przesyłaj poprawki i ulepszenia do gałęzi głównej projektu w GitHub.

Umieszczanie filmów na YouTube w aplikacjach na iOS za pomocą biblioteki pomocniczej YouTube Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.