YouTube-Videos mit der YouTube-Hilfsbibliothek in iOS-Anwendungen einbetten

Die youtube-ios-player-helper-Bibliothek ist eine Open-Source-Bibliothek, mit der du einen YouTube-iFrame-Player in eine iOS-Anwendung einbetten kannst. Die Bibliothek erstellt eine WebView und eine Bridge zwischen dem Objective-C-Code deiner Anwendung und dem JavaScript-Code des YouTube-Players. So kann die iOS-Anwendung den YouTube-Player steuern. In diesem Artikel wird beschrieben, wie du die Bibliothek installierst und in deiner iOS-Anwendung verwendest.

Installation

In diesem Artikel wird davon ausgegangen, dass du ein neues iOS-Projekt vom Typ „Single View Application“ für die aktuelle Version von iOS erstellt hast und dass du beim Erstellen des Projekts die folgenden Dateien hinzufügst:

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

Du kannst die Bibliothek über CocoaPods installieren oder die Bibliothek und Quelldateien von der GitHub-Seite des Projekts kopieren.

  • Die Bibliothek kann über CocoaPods installiert werden. Alternativ sind die Bibliotheks- und Quelldateien auf der GitHub-Seite des Projekts verfügbar und können in ein vorhandenes Projekt kopiert werden.

Bibliothek über CocoaPods installieren

Wenn dein Projekt CocoaPods verwendet, füge die folgende Zeile zu deiner Podfile-Datei hinzu, um die Bibliothek zu installieren. Ersetze x.y.z in dieser Zeile durch die neueste Pod-Version, die auf der GitHub-Seite des Projekts angegeben ist.

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

Gib an der Eingabeaufforderung pod install ein, um deinen Arbeitsbereich mit den Abhängigkeiten zu aktualisieren.

Hinweis: Wenn du CocoaPods verwendest, musst du die .xcworkspace Datei in Xcode öffnen, nicht die .xcodeproj Datei.

Weitere Informationen findest du im CocoaPods Tutorial.

Bibliothek manuell installieren

Wenn du die Helper-Bibliothek manuell installieren möchtest, lade die Quelle über den Downloadlink von GitHub herunter oder klone das Repository. Sobald du eine lokale Kopie des Codes hast, gehe so vor:

  1. Öffne das Beispielprojekt in Xcode oder im Finder.

  2. Wähle YTPlayerView.h, YTPlayerView.m und den Ordner Assets aus. Wenn du den Arbeitsbereich in Xcode öffnest, sind diese verfügbar unter Pods -> Development Pods -> YouTube-Player-iOS-Helper und Pods -> Development Pods -> YouTube-Player-iOS-Helper -> Resources. Im Finder, sind sie im Stammverzeichnis des Projekts in den Ordnern Classes und Assets verfügbar.

  3. Ziehe diese Dateien und Ordner in dein Projekt. Achte darauf, dass die Option Copy items into destination group’s folder (Elemente in den Ordner der Zielgruppe kopieren) ausgewählt ist. Wenn du den Ordner „Assets“ ziehst, achte darauf, dass die Option Create Folder References for any added folders (Ordnerreferenzen für alle hinzugefügten Ordner erstellen) ausgewählt ist.

Die Bibliothek sollte jetzt installiert sein.

YTPlayerView über Interface Builder oder das Storyboard hinzufügen

So fügst du eine YTPlayerView über Interface Builder oder das Storyboard hinzu:

  1. Ziehe eine UIView-Instanz in deine Ansicht.

  2. Wähle den Identitätsinspector aus und ändere die Klasse der Ansicht in YTPlayerView.

  3. Öffne ViewController.h und füge den folgenden Header hinzu:

    #import “YTPlayerView.h”

    Füge außerdem die folgende Property hinzu:

    @property(nonatomic, strong) IBOutlet YTPlayerView *playerView;
  4. Erstelle in Interface Builder eine Verbindung vom Ansichtselement, das du im vorherigen Schritt definiert hast, zur playerView Property deines Ansichtscontrollers.

  5. Öffne jetzt ViewController.m und füge am Ende der Methode viewDidLoad den folgenden Code hinzu:

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

Erstelle deine App und führe sie aus. Wenn das Video-Thumbnail geladen wird, tippe darauf, um den Vollbild-Videoplayer zu starten.

Videowiedergabe steuern

Die Methode ViewController::loadWithVideoId: hat eine Variante, loadWithVideoId:playerVars:, mit der Entwickler zusätzliche Player Variablen an die Ansicht übergeben können. Diese Player-Variablen entsprechen den Player-Parametern in der IFrame Player API. Mit dem playsinline Parameter kann das Video direkt in der Ansicht und nicht im Vollbildmodus wiedergegeben werden. Wenn ein Video inline wiedergegeben wird, kann die enthaltende iOS-Anwendung die Wiedergabe programmatisch steuern.

Ersetze den Aufruf von loadWithVideoId: durch diesen Code:

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

Öffne das Storyboard oder Interface Builder. Ziehe zwei Schaltflächen in deine Ansicht und beschrifte sie mit Play und Stop. Öffne ViewController.h und füge diese Methoden hinzu, die den Schaltflächen zugeordnet werden:

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

Öffne jetzt ViewController.m und definiere diese beiden Funktionen:

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

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

Die meisten Funktionen der IFrame Player API haben Objective-C-Entsprechungen. Einige Namen können jedoch leicht abweichen, um besser den Objective-C-Codierungsrichtlinien zu entsprechen. Eine bemerkenswerte Ausnahme sind die Methoden zur Steuerung der Lautstärke des Videos, da diese von der Telefonhardware oder mit integrierten UIView Instanzen gesteuert werden, die für diesen Zweck entwickelt wurden, z. B. MPVolumeView.

Öffne das Storyboard oder Interface Builder und ziehe mit gedrückter Ctrl-Taste, um die Schaltflächen Play und Stop mit den playVideo: und stopVideo: Methoden zu verbinden.

Erstelle die Anwendung und führe sie aus. Sobald das Video-Thumbnail geladen wird, kannst du das Video zusätzlich zu den Steuerelementen des Videoplayers auch mit den nativen Steuerelementen abspielen und anhalten.

Player-Callbacks verarbeiten

Es kann nützlich sein, Wiedergabeereignisse wie Änderungen des Wiedergabestatus und Wiedergabefehler programmatisch zu verarbeiten. In der JavaScript API erfolgt dies mit Ereignis-Listenern. In Objective-C erfolgt dies mit einem Delegate.

Der folgende Code zeigt, wie du die Schnittstellendeklaration in ViewController.h aktualisierst, damit die Klasse dem Delegate-Protokoll entspricht. Ändere ViewController.h’s Schnittstellendeklaration so:

@interface ViewController : UIViewController<YTPlayerViewDelegate>

YTPlayerViewDelegate ist ein Protokoll zur Verarbeitung von Wiedergabeereignissen im Player. Wenn du ViewController.m aktualisieren möchtest, um einige der Ereignisse zu verarbeiten, musst du zuerst die ViewController Instanz als Delegate der YTPlayerView Instanz festlegen. Füge dazu die folgende Zeile zur viewDidLoad Methode in ViewController.h hinzu.

self.playerView.delegate = self;

Füge jetzt die folgende Methode zu ViewController.m hinzu:

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

Erstelle die Anwendung und führe sie aus. Beobachte die Logausgabe in Xcode, wenn sich der Player-Status ändert. Du solltest Aktualisierungen sehen, wenn das Video abgespielt oder angehalten wird.

Die Bibliothek bietet die Konstanten, die mit dem kYT* Präfix beginnen, um die Lesbarkeit zu verbessern. Eine vollständige Liste dieser Konstanten findest du in YTPlayerView.m.

Best Practices und Einschränkungen

Die Bibliothek basiert auf der IFrame Player API. Dazu wird eine WebView und das für einen einfachen Player erforderliche HTML und JavaScript gerendert. Ziel der Bibliothek ist es, sie so einfach wie möglich zu gestalten und Methoden, die Entwickler häufig schreiben müssen, in einem Paket zu bündeln. Es gibt einige Einschränkungen, die beachtet werden sollten:

  • Die Bibliothek unterstützt keine gleichzeitige Videowiedergabe in mehreren YTPlayerView Instanzen. Wenn deine Anwendung mehrere YTPlayerView Instanzen hat, empfiehlt es sich, die Wiedergabe in allen vorhandenen Instanzen anzuhalten oder zu beenden, bevor du die Wiedergabe in einer anderen Instanz startest. In der Beispielanwendung, die mit dem Projekt geliefert wird, verwenden die Ansichtscontroller NSNotificationCenter, um Benachrichtigungen zu senden, dass die Wiedergabe bald beginnt. Andere Ansichtscontroller werden benachrichtigt und halten die Wiedergabe in ihren YTPlayerView Instanzen an.
  • Verwende nach Möglichkeit deine vorhandenen, geladenen YTPlayerView-Instanzen wieder. Wenn ein Video in einer Ansicht geändert werden muss, erstelle keine neue UIView Instanz oder ein neue YTPlayerView Instanz und rufe weder loadVideoId: noch loadPlaylistId: auf. Verwende stattdessen die cueVideoById:startSeconds: Familie von Funktionen, die die WebView nicht neu laden. Beim Laden des gesamten iFrame-Players kommt es zu einer spürbaren Verzögerung.
  • Dieser Player kann keine privaten Videos abspielen, aber nicht gelistete Videos . Da diese Bibliothek den vorhandenen iFrame-Player umschließt, sollte sich der Player fast genauso verhalten wie ein Player, der in einem mobilen Browser auf einer Webseite eingebettet ist.

Unterstützungsbeiträge

Da es sich um ein Open-Source-Projekt handelt, sende bitte Fehlerkorrekturen und Verbesserungen an den Master-Branch des GitHub Projekts.