Diese Seite wurde von der Cloud Translation API übersetzt.

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

youtube-ios-player-helper 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 Brücke zwischen dem Objective-C-Code der Anwendung und dem JavaScript-Code des YouTube-Players. Dadurch kann die iOS-Anwendung den YouTube-Player steuern. In diesem Artikel wird beschrieben, wie Sie die Bibliothek installieren und sie über Ihre iOS-Anwendung verwenden.

Installation

In diesem Artikel wird davon ausgegangen, dass Sie ein neues iOS-Projekt mit Single View-Anwendung erstellt haben, das auf die neueste iOS-Version ausgerichtet ist, und dass Sie die folgenden Dateien hinzufügen, wenn Sie das Projekt erstellen:

Main.storyboard
ViewController.h
ViewController.m

Sie können die Bibliothek über CocoaPods installieren oder die Bibliothek und die Quelldateien von der GitHub-Seite des Projekts kopieren.

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

Bibliothek über CocoaPods installieren

Wenn Ihr Projekt CocoaPods verwendet, fügen Sie der Pod-Datei die folgende Zeile hinzu, um die Bibliothek zu installieren. Ersetzen Sie in dieser Zeile x.y.z durch die neueste Pod-Version, die auf der GitHub-Seite des Projekts angegeben ist.

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

Geben Sie in der Befehlszeile pod install ein, um den Arbeitsbereich mit den Abhängigkeiten zu aktualisieren.

Tipp: Denken Sie daran, dass Sie bei der Verwendung von CocoaPods die Datei .xcworkspace in Xcode und nicht in der Datei .xcodeproj öffnen müssen.

Weitere Informationen finden Sie in der CocoaPods-Anleitung.

Bibliothek manuell installieren

Wenn Sie die Hilfsbibliothek manuell installieren möchten, laden Sie die Quelle entweder über den Downloadlink von GitHub herunter oder klonen Sie das Repository. Wenn Sie eine lokale Kopie des Codes haben, gehen Sie so vor:

Öffnen Sie das Beispielprojekt in Xcode oder Finder.
Wählen Sie YTPlayerView.h, YTPlayerView.m und den Ordner Assets aus. Wenn Sie den Arbeitsbereich in Xcode öffnen, finden Sie diese unter Pods -> Entwicklungs-Pods -> YouTube-Player-iOS-Helper und Pods -> Entwicklungs-Pods -> YouTube-Player-iOS-Helper -> Ressourcen. Im Finder sind diese im Stammverzeichnis des Projekts in den Verzeichnissen Classes und Assets verfügbar.
Ziehen Sie diese Dateien und Ordner in Ihr Projekt. Die Option Elemente in Ordner der Zielgruppe kopieren muss aktiviert sein. Achten Sie darauf, dass beim Ziehen des Asset-Ordners die Option Ordnerreferenzen für alle hinzugefügten Ordner erstellen angeklickt ist.

Die Bibliothek sollte jetzt installiert sein.

`YTPlayerView` über Interface Builder oder das Storyboard hinzufügen

So fügen Sie YTPlayerView über Interface Builder oder das Storyboard hinzu:

Ziehen Sie eine UIView-Instanz in die Ansicht.
Wählen Sie den Identity Inspector aus und ändern Sie die Klasse der Ansicht in YTPlayerView.
Öffnen Sie ViewController.h und fügen Sie den folgenden Header hinzu:
```
#import “YTPlayerView.h”
```
Fügen Sie außerdem die folgende Property hinzu:
```
@property(nonatomic, strong) IBOutlet YTPlayerView *playerView;
```
Erstellen Sie in Interface Builder eine Verbindung aus dem View-Element, das Sie im vorherigen Schritt definiert haben, zur Eigenschaft playerView Ihres View Controllers.
Öffnen Sie jetzt ViewController.m und fügen Sie am Ende der Methode viewDidLoad den folgenden Code hinzu:
```
[self.playerView loadWithVideoId:@"M7lc1UVf-VE"];
```

Erstellen Sie Ihre App und führen Sie sie aus. Wenn das Video-Thumbnail geladen wird, tippe auf das Video-Thumbnail, um den Videoplayer im Vollbildmodus zu starten.

Videowiedergabe steuern

Die Methode ViewController::loadWithVideoId: hat die Variante loadWithVideoId:playerVars:, mit der Entwickler zusätzliche Playervariablen an die Ansicht übergeben können. Diese Player-Variablen entsprechen den Player-Parametern in der IFrame Player API. Mit dem Parameter playsinline kann das Video direkt in der Ansicht statt im Vollbildmodus wiedergegeben werden. Bei der Inline-Wiedergabe eines Videos kann die iOS-App, die das Video enthält, die Wiedergabe programmatisch steuern.

Ersetzen Sie den loadWithVideoId:-Aufruf durch diesen Code:

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

Öffne das Storyboard oder den Interface Builder. Ziehen Sie zwei Schaltflächen in die Ansicht und benennen Sie sie Wiedergabe und Stopp. Öffnen Sie ViewController.h und fügen Sie diese Methoden hinzu, die den Schaltflächen zugeordnet werden:

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

Öffnen Sie jetzt ViewController.m und definieren Sie 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 Entsprechungen in Objective-C. Einige Namen können jedoch leicht abweichen, damit sie eher den Objective-C-Codierungsrichtlinien entsprechen. Ausnahmen sind Methoden, die die Lautstärke des Videos steuern. Diese steuern die Hardware des Smartphones oder integrierte UIView-Instanzen, die speziell für diesen Zweck entwickelt wurden, z. B. MPVolumeView.

Öffnen Sie das Storyboard oder das Interface Builder und ziehen Sie die Steuerung, um die Schaltflächen Wiedergabe und Stopp mit den Methoden playVideo: und stopVideo: zu verbinden.

Erstellen Sie nun die Anwendung und führen Sie sie aus. Sobald das Video-Thumbnail geladen ist, kannst du das Video nicht nur über die Steuerelemente des Players, sondern auch über die nativen Steuerelemente abspielen und beenden.

Umgang mit Player-Callbacks

Es kann hilfreich sein, Wiedergabeereignisse programmatisch zu verarbeiten, z. B. Wiedergabestatusänderungen und Wiedergabefehler. In der JavaScript API wird dies mit Ereignis-Listenern erreicht. In Objective-C erfolgt dies mit einem Delegat.

Der folgende Code zeigt, wie Sie die Schnittstellendeklaration in ViewController.h aktualisieren, damit die Klasse dem Delegatprotokoll entspricht. Ändern Sie die Schnittstellendeklaration von ViewController.h so:

@interface ViewController : UIViewController<YTPlayerViewDelegate>

YTPlayerViewDelegate ist ein Protokoll zur Verarbeitung von Wiedergabeereignissen im Player. Wenn Sie ViewController.m zur Verarbeitung einiger Ereignisse aktualisieren möchten, müssen Sie zuerst die Instanz ViewController als Bevollmächtigter der Instanz YTPlayerView festlegen. Fügen Sie der Methode viewDidLoad in ViewController.h die folgende Zeile hinzu, um diese Änderung vorzunehmen.

self.playerView.delegate = self;

Fügen Sie 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;
  }
}

Erstellen Sie die Anwendung und führen Sie sie aus. Sehen Sie sich die Logausgabe in Xcode an, wenn sich der Playerstatus ändert. Sie sehen Updates, wenn das Video abgespielt oder angehalten wird.

Die Bibliothek enthält die Konstanten, die mit dem Präfix kYT* beginnen. Eine vollständige Liste dieser Konstanten finden Sie unter YTPlayerView.m.

Best Practices und Einschränkungen

Die Bibliothek baut auf der IFrame Player API auf. Dazu wird ein WebView erstellt und der HTML- und JavaScript-Code, der für einen einfachen Player erforderlich ist. Das Ziel der Bibliothek besteht darin, so nutzerfreundlich wie möglich zu sein und Bündelungsmethoden zu verwenden, die Entwickler häufig in ein Paket schreiben müssen. Dabei gelten einige Einschränkungen:

Die Bibliothek unterstützt die gleichzeitige Videowiedergabe in mehreren YTPlayerView-Instanzen nicht. Wenn Ihre Anwendung mehrere YTPlayerView-Instanzen hat, empfiehlt es sich, die Wiedergabe in vorhandenen Instanzen zu pausieren oder zu beenden, bevor Sie sie in einer anderen Instanz starten. In der Beispielanwendung, die mit dem Projekt ausgeliefert wird, verwenden die ViewController NSNotificationCenter, um Benachrichtigungen zu senden, dass die Wiedergabe bald beginnt. Andere ViewController werden benachrichtigt und pausieren die Wiedergabe in ihren YTPlayerView-Instanzen.
Verwenden Sie nach Möglichkeit Ihre vorhandenen, geladenen YTPlayerView-Instanzen. Wenn ein Video in einer Ansicht geändert werden muss, erstellen Sie keine neue UIView- oder YTPlayerView-Instanz und rufen weder loadVideoId: noch loadPlaylistId: auf. Verwenden Sie stattdessen die cueVideoById:startSeconds:-Funktionsgruppe, die WebView nicht neu lädt. Beim Laden des gesamten iFrame-Players tritt eine deutliche Verzögerung auf.
Dieser Player kann keine privaten Videos, aber nicht gelistete Videos abspielen. Da diese Bibliothek den vorhandenen iFrame-Player umschließt, sollte das Verhalten des Players fast identisch mit dem eines Players sein, der auf einer Webseite in einem mobilen Browser eingebettet ist.

Beiträge

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