Google utilise la technologie IA pour traduire le contenu dans votre langue préférée. Les traductions générées par IA peuvent contenir des erreurs.

Intégrer des vidéos YouTube dans des applications iOS avec la bibliothèque d'assistance YouTube

Le youtube-ios-player-helper est une bibliothèque Open Source qui vous aide à intégrer un lecteur iframe YouTube dans une application iOS. Elle crée une WebView et un pont 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 les étapes à 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 à vue unique ciblant la dernière version d'iOS et que vous ajoutez les fichiers suivants lors de la création du projet :

Main.storyboard
ViewController.h
ViewController.m

Vous pouvez installer la bibliothèque via CocoaPods ou en copiant la bibliothèque et les fichiers sources à partir de la page GitHub du projet.

La bibliothèque peut être installée via CocoaPods. Vous pouvez également la copier, ainsi que les fichiers sources dans un projet existant à partir de la page GitHub du projet.

Installer la bibliothèque via CocoaPods

Si votre projet utilise CocoaPods, ajoutez la ligne ci-dessous à votre Podfile pour installer la bibliothèque. Dans 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"

À l'invite de ligne de commande, 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 la bibliothèque manuellement

Pour installer manuellement la bibliothèque d'assistance, 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 le Finder.
Sélectionnez YTPlayerView.h, YTPlayerView.m et le dossier Assets. Si vous ouvrez l'espace de travail dans Xcode, ces éléments sont disponibles sous Pods -> Development Pods -> YouTube-Player-iOS-Helper et Pods -> Development Pods -> YouTube-Player-iOS-Helper -> Resources. Dans le Finder, ils sont disponibles dans le répertoire racine du projet, dans les dossiers Classes et Assets.
Faites glisser ces fichiers et dossiers dans votre projet. Assurez-vous que l'option Copy items into destination group’s folder (Copier les éléments dans le dossier du groupe de destination) est cochée. Lorsque vous faites glisser le dossier Assets, assurez-vous que l'option Create Folder References for any added folders (Créer des références de dossier pour tous les dossiers ajoutés) est cochée.

La bibliothèque doit maintenant être installée.

Ajouter une `YTPlayerView` via Interface Builder ou le Storyboard

Pour ajouter une YTPlayerView via Interface Builder ou le Storyboard :

Faites glisser une instance UIView sur 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 viewDidLoad méthode :
```
[self.playerView loadWithVideoId:@"M7lc1UVf-VE"];
```

Créez et exécutez votre application. Lorsque la miniature de la vidéo se charge, appuyez dessus pour lancer le lecteur vidéo en plein écran.

Contrôler la lecture vidéo

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 du lecteur dans l' API IFrame Player. Le paramètre playsinline permet de lire la vidéo directement dans la vue plutôt qu'en plein écran. Lorsqu'une vidéo est lue en ligne, l' application iOS qui la contient peut contrôler la lecture par programmation.

Remplacez l'appel loadWithVideoId: par le code suivant :

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

Ouvrez le Storyboard ou Interface Builder. Faites glisser deux boutons sur votre vue et nommez-les Lecture et Arrêt. Ouvrez ViewController.h et ajoutez ces méthodes, 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 Objective-C, bien que certains des noms puissent différer légèrement pour mieux correspondre aux consignes de codage Objective-C. Les exceptions notables sont les méthodes qui contrôlent le volume de la vidéo, car elles sont contrôlées par le matériel du téléphone ou par des instances UIView intégrées conçues à cet effet, telles que MPVolumeView.

Ouvrez votre Storyboard ou Interface Builder, puis faites glisser le bouton de commande pour connecter les boutons Lecture et Arrêt aux méthodes playVideo: et stopVideo:.

Créez et exécutez l'application. Une fois la miniature de la vidéo chargée, vous devriez pouvoir lire et arrêter la vidéo à l'aide des commandes natives en plus des commandes du lecteur.

Gérer les rappels du lecteur

Il peut être utile de gérer par programmation les événements de lecture, tels que les changements d'état de lecture et les erreurs de lecture. Dans l'API JavaScript, cela se fait avec des é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 de délégué. Modifiez la déclaration d'interface de ViewController.h comme suit :

@interface ViewController : UIViewController<YTPlayerViewDelegate>

YTPlayerViewDelegate est un protocole permettant de gérer les événements de lecture dans le lecteur. Pour mettre à jour ViewController.m afin de gérer certains événements, vous devez d'abord définir l'instance ViewController comme 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;
  }
}

Créez 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.

La bibliothèque fournit les constantes qui commencent par le kYT* préfixe pour commodité et lisibilité. Pour obtenir la liste complète de ces constantes, consultez YTPlayerView.m.

Bonnes pratiques et limites

La bibliothèque s'appuie sur l'API IFrame Player en créant une WebView et affichant le code HTML et JavaScript requis pour un lecteur de base. L'objectif de la bibliothèque est d'être aussi facile à utiliser que possible, en regroupant dans un package les méthodes que les développeurs doivent souvent écrire. Voici quelques limites à prendre en compte :

La bibliothèque n'est pas compatible avec la lecture vidéo simultanée dans plusieurs YTPlayerView instances. Si votre application comporte plusieurs YTPlayerView instances, il est recommandé de mettre en pause ou d'arrêter la lecture dans les instances existantes avant de la démarrer 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 va commencer. D'autres ViewControllers sont avertis et mettent en pause la lecture dans leurs YTPlayerView instances.
Dans la mesure du possible, réutilisez vos instances YTPlayerView existantes et chargées. Lorsqu'une vidéo doit être modifiée dans une vue, ne créez pas de nouvelle instance UIView ni de nouvelle instance YTPlayerView, et n'appelez pas loadVideoId: ni loadPlaylistId:. Utilisez plutôt la cueVideoById:startSeconds: famille de fonctions, qui ne recharge pas la WebView. Le chargement de l'intégralité du lecteur IFrame entraîne un délai notable.
Ce lecteur ne peut pas lire les vidéos privées, mais il peut lire les vidéos non répertoriées . Étant donné que cette bibliothèque encapsule le lecteur iframe existant, le comportement du lecteur doit être presque identique à celui d'un lecteur intégré à une page Web dans un navigateur mobile.

Contributions

Comme il s'agit d'un projet Open Source, veuillez envoyer les corrections et les améliorations à la branche principale du projet GitHub.

Intégrer des vidéos YouTube dans des applications iOS avec la bibliothèque d'assistance YouTube Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.