Lecture de vidéos sur iOS4 avec le cadre MediaPlayer

Ce tutoriel est une vue d'ensemble étape par étape de la procédure d'intégration du framework MediaPlayer et de l'utilisation de la classe MPMoviePlayerController dans iOS4. Grâce à ces connaissances, vous serez en mesure de lire un contenu multimédia en plein écran dans vos propres applications ou d'afficher des vidéos sous la forme d'une sous-vue de taille personnalisée dans vos propres contrôleurs de vue. Lire la suite pour plus!

Configuration du projet et aperçu

Ce tutoriel utilisera une application simple appelée "BigBuckBunny" pour illustrer l'utilisation du cadre MediaPlayer et de la classe MPMoviePlayerController pour iOS 4 SDK. Cette application diffusera un extrait du court métrage d'animation Creative Buck 2008, Big Buck Bunny. En téléchargeant le projet de démonstration joint à ce message, vous pourrez suivre toutes les étapes de ce didacticiel. Toutefois, si vous avez déjà un projet iPhone dans lequel vous souhaitez lire vos propres films, vous devriez toujours pouvoir suivre dans votre propre code avec seulement de légères modifications à ces étapes. Le téléchargement joint à cet article contient deux versions du projet: BigBuckBunny-Start doit être utilisé si vous souhaitez intégrer toutes les étapes au fur et à mesure, et BigBuckBunny-Completed est le résultat final de ce tutoriel.

Étape 1: Importer la structure MediaPlayer

CTRL + Clic (ou clic droit) sur le dossier "Frameworks" dans le volet "Groupes et fichiers" de Xcode. Sélectionner Ajouter> Cadres existants du menu déroulant.

Sélectionnez "MediaPlayer.framework" dans la liste des options présentées, puis cliquez sur "Ajouter".

Étape 2: Importez le cadre MediaPlayer et déclarez la méthode playMovie

Maintenant que vous avez ajouté la structure du lecteur multimédia à votre projet, vous devez importer le code de cette structure dans le contrôleur de vue qui sera chargé de la lecture du film. Aller au BigBuckBunnyViewController.h file, et insérez la ligne de code suivante sous le UIKit #importation ligne:

 #importation  #importation  

Cette ligne de code mettra le contrôleur de vue au courant de tout ce que le MediaPlayer.framework a à offrir.

Ensuite, nous devons déclarer une méthode d'instance de notre contrôleur de vue qui déclenchera la lecture du film. Juste au dessus du @fin déclaration dans le fichier d’en-tête, ajoutez cette ligne:

 -(IBAction) playMovie: (id) expéditeur; 

Avec notre Lancer le film méthode déclarée, nous sommes prêts à commencer à écrire notre code d'implémentation de contrôleur de vue.

Étape 3: Implémentez la méthode playMovie

Ouvrez le BigBuckBunnyViewController.m fichier. Implémentez la méthode playMovie avec les lignes de code suivantes:

 -(IBAction) playMovie: expéditeur (id) NSString * filepath = [[NSBundle mainBundle] pathForResource: @ "big-buck-bunny-clip" ofType: @ "m4v"]; NSURL * fileURL = [NSURL fileURLWithPath: chemin du fichier]; MPMoviePlayerController * moviePlayerController = [[MPMoviePlayerController alloc] initWithContentURL: fileURL]; [self.view addSubview: moviePlayerController.view]; moviePlayerController.fullscreen = YES; [moviePlayerController play];  

Sur la ligne 3, nous créons une chaîne NSString contenant le chemin d'accès à notre fichier de film. Sur la ligne 4, nous utilisons ce chemin de fichier pour créer un NSURL dans notre film local. Sur la ligne 5, nous implémentons cela en passant le NSURL dans le initWithContentURL: méthode du MPMoviePlayerController objet. Remarquez comment nous avons alloué de la mémoire au lecteur de film sur cette ligne. nous devrons le libérer plus tard! Sur la ligne 6, nous ajoutons la vue MPMoviePlayerController à notre sous-vue de contrôleur de vue personnalisée afin qu'elle apparaisse à l'écran, à la ligne 7, nous spécifions que nous voulons que la vidéo soit lue en mode plein écran et à la ligne 8, nous commençons la lecture du film..

Avant de pouvoir tester notre code, nous devons associer l'action "Touch Up Inside" de notre bouton à la méthode playMovie. Pour ce faire, ouvrez BigBuckBunnyViewController.xib dans Interface Builder. CTRL + Clic (ou clic droit) sur le UIButton personnalisé au centre de l'écran pour afficher les actions pour cet élément. Faites glisser le cercle à côté de "Retouche à l'intérieur" vers l'objet "Propriétaire du fichier", puis sélectionnez le texte "playMovie:" qui apparaît. Enregistrez votre progression dans Interface Builder avant de revenir à Xcode..

REMARQUE: vous devez en fait sélectionner playMovie lorsqu'il apparaît pour terminer cette étape. Veillez à enregistrer vos modifications!

Si vous construisez et déboguez le projet à ce stade, vous verrez que la lecture du film fonctionne comme prévu lorsque vous appuyez sur le bouton UIB personnalisé. toutefois, ne célébrez pas encore, car nous n'avons pas encore terminé.

Comme mentionné précédemment, nous allouons explicitement de la mémoire à l'objet moviePlayerController, mais nous n'avons pas encore libéré cette mémoire. C'est un scénario intéressant. Nous ne pouvons pas publier explicitement l'objet dans la méthode dans laquelle nous l'avons alloué, car notre film sera toujours lu au moment où cette méthode sera terminée. Il est également dangereux d’autoriser la libération automatique de l’objet, car nous ne savons pas si notre film sera toujours lu la prochaine fois que le pool de libération automatique sera vidé. Heureusement, l’objet MPMoviePlayerController est préconfiguré pour gérer ce scénario et envoie une notification appelée MPMoviePlayerPlaybackDidFinishNotification NSNotificationCenter à la fin de la lecture. Afin de recevoir cette notification, nous devons enregistrer un "observateur" pour répondre à cette notification spécifique. Pour ce faire, modifiez notre Lancer le film méthode comme suit:

 NSString * filepath = [[NSBundle mainBundle] pathForResource: @ "big-buck-bunny-clip" ofType: @ "m4v"]; NSURL * fileURL = [NSURL fileURLWithPath: chemin du fichier]; MPMoviePlayerController * moviePlayerController = [[MPMoviePlayerController alloc] initWithContentURL: fileURL]; [[NSNotificationCenter defaultCenter] addObserver: sélecteur automatique: @selector (moviePlaybackComplete :) nom: MPMoviePlayerPlaybackDidFinishNotification objet: moviePlayerController]; [self.view addSubview: moviePlayerController.view]; moviePlayerController.fullscreen = YES; [moviePlayerController play]; 

Nous devons maintenant créer moviePlaybackComplete:, le sélecteur que nous venons d'inscrire. Ajouter ce qui suit sous le Lancer le film méthode:

 - (void) moviePlaybackComplete: (NSNotification *) notification MPMoviePlayerController * moviePlayerController = [objet de notification]; [[NSNotificationCenter defaultCenter] removeObserver: nom propre: MPMoviePlayerPlaybackDidFinishNotification object: moviePlayerController]; [moviePlayerController.view removeFromSuperview]; [version de moviePlayerController];  

Rappelez-vous le paramètre "objet" que nous avons défini sur moviePlayerController dans le Lancer le film méthode ci-dessus? Quel que soit l'objet que vous définissiez pour cette valeur, il sera envoyé avec la notification ultérieurement. Sur la ligne 3, nous récupérons cet objet avec le [objet de notification] déclaration et la référençant avec un nouveau pointeur MPMoviePlayerController. Ensuite, à la ligne 4, nous envoyons à nouveau un message au NSNotificationCenter, en supprimant cette fois l’observateur enregistré. Lancer le film. Sur la ligne 8, nous nettoyons notre contrôleur de vue personnalisé en supprimant la vue moviePlayerController de notre affichage. À la ligne 9, nous terminons en libérant la mémoire allouée à l’origine dans la Lancer le film méthode.

À ce stade, notre fichier d'implémentation devrait ressembler à ceci:

 #import "BigBuckBunnyViewController.h" @implementation BigBuckBunnyViewController - (IBAction) playMovie: (id) expéditeur NSString * filepath = ["NSBundle mainBundle] pathForResource: @" big-buck-bunny-clip ": NSURL * fileURL = [NSURL fileURLWithPath: chemin du fichier]; MPMoviePlayerController * moviePlayerController = [[MPMoviePlayerController alloc] initWithContentURL: fileURL]; [[NSNotificationCenter defaultCenter] addObserver: sélecteur automatique: @selector (moviePlaybackComplete :) nom: MPMoviePlayerPlaybackDidFinishNotification objet: moviePlayerController]; [self.view addSubview: moviePlayerController.view]; moviePlayerController.fullscreen = YES; [moviePlayerController play];  - (void) moviePlaybackComplete: (NSNotification *) notification MPMoviePlayerController * moviePlayerController = [objet de notification]; [[NSNotificationCenter defaultCenter] removeObserver: nom propre: MPMoviePlayerPlaybackDidFinishNotification object: moviePlayerController]; [moviePlayerController.view removeFromSuperview]; [version de moviePlayerController];  - (vide) dealloc [super dealloc];  @fin 

Toutes nos félicitations! Vous devriez maintenant avoir un lecteur de film qui fonctionne dans votre application. Le reste de ce tutoriel est dédié à la personnalisation du lecteur..

Étape 4: Personnaliser la taille d'affichage du film

Votre travail à l'étape précédente vous a permis de lire des films en mode plein écran. Cependant, le gros avantage des améliorations apportées à MPMoviePlayerController dans iOS 4 est que vous pouvez désormais spécifier une taille d'affichage personnalisée pour la lecture dans vos propres contrôleurs de vue. Pour en tirer parti, modifiez la méthode playMovie comme suit:

 [moviePlayerController.view setFrame: CGRectMake (38, 100, 250, 163)]; [self.view addSubview: moviePlayerController.view]; //moviePlayerController.fullscreen = YES; [moviePlayerController play]; 

Sur la ligne 1, nous créons une taille d’image personnalisée pour la lecture du film avec le CGRectMake une fonction. Les valeurs que j'ai entrées ont été extraites d'Interface Builder et correspondent à l'origine, à la hauteur et à la largeur du bouton UIB personnalisé que nous utilisons pour lire le film. Notez que j'ai également commenté la commande plein écran sur la ligne 4.

Si vous construisez et utilisez votre code de projet maintenant, vous devriez voir qu'en cliquant sur le bouton, la vidéo sera lue dans notre contrôleur de vue personnalisé, directement au-dessus du bouton UIB. Cela fonctionne assez bien, mais que faire si vous voulez déplacer le bouton un peu pour trouver le bon look? Il est un peu fastidieux de copier constamment les valeurs littérales CGRect tout le temps. Mettez à jour la méthode playMovie pour le faire de manière dynamique:

 -(IBAction) playMovie: (id) expéditeur UIButton * playButton = (UIButton *) expéditeur; NSString * filepath = [[NSBundle mainBundle] pathForResource: @ "big-buck-bunny-clip" ofType: @ "m4v"]; NSURL * fileURL = [NSURL fileURLWithPath: chemin du fichier]; MPMoviePlayerController * moviePlayerController = [[MPMoviePlayerController alloc] initWithContentURL: fileURL]; [[NSNotificationCenter defaultCenter] addObserver: sélecteur automatique: @selector (moviePlaybackComplete :) nom: MPMoviePlayerPlaybackDidFinishNotification objet: moviePlayerController]; [moviePlayerController.view setFrame: CGRectMake (playButton.frame.origin.x, playButton.frame.origin.y, playButton.frame.size.width, playButton.frame.size.height)]]; [self.view addSubview: moviePlayerController.view]; //moviePlayerController.fullscreen = YES; [moviePlayerController play];  

Sur la ligne 3 ci-dessus, nous transmettons le paramètre "sender" à un objet UIButton car nous savons que c'est le type d'objet qui enverra ce message à notre contrôleur de vue. Nous accédons ensuite directement à cet objet pour obtenir l'origine X et Y du bouton, ainsi que la largeur et la hauteur du bouton. Avec le code ci-dessus mis en œuvre, nous sommes libres de déplacer UIButton n’importe où sur le canevas sans avoir à vous soucier de la mise à jour constante de notre appel de fonction CGRectMake.

Un mot sur le mode mise à l'échelle

Lorsque vous affichez une vidéo dans un rectangle personnalisé, vous devrez parfois modifier le scalingMode propriété de l'objet MPMoviePlayerController. La définition de cette propriété déterminera l'adaptation de la séquence vidéo à la taille de lecture que vous avez définie. Les paramètres disponibles pour le mode de mise à l'échelle sont les suivants:

  • MPMovieScalingModeNone
  • MPMovieScalingModeAspectFit
  • MPMovieScalingModeAspectFill
  • MPMovieScalingModeFill

Chacune des options ci-dessus fonctionne comme vous le souhaitez, avec MPMovieScalingModeAspectFill et MPMovieScalingModeFill étant probablement les deux modifications les plus couramment utilisées. Le mode de mise à l'échelle par défaut est MPMovieScalingModeAspectFit.

Pour expérimenter cette propriété dans notre code, insérez la ligne suivante juste avant le [moviePlayerController play] déclaration:

 moviePlayerController.scalingMode = MPMovieScalingModeFill; 

Vous verrez que notre vidéo remplit maintenant tout l'espace disponible dans le rectangle de lecture.

Conclusion

Ce didacticiel a présenté une introduction fondamentale à l'utilisation de la classe MPMoviePlayerController avec la structure MediaPlayer. La classe MPMoviePlayerController a des options supplémentaires que nous n’avons pas abordées ici, mais je vais laisser l’exploration de celles-ci comme exercice pour le lecteur. Avec les bases de ce tutoriel en place, vous devriez pouvoir commencer à expérimenter vous-même! S'il vous plaît laissez des commentaires ou des questions que vous pourriez avoir dans la section commentaires ci-dessous. N'hésitez pas également à envoyer des questions ou des commentaires via mon compte twitter personnel @markhammonds ou le compte officiel Mobiletuts + twitter @mobtuts. Merci de votre lecture et bonne chance pour vos propres projets!