Incorporamento dei video di YouTube nelle applicazioni iOS con la Raccolta di assistenza di YouTube
Mantieni tutto organizzato con le raccolte
Salva e classifica i contenuti in base alle tue preferenze.
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.storyboardViewController.hViewController.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:
Apri il progetto di esempio in Xcode o Finder.
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.
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:
-
Trascina un'istanza UIView nella visualizzazione.
-
Seleziona lo strumento di controllo delle identità e imposta la classe di visualizzazione su
YTPlayerView.
-
Apri ViewController.h e aggiungi l'intestazione seguente:
#import “YTPlayerView.h”
Aggiungi anche la seguente proprietà:
@property(nonatomic, strong) IBOutlet YTPlayerView *playerView;
-
Nel Builder dell'interfaccia, crea una connessione dall'elemento View che hai definito nel passaggio precedente alla proprietà playerView del controller di visualizzazione.
-
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.
Salvo quando diversamente specificato, i contenuti di questa pagina sono concessi in base alla licenza Creative Commons Attribution 4.0, mentre gli esempi di codice sono concessi in base alla licenza Apache 2.0. Per ulteriori dettagli, consulta le norme del sito di Google Developers. Java è un marchio registrato di Oracle e/o delle sue consociate.
Ultimo aggiornamento 2023-02-22 UTC.
[[["Facile da capire","easyToUnderstand","thumb-up"],["Il problema è stato risolto","solvedMyProblem","thumb-up"],["Altra","otherUp","thumb-up"]],[["Mancano le informazioni di cui ho bisogno","missingTheInformationINeed","thumb-down"],["Troppo complicato/troppi passaggi","tooComplicatedTooManySteps","thumb-down"],["Obsoleti","outOfDate","thumb-down"],["Problema di traduzione","translationIssue","thumb-down"],["Problema relativo a esempi/codice","samplesCodeIssue","thumb-down"],["Altra","otherDown","thumb-down"]],["Ultimo aggiornamento 2023-02-22 UTC."],[[["\u003cp\u003eThis library, \u003ccode\u003eyoutube-ios-player-helper\u003c/code\u003e, facilitates embedding a YouTube iframe player within an iOS application by creating a \u003ccode\u003eWebView\u003c/code\u003e and bridging Objective-C code with the player's JavaScript.\u003c/p\u003e\n"],["\u003cp\u003eInstallation is possible via CocoaPods by adding a specific line to the Podfile, or manually by downloading the source code from the project's GitHub page and dragging specific files into your iOS project.\u003c/p\u003e\n"],["\u003cp\u003eA \u003ccode\u003eYTPlayerView\u003c/code\u003e can be added through Interface Builder or Storyboard by dragging a \u003ccode\u003eUIView\u003c/code\u003e, changing its class to \u003ccode\u003eYTPlayerView\u003c/code\u003e, and connecting it to a \u003ccode\u003eplayerView\u003c/code\u003e property in the \u003ccode\u003eViewController.h\u003c/code\u003e file.\u003c/p\u003e\n"],["\u003cp\u003eThe library allows for controlling video playback, enabling inline play and manipulation using the IFrame Player API through Objective-C equivalent methods.\u003c/p\u003e\n"],["\u003cp\u003eThe library allows the handling of playback events, such as start and stop, through a delegate protocol, \u003ccode\u003eYTPlayerViewDelegate\u003c/code\u003e, where the \u003ccode\u003eViewController\u003c/code\u003e conforms to this protocol to capture those events.\u003c/p\u003e\n"]]],["The `youtube-ios-player-helper` library enables embedding and controlling a YouTube iframe player within an iOS app. Installation is via CocoaPods or manual file copying from GitHub. To use, a `YTPlayerView` is added to the storyboard, connected to a `ViewController`, and initialized with a video ID. Playback is controlled through Objective-C methods (e.g., `playVideo`, `stopVideo`) linked to UI elements. Developers can pass player variables, and the library supports delegate-based event handling for playback states. The library is based on the iFrame Player API and includes a few limitations.\n"],null,["# Embed YouTube Videos in iOS Applications with the YouTube Helper Library\n\nThe `youtube-ios-player-helper` is an open source library that helps you embed a\nYouTube iframe player into an iOS application. The library creates a\n`WebView` and a bridge between your application's Objective-C code and the\nYouTube player's JavaScript code, thereby allowing the iOS application to control the\nYouTube player. This article describes the steps to install the library and get started\nusing it from your iOS application.\n\nInstallation\n------------\n\nThis article assumes you have created a new Single View Application iOS project targeting\nthe latest version of iOS, and that you add the following files when creating the\nproject:\n\n- `Main.storyboard`\n- `ViewController.h`\n- `ViewController.m`\n\nYou can install the library via\n[CocoaPods](https://cocoapods.org/) or by copying the library\nand source files from the\n[project's GitHub page](https://github.com/youtube/youtube-ios-player-helper).\n\n- The library is available to install via CocoaPods. Alternatively, the library and source files are available via the project's GitHub page and can be copied into an existing project.\n\n### Install the library via CocoaPods\n\nIf your project uses CocoaPods, add the line below to your Podfile to install the library.\nIn that line, replace `x.y.z` with the latest pod version, which will be\nidentified on the project's GitHub page. \n\n```text\npod \"youtube-ios-player-helper\", \"~\u003e x.y.z\"\n```\n\nAt the command line prompt, type `pod install` to update your workspace with the\ndependencies.\n\nTip: Remember that when using CocoaPods, you must open the `.xcworkspace` file\nin Xcode, not the `.xcodeproj` file.\n\nCheck out the [CocoaPods\ntutorial](https://guides.cocoapods.org/using/getting-started.html) to learn more.\n\n### Manually install the library\n\nTo install the helper library manually, either download the source via\n[GitHub's download link](https://github.com/youtube/youtube-ios-player-helper) or\nclone the repository. Once you have a local copy of the code, follow these steps:\n\n1. Open the sample project in Xcode or Finder.\n\n2. Select `YTPlayerView.h`, `YTPlayerView.m`, and the\n **Assets** folder. If you open the workspace in Xcode, these are available\n under **Pods -\\\u003e Development Pods -\\\u003e YouTube-Player-iOS-Helper** and\n **Pods -\\\u003e Development Pods -\\\u003e YouTube-Player-iOS-Helper -\\\u003e Resources** . In the Finder,\n these are available in the project's root directory in the **Classes** and\n **Assets** directories.\n\n3. Drag these files and folders into your project. Make sure the **Copy items into\n destination group's folder** option is checked. When dragging the Assets folder, make\n sure that the **Create Folder References for any added folders** option is\n checked.\n\nThe library should now be installed.\n\nAdd a `YTPlayerView` via Interface Builder or the Storyboard\n------------------------------------------------------------\n\nTo add a `YTPlayerView` via Interface Builder or the Storyboard:\n\n1. Drag a `UIView` instance onto your View.\n\n2. Select the Identity Inspector and change the class of the view to\n `YTPlayerView`.\n\n3. Open `ViewController.h` and add the following header:\n\n ```objective-c\n #import \"YTPlayerView.h\"\n ```\n\n Also add the following property: \n\n ```objective-c\n @property(nonatomic, strong) IBOutlet YTPlayerView *playerView;\n ```\n4. In Interface Builder, create a connection from the View element that you defined in the\n previous step to your View Controller's `playerView` property.\n\n5. Now open `ViewController.m` and add the following code to the end of your\n `viewDidLoad` method:\n\n ```objective-c\n [self.playerView loadWithVideoId:@\"M7lc1UVf-VE\"];\n ```\n\nBuild and run your application. When the video thumbnail loads, tap the video thumbnail to\nlaunch the fullscreen video player.\n\nControl video playback\n----------------------\n\nThe `ViewController::loadWithVideoId:` method has a variant,\n`loadWithVideoId:playerVars:`, that allows developers to pass additional player\nvariables to the view. These player variables correspond to the\n[player parameters in the\nIFrame Player API](https://developers.google.com/youtube/player_parameters). The `playsinline` parameter enables the video to play\ndirectly in the view rather than playing fullscreen. When a video is playing inline, the\ncontaining iOS application can programmatically control playback.\n\nReplace the `loadWithVideoId:` call with this code: \n\n```objective-c\nNSDictionary *playerVars = @{\n @\"playsinline\" : @1,\n};\n[self.playerView loadWithVideoId:@\"M7lc1UVf-VE\" playerVars:playerVars];\n```\n\nOpen up the storyboard or Interface Builder. Drag two buttons onto your View, labeling them\n**Play** and **Stop** . Open `ViewController.h` and add these methods, which\nwill be mapped to the buttons: \n\n```objective-c\n- (IBAction)playVideo:(id)sender;\n- (IBAction)stopVideo:(id)sender;\n```\n\nNow open `ViewController.m` and define these two functions: \n\n```objective-c\n- (IBAction)playVideo:(id)sender {\n [self.playerView playVideo];\n}\n\n- (IBAction)stopVideo:(id)sender {\n [self.playerView stopVideo];\n}\n```\n\nMost of the IFrame Player API functions have Objective-C equivalents, though some of the\nnaming may differ slightly to more closely match Objective-C coding guidelines. Notable\nexceptions are methods controlling the volume of the video, since these are controlled by\nthe phone hardware or with built in `UIView` instances designed for this purpose,\nsuch as [`MPVolumeView`](https://developer.apple.com/library/ios/documentation/mediaplayer/reference/MPVolumeView_Class/Reference/Reference.html).\n\nOpen your storyboard or Interface Builder and control-drag to connect the **Play** and\n**Stop** buttons to the `playVideo:` and `stopVideo:` methods.\n\nNow build and run the application. Once the video thumbnail loads, you should be able to\nplay and stop the video using native controls in addition to the player controls.\n\nHandle player callbacks\n-----------------------\n\nIt can be useful to programmatically handle playback events, such as playback state changes\nand playback errors. In the JavaScript API, this is done with\n[event listeners](https://developers.google.com/youtube/iframe_api_reference#Adding_event_listener).\nIn Objective-C,this is done with a\n[delegate](https://developer.apple.com/library/ios/documentation/general/conceptual/CocoaEncyclopedia/DelegatesandDataSources/DelegatesandDataSources.html).\n\n\nThe following code shows how to update the interface declaration in\n`ViewController.h` so the class conforms to the delegate protocol. Change\n`ViewController.h`'s interface declaration as follows: \n\n```objective-c\n@interface ViewController : UIViewController\u003cYTPlayerViewDelegate\u003e\n```\n\n`YTPlayerViewDelegate` is a protocol for handling playback events in the player.\nTo update `ViewController.m` to handle some of the events, you first need to set\nthe `ViewController` instance as the delegate of the `YTPlayerView`\ninstance. To make this change, add the following line to the `viewDidLoad` method\nin `ViewController.h`. \n\n```objective-c\nself.playerView.delegate = self;\n```\n\nNow add the following method to `ViewController.m`: \n\n```objective-c\n- (void)playerView:(YTPlayerView *)playerView didChangeToState:(YTPlayerState)state {\n switch (state) {\n case kYTPlayerStatePlaying:\n NSLog(@\"Started playback\");\n break;\n case kYTPlayerStatePaused:\n NSLog(@\"Paused playback\");\n break;\n default:\n break;\n }\n}\n```\n\nBuild and run the application. Watch the log output in Xcode as the player state changes.\nYou should see updates when the video is played or stopped.\n\nThe library provides the constants that begin with the `kYT*` prefix for\nconvenience and readability. For a full list of these constants, look at\n`YTPlayerView.m`.\n\nBest practices and limitations\n------------------------------\n\nThe library builds on top of the IFrame Player API by creating a `WebView` and\nrendering the HTML and JavaScript required for a basic player. The library's goal is to be\nas easy-to-use as possible, bundling methods that developers frequently have to write into a\npackage. There are a few limitations that should be noted:\n\n- The library does not support concurrent video playback in multiple `YTPlayerView` instances. If your application has multiple `YTPlayerView` instances, a recommended best practice is to pause or stop playback in any existing instances before starting playback in a different instance. In the example application that ships with the project, the ViewControllers make use of `NSNotificationCenter` to dispatch notifications that playback is about to begin. Other ViewControllers are notified and will pause playback in their `YTPlayerView` instances.\n- Reuse your existing, loaded `YTPlayerView` instances when possible. When a video needs to be changed in a View, don't create a new `UIView` instance or a new `YTPlayerView` instance, and don't call either `loadVideoId:` or `loadPlaylistId:`. Instead, use the `cueVideoById:startSeconds:` family of functions, which do not reload the `WebView`. There is a noticeable delay when loading the entire IFrame player.\n- This player cannot play private videos, but it can play [unlisted videos](https://support.google.com/youtube/answer/157177). Since this library wraps the existing iframe player, the player's behavior should be nearly identical to that of a player embedded on a webpage in a mobile browser.\n\nContributions\n-------------\n\nSince this is an open-source project, please submit fixes and improvements to the\n[master branch of the GitHub\nproject](https://github.com/youtube/youtube-ios-player-helper)."]]
