Intégrer des vidéos YouTube dans des applications iOS avec la bibliothèque d'aide YouTube
Restez organisé à l'aide des collections
Enregistrez et classez les contenus selon vos préférences.
youtube-ios-player-helper est une bibliothèque Open Source qui vous aide à intégrer un lecteur iFrame YouTube dans une application iOS. La bibliothèque crée un WebView et fait le lien entre le code Objective-C de votre application et le code JavaScript du lecteur YouTube, ce qui permet à l'application iOS de contrôler le lecteur YouTube. Cet article décrit la procédure à suivre pour installer la bibliothèque et commencer à l'utiliser depuis votre application iOS.
Installation
Cet article suppose que vous avez créé un projet iOS d'application Single View ciblant la dernière version d'iOS et que vous ajoutez les fichiers suivants lors de la création du projet:
Main.storyboardViewController.hViewController.m
Vous pouvez installer la bibliothèque via CocoaPods ou en copiant les fichiers source et de bibliothèque depuis la page GitHub du projet.
- La bibliothèque peut être installée via CocoaPods. Les fichiers source et de bibliothèque sont également disponibles sur la page GitHub du projet et peuvent être copiés dans un projet existant.
Installer la bibliothèque via CocoaPods
Si votre projet utilise CocoaPods, ajoutez la ligne ci-dessous à votre Podfile pour installer la bibliothèque.
Sur cette ligne, remplacez x.y.z par la dernière version du pod, qui sera identifiée sur la page GitHub du projet.
pod "youtube-ios-player-helper", "~> x.y.z"
Lorsque l'invite de ligne de commande s'affiche, saisissez pod install pour mettre à jour votre espace de travail avec les dépendances.
Conseil: N'oubliez pas que lorsque vous utilisez CocoaPods, vous devez ouvrir le fichier .xcworkspace dans Xcode, et non le fichier .xcodeproj.
Pour en savoir plus, consultez le tutoriel CocoaPods.
Installer manuellement la bibliothèque
Pour installer la bibliothèque d'aide manuellement, téléchargez la source via le lien de téléchargement de GitHub ou clonez le dépôt. Une fois que vous disposez d'une copie locale du code, procédez comme suit:
Ouvrez l'exemple de projet dans Xcode ou Finder.
Sélectionnez YTPlayerView.h, YTPlayerView.m, puis le dossier Assets. Si vous ouvrez l'espace de travail dans Xcode, ils sont disponibles sous Pods -> Pods de développement -> YouTube-Player-iOS-Helper et Pods -> Pods de développement -> YouTube-Player-iOS-Helper -> Ressources. Dans le Finder, ceux-ci sont disponibles dans le répertoire racine du projet, dans les répertoires Classes et Assets.
Faites glisser ces fichiers et dossiers dans votre projet. Assurez-vous que l'option Copier les éléments dans le dossier du groupe de destination est cochée. Lorsque vous faites glisser le dossier "Assets" (Éléments), assurez-vous que l'option Create Folder References for any added folders (Créer des références de dossiers pour tous les dossiers ajoutés) est cochée.
La bibliothèque devrait maintenant être installée.
Ajoutez un YTPlayerView via Interface Builder ou le story-board
Pour ajouter un YTPlayerView via Interface Builder ou le story-board:
-
Faites glisser une instance UIView vers votre vue.
-
Sélectionnez l'inspecteur d'identité et remplacez la classe de la vue par YTPlayerView.
-
Ouvrez ViewController.h et ajoutez l'en-tête suivant:
#import “YTPlayerView.h”
Ajoutez également la propriété suivante:
@property(nonatomic, strong) IBOutlet YTPlayerView *playerView;
-
Dans Interface Builder, créez une connexion entre l'élément View que vous avez défini à l'étape précédente et la propriété playerView de votre contrôleur de vue.
-
Ouvrez maintenant ViewController.m et ajoutez le code suivant à la fin de votre méthode viewDidLoad:
[self.playerView loadWithVideoId:@"M7lc1UVf-VE"];
Créez et exécutez votre application. Lorsque la miniature vidéo se charge, appuyez dessus pour lancer le lecteur vidéo en plein écran.
Contrôler la lecture des vidéos
La méthode ViewController::loadWithVideoId: comporte une variante, loadWithVideoId:playerVars:, qui permet aux développeurs de transmettre des variables de lecteur supplémentaires à la vue. Ces variables de lecteur correspondent aux paramètres de lecteur dans l'API Player iFrame. Le paramètre playsinline permet de lire la vidéo directement dans la vue plutôt que de passer en mode plein écran. Lorsqu'une vidéo est intégrée, l'application iOS peut contrôler la lecture de manière programmatique.
Remplacez l'appel loadWithVideoId: par ce code:
NSDictionary *playerVars = @{
@"playsinline" : @1,
};
[self.playerView loadWithVideoId:@"M7lc1UVf-VE" playerVars:playerVars];
Ouvrez le storyboard ou l'interface. Faites glisser deux boutons sur votre vue, et attribuez-leur les libellés Lecture et Arrêter. Ouvrez ViewController.h et ajoutez les méthodes suivantes, qui seront mappées aux boutons:
- (IBAction)playVideo:(id)sender;
- (IBAction)stopVideo:(id)sender;
Ouvrez maintenant ViewController.m et définissez ces deux fonctions:
- (IBAction)playVideo:(id)sender {
[self.playerView playVideo];
}
- (IBAction)stopVideo:(id)sender {
[self.playerView stopVideo];
}
La plupart des fonctions de l'API iFrame Player ont des équivalents en Objective-C, bien que certains noms puissent varier légèrement pour correspondre aux directives de codage Objective-C. Les méthodes de contrôle du volume de la vidéo font l'objet d'exceptions notables, car elles sont contrôlées par le matériel du téléphone ou par des instances UIView conçues à cet effet, comme MPVolumeView.
Ouvrez votre storyboard ou Interface Builder et faites glisser les boutons Play (Lecture) et Stop (Arrêt) aux méthodes playVideo: et stopVideo:.
Maintenant, créez et exécutez l'application. Une fois la miniature chargée, vous devriez pouvoir lire et arrêter la vidéo à l'aide des commandes natives et des commandes du lecteur.
Gérer les rappels des joueurs
Il peut être utile de gérer de manière automatisée les événements de lecture, tels que les changements d'état de la lecture et les erreurs de lecture. Dans l'API JavaScript, cela est effectué avec les écouteurs d'événements.
Dans Objective-C,cela se fait avec un délégué.
Le code suivant montre comment mettre à jour la déclaration d'interface dans ViewController.h afin que la classe soit conforme au protocole délégué. Modifiez la déclaration d'interface de ViewController.h comme suit:
@interface ViewController : UIViewController<YTPlayerViewDelegate>
YTPlayerViewDelegate est un protocole de gestion des événements de lecture dans le lecteur.
Pour mettre à jour ViewController.m afin de gérer certains des événements, vous devez d'abord définir l'instance ViewController en tant que délégué de l'instance YTPlayerView. Pour effectuer cette modification, ajoutez la ligne suivante à la méthode viewDidLoad dans ViewController.h.
self.playerView.delegate = self;
Ajoutez maintenant la méthode suivante à 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;
}
}
Compilez et exécutez l'application. Observez la sortie du journal dans Xcode lorsque l'état du lecteur change.
Vous devriez voir des mises à jour lorsque la vidéo est lue ou arrêtée.
Pour plus de commodité et de lisibilité, la bibliothèque fournit les constantes commençant par le préfixe kYT*. Pour obtenir la liste complète de ces constantes, consultez la section YTPlayerView.m.
Bonnes pratiques et limites
La bibliothèque s'appuie sur l'API iFrame Player en créant un fichier WebView et en affichant le code HTML et JavaScript requis pour un lecteur de base. L'objectif de la bibliothèque est d'être le plus facile possible pour regrouper les méthodes que les développeurs doivent fréquemment écrire dans un package. Quelques restrictions sont à noter:
- La bibliothèque n'accepte pas la lecture vidéo simultanée dans plusieurs instances
YTPlayerView. Si votre application comporte plusieurs instances YTPlayerView, il est recommandé de suspendre ou d'arrêter la lecture dans toutes les instances existantes avant de lancer la lecture dans une autre instance. Dans l'exemple d'application fourni avec le projet, les ViewControllers utilisent NSNotificationCenter pour envoyer des notifications indiquant que la lecture est sur le point de commencer. Les autres ViewController sont informés et suspendront la lecture dans leurs instances YTPlayerView.
- Si possible, réutilisez les instances
YTPlayerView déjà chargées. Lorsqu'une vidéo doit être modifiée dans une vue, ne créez pas d'instance UIView ni d'instance YTPlayerView, et n'appelez pas loadVideoId: ni loadPlaylistId:. Utilisez plutôt la famille de fonctions cueVideoById:startSeconds:, qui ne recharge pas WebView. Un délai notable est observé lors du chargement de l'intégralité du lecteur iFrame.
- Ce lecteur ne peut pas lire de vidéos privées, mais il peut lire des vidéos non répertoriées. Étant donné que cette bibliothèque encapsule le lecteur iFrame existant, le comportement du lecteur doit être quasiment identique à celui d'un lecteur intégré sur une page Web d'un navigateur mobile.
Sauf indication contraire, le contenu de cette page est régi par une licence Creative Commons Attribution 4.0, et les échantillons de code sont régis par une licence Apache 2.0. Pour en savoir plus, consultez les Règles du site Google Developers. Java est une marque déposée d'Oracle et/ou de ses sociétés affiliées.
Dernière mise à jour le 2023/02/22 (UTC).
[[["Facile à comprendre","easyToUnderstand","thumb-up"],["J'ai pu résoudre mon problème","solvedMyProblem","thumb-up"],["Autre","otherUp","thumb-up"]],[["Il n'y a pas l'information dont j'ai besoin","missingTheInformationINeed","thumb-down"],["Trop compliqué/Trop d'étapes","tooComplicatedTooManySteps","thumb-down"],["Obsolète","outOfDate","thumb-down"],["Problème de traduction","translationIssue","thumb-down"],["Mauvais exemple/Erreur de code","samplesCodeIssue","thumb-down"],["Autre","otherDown","thumb-down"]],["Dernière mise à jour le 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)."]]
