Incorporamento dei video di YouTube nelle applicazioni iOS con la Raccolta di assistenza di YouTube

youtube-ios-player-helper è una libreria open source che ti aiuta a incorporare un player iframe di YouTube in un'applicazione iOS. La libreria crea un WebView e un bridge tra il codice Objective-C della tua applicazione e il codice JavaScript del player di YouTube, consentendo all'applicazione iOS di controllare il player di YouTube. Questo articolo descrive i passaggi per installare la libreria e iniziare a utilizzarla dalla tua applicazione iOS.

Installazione

Questo articolo presuppone la creazione di un nuovo progetto per un'applicazione a visualizzazione singola che abbia come target l'ultima versione di iOS e che devi aggiungere i seguenti file quando crei il progetto:

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

Puoi installare la libreria tramite CocoaPods o copiando i file di origine e libreria dalla pagina GitHub del progetto.

  • La libreria può essere installata tramite CocoaPods. In alternativa, la libreria e i file di origine sono disponibili tramite la pagina GitHub del progetto e possono essere copiati in un progetto esistente.

Installa la libreria tramite CocoaPods

Se il progetto utilizza CocoaPods, aggiungi la riga seguente al podfile per installare la libreria. In questa riga, sostituisci x.y.z con l'ultima versione del pod, che verrà identificata nella pagina GitHub del progetto.

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

Al prompt della riga di comando, digita pod install per aggiornare l'area di lavoro con le dipendenze.

Suggerimento: ricorda che quando utilizzi CocoaPods, devi aprire il file .xcworkspace in Xcode, non il file .xcodeproj.

Per scoprire di più, guarda il tutorial di CocoaPods.

Installare manualmente la raccolta

Per installare la libreria di supporto manualmente, scarica l'origine tramite il link di download di GitHub oppure clona il repository. Una volta creata una copia locale del codice, procedi nel seguente modo:

  1. Apri il progetto di esempio in Xcode o Finder.

  2. Seleziona YTPlayerView.h, YTPlayerView.m e la cartella Asset. Se apri l'area di lavoro in Xcode, questi sono disponibili in Pod -> Pod di sviluppo -> YouTube-Player-iOS-Helper e Pods -> Pod di sviluppo -> YouTube-Player-iOS-Helper -> Risorse. Nel Finder, sono disponibili nella directory radice del progetto nelle directory Corsi e Asset.

  3. Trascina questi file e cartelle nel progetto. Assicurati che l'opzione Copia elementi nella cartella del gruppo di destinazione sia selezionata. Quando trascini la cartella Asset, assicurati che l'opzione Crea riferimenti alle cartelle per le cartelle aggiunte sia selezionata.

A questo punto la libreria dovrebbe essere installata.

Aggiungi una YTPlayerView tramite il generatore di interfacce o lo storyboard

Per aggiungere una YTPlayerView tramite il Generatore di interfacce o lo storyboard:

  1. Trascina un'istanza UIView nella visualizzazione.

  2. Seleziona lo strumento di controllo delle identità e imposta la classe di visualizzazione su YTPlayerView.

  3. Apri ViewController.h e aggiungi l'intestazione seguente:

    #import “YTPlayerView.h”

    Aggiungi anche la seguente proprietà:

    @property(nonatomic, strong) IBOutlet YTPlayerView *playerView;
  4. Nel Builder dell'interfaccia, crea una connessione dall'elemento View che hai definito nel passaggio precedente alla proprietà playerView del controller di visualizzazione.

  5. Ora apri ViewController.m e aggiungi il codice seguente alla fine del tuo metodo viewDidLoad:

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

Crea ed esegui la tua applicazione. Quando viene caricata la miniatura del video, toccala per avviare il video player a schermo intero.

Controllare la riproduzione dei video

Il metodo ViewController::loadWithVideoId: ha una variante, loadWithVideoId:playerVars:, che consente agli sviluppatori di passare variabili aggiuntive del player alla visualizzazione. Queste variabili del player corrispondono ai parametri del player nell'IFrame Player API. Il parametro playsinline consente di riprodurre il video direttamente nella visualizzazione anziché a schermo intero. Quando un video viene riprodotto in linea, l'applicazione iOS può controllare in modo programmatico la riproduzione.

Sostituisci la chiamata loadWithVideoId: con questo codice:

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

Apri lo storyboard o il generatore di interfacce. Trascina due pulsanti sulla vista, etichettandoli Riproduci e Interrompi. Apri ViewController.h e aggiungi questi metodi, che verranno mappati ai pulsanti:

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

Ora apri ViewController.m e definisci queste due funzioni:

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

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

La maggior parte delle funzioni dell'API IFrame Player ha equivalenti Objective-C, sebbene alcuni nomi possano differire leggermente in base alle linee guida della codifica di Objective-C. Le eccezioni degne di nota sono i metodi che controllano il volume del video, dal momento che sono controllati dall'hardware del telefono o con istanze UIView integrate a questo scopo, come MPVolumeView.

Apri lo storyboard o il generatore di interfacce e tieni premuto il tasto Ctrl per collegare i pulsanti Riproduci e Interrompi ai metodi playVideo: e stopVideo:.

Ora crea ed esegui l'applicazione. Dopo aver caricato la miniatura del video, dovresti essere in grado di riprodurre e interrompere il video utilizzando i controlli nativi oltre ai controlli del player.

Gestire i callback del giocatore

Può essere utile gestire in modo programmatico gli eventi di riproduzione, ad esempio le modifiche allo stato di riproduzione e gli errori di riproduzione. Nell'API JavaScript, questa operazione viene eseguita con i listener di eventi. In Objective-C,questo avviene con un delegato.

Il codice seguente mostra come aggiornare la dichiarazione di interfaccia in ViewController.h in modo che la classe sia conforme al protocollo delegato. Modifica la dichiarazione dell'interfaccia di ViewController.h come segue:

@interface ViewController : UIViewController<YTPlayerViewDelegate>

YTPlayerViewDelegate è un protocollo per la gestione degli eventi di riproduzione nel player. Per aggiornare ViewController.m per gestire alcuni eventi, devi prima impostare l'istanza ViewController come delegato dell'istanza YTPlayerView. Per apportare questa modifica, aggiungi la seguente riga al metodo viewDidLoad in ViewController.h.

self.playerView.delegate = self;

Ora aggiungi il seguente metodo a 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;
  }
}

Creare ed eseguire l'applicazione. Osserva l'output del log in Xcode quando cambia lo stato del player. Dovresti visualizzare gli aggiornamenti quando il video viene riprodotto o interrotto.

La libreria fornisce le costanti che iniziano con il prefisso kYT* per praticità e leggibilità. Per un elenco completo di queste costanti, consulta YTPlayerView.m.

Best practice e limitazioni

La libreria si basa sull'API IFrame Player creando un WebView ed eseguendo il rendering dell'HTML e del JavaScript necessari per un player di base. L'obiettivo della libreria è quello di essere il più semplice possibile, raggruppando i metodi che gli sviluppatori devono spesso scrivere in un pacchetto. È necessario notare alcune limitazioni:

  • La libreria non supporta la riproduzione dei video simultanei in più istanze YTPlayerView. Se la tua applicazione ha più istanze YTPlayerView, è consigliabile mettere in pausa o interrompere la riproduzione in tutte le istanze esistenti prima di avviare la riproduzione in un'altra istanza. Nell'applicazione di esempio inviata con il progetto, i ViewController utilizzano NSNotificationCenter per inviare notifiche in merito alla prossima riproduzione della riproduzione. Gli altri ViewController ricevono una notifica e mettono in pausa la riproduzione nelle rispettive istanze YTPlayerView.
  • Quando possibile, riutilizza le istanze YTPlayerView caricate esistenti. Quando devi modificare un video in una visualizzazione, non creare una nuova istanza UIView o nuova istanza YTPlayerView e non chiamare loadVideoId: o loadPlaylistId:. Utilizza invece la famiglia di funzioni cueVideoById:startSeconds:, che non ricaricano WebView. Si verifica un ritardo notevole durante il caricamento dell'intero player IFrame.
  • Questo player non può riprodurre video privati, ma può riprodurre video non in elenco. Poiché questa libreria aggrega il player iframe esistente, il comportamento del player dovrebbe essere quasi identico a quello di un player incorporato in una pagina web in un browser per dispositivi mobili.

Contributi

Poiché questo è un progetto open source, invia correzioni e miglioramenti al ramo master del progetto GitHub.