Reproducción de video en iOS4 con MediaPlayer Framework

Este tutorial es una descripción paso a paso de cómo integrar el marco de MediaPlayer y trabajar con la clase MPMoviePlayerController en iOS4. Con este conocimiento, podrá reproducir medios de pantalla completa en sus propias aplicaciones o visualizar videos como una subvista de tamaño personalizado en sus propios controladores de visualización. Sigue leyendo para más!

Configuración del proyecto y descripción general

Este tutorial usará una aplicación simple llamada "BigBuckBunny" para demostrar el uso del marco de MediaPlayer y la clase MPMoviePlayerController para el SDK de iOS 4. Esta aplicación reproducirá un clip de muestra del cortometraje animado creativo Big Buck Bunny 2008. Al descargar el proyecto de demostración adjunto a esta publicación, podrá seguir con precisión todos los pasos de este tutorial. Sin embargo, si ya tiene un proyecto de iPhone en el que le gustaría reproducir sus propias películas, aún debería poder seguir su propio código con solo unas pequeñas modificaciones en estos pasos. La descarga adjunta a esta publicación contiene dos versiones del proyecto: BigBuckBunny-Start debe usarse si desea integrar todos los pasos a medida que avanza, y BigBuckBunny-Completado Es el resultado final de este tutorial..

Paso 1: Importar el marco de MediaPlayer

CTRL + Clic (o clic derecho) en la carpeta "Marcos" en el panel "Grupos y archivos" en Xcode. Seleccionar Añadir> Marcos existentes desde el menú desplegable.

Seleccione "MediaPlayer.framework" de la lista de opciones presentadas y haga clic en "Agregar".

Paso 2: Importe el marco de MediaPlayer y declare el método playMovie

Ahora que ha agregado el marco del reproductor multimedia a su proyecto, debe importar el código de ese marco al controlador de vista que será responsable de reproducir la película. Ve a la BigBuckBunnyViewController.h archivo, e inserte la siguiente línea de código debajo del UIKit #importar línea:

 #importar  #importar  

Esta línea de código permitirá al controlador de vista conocer todo lo que MediaPlayer.framework tiene que ofrecer.

A continuación, debemos declarar un método de instancia de nuestro controlador de vista que activará la reproducción de películas. Justo encima de la @fin declaración en el archivo de encabezado, agregue esta línea:

 -(IBAction) playMovie: (id) remitente; 

Con nuestro playmovie método declarado, estamos listos para comenzar a escribir nuestro código de implementación del controlador de vista.

Paso 3: Implementar el método playMovie

Abre el BigBuckBunnyViewController.m expediente. Implementar el método playMovie con las siguientes líneas de código:

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

En la línea 3, creamos una NSString que contiene la ruta del archivo a nuestro archivo de película. En la línea 4, usamos esa ruta de archivo para crear un NSURL para nuestra película local. En la línea 5 implementamos esto pasando el NSURL a la initWithContentURL: método de la MPMoviePlayerController objeto. Observe cómo asignamos memoria para el reproductor de películas en esta línea; ¡Tendremos que liberar eso más tarde! En la línea 6, agregamos la vista MPMoviePlayerController a nuestra subvista de controlador de vista personalizada para que aparezca en la pantalla, en la línea 7 especificamos que queremos que el video se reproduzca en modo de pantalla completa, y en la línea 8 comenzamos a reproducir la película.

Antes de que podamos probar nuestro código, debemos vincular la acción "Retocar el interior" de nuestro botón con el método playMovie. Para ello, abre. BigBuckBunnyViewController.xib en Interface Builder. CTRL + Clic (o clic derecho) en el UIButton personalizado en el centro de la pantalla para mostrar las acciones para este elemento. Arrastre desde el círculo al lado de "Retocar el interior" hasta el objeto "Propietario del archivo", y luego seleccione el texto "playMovie:" que aparece. Guarda tu progreso en Interface Builder antes de volver a Xcode.

NOTA: Realmente debes seleccionar playMovie cuando aparezca para completar este paso. Asegúrate de guardar tus cambios!

Si crea y depura el proyecto en este punto, verá que la reproducción de la película funciona como se espera cuando toca el botón personalizado UIB. sin embargo, No celebres por el momento, porque todavía no hemos terminado..

Como se mencionó anteriormente, asignamos explícitamente memoria para el objeto moviePlayerController, pero aún no hemos liberado esa memoria. Este es un escenario interesante. No podemos liberar explícitamente el objeto en el método que le asignamos porque nuestra película aún se reproducirá en el momento en que este método finalice la ejecución. Tampoco es seguro liberar automáticamente el objeto porque no sabemos si nuestra película seguirá reproduciéndose la próxima vez que se agote el grupo de autorelease. Afortunadamente, el objeto MPMoviePlayerController está creado para manejar este escenario y enviará una notificación llamada MPMoviePlayerPlaybackDidFinishNotification al NSNotificationCenter cuando finaliza la reproducción. Para recibir esta notificación, debemos registrar un "observador" para responder a esa notificación específica. Para ello, modifica nuestra playmovie método de la siguiente manera:

 NSString * filepath = [[NSBundle mainBundle] pathForResource: @ "big-buck-bunny-clip" ofType: @ "m4v"]; NSURL * fileURL = [NSURL fileURLWithPath: filepath]; MPMoviePlayerController * moviePlayerController = [[MPMoviePlayerController alloc] initWithContentURL: fileURL]; [[NSNotificationCenter defaultCenter] addObserver: selector automático: @selector (moviePlaybackComplete :) nombre: MPMoviePlayerPlaybackDidFinishNotification object: moviePlayerController]; [self.view addSubview: moviePlayerController.view]; moviePlayerController.fullscreen = YES; [moviePlayerController play]; 

Ahora necesitamos crear moviePlaybackComplete:, El selector que acabamos de registrar. Agregue lo siguiente debajo de la playmovie método:

 - (void) moviePlaybackComplete: (NSNotification *) notificación MPMoviePlayerController * moviePlayerController = [objeto de notificación]; [[NSNotificationCenter defaultCenter] removeObserver: nombre propio: MPMoviePlayerPlaybackDidFinishNotification objeto: moviePlayerController]; [moviePlayerController.view removeFromSuperview]; [release moviePlayerController];  

Recuerde el parámetro "objeto" que configuramos moviePlayerController en el playmovie método arriba? Cualquier objeto que establezca para ese valor se envía junto con la notificación más adelante. En la línea 3, estamos recuperando ese objeto con el [objeto de notificación] Declaración y referencia con un nuevo puntero MPMoviePlayerController. A continuación, en la línea 4, nuevamente enviamos un mensaje al NSNotificationCenter, esta vez eliminando el observador en el que nos registramos. playmovie. En la línea 8 limpiamos nuestro controlador de vista personalizado eliminando la vista moviePlayerController de nuestra pantalla, y en la línea 9 terminamos liberando la memoria que originalmente asignamos en el playmovie método.

En este punto, nuestro archivo de implementación debería verse así:

 #import "BigBuckBunnyViewController.h" @implementation BigBuckBunnyViewController - (IBAction) playMovie: (id) sender NSString * filepath = [[NSBundle mainBundle] pathForResource: @ "big-buck-bunny-clip" ofType: "" NSURL * fileURL = [NSURL fileURLWithPath: filepath]; MPMoviePlayerController * moviePlayerController = [[MPMoviePlayerController alloc] initWithContentURL: fileURL]; [[NSNotificationCenter defaultCenter] addObserver: selector automático: @selector (moviePlaybackComplete :) nombre: MPMoviePlayerPlaybackDidFinishNotification object: moviePlayerController]; [self.view addSubview: moviePlayerController.view]; moviePlayerController.fullscreen = YES; [moviePlayerController play];  - (void) moviePlaybackComplete: (NSNotification *) notificación MPMoviePlayerController * moviePlayerController = [objeto de notificación]; [[NSNotificationCenter defaultCenter] removeObserver: nombre propio: MPMoviePlayerPlaybackDidFinishNotification objeto: moviePlayerController]; [moviePlayerController.view removeFromSuperview]; [release moviePlayerController];  - (void) dealloc [super dealloc];  @final 

¡Felicidades! Ahora debería tener un reproductor de películas en funcionamiento en su aplicación. El resto de este tutorial está dedicado a la personalización del reproductor..

Paso 4: Personaliza el tamaño de visualización de la película

Su trabajo en el paso anterior le permitió reproducir películas en modo de pantalla completa. Sin embargo, la gran parte de las mejoras de MPMoviePlayerController en iOS 4 es que ahora puede especificar un tamaño de pantalla personalizado para la reproducción dentro de sus propios controladores de visualización. Para aprovechar esto, modifique el método playMovie de la siguiente manera:

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

En la línea 1 creamos un tamaño de cuadro personalizado para la reproducción de la película con el CGRectMake función. Los valores que ingresé se tomaron de Interface Builder y coinciden con el origen, la altura y el ancho del UIButton personalizado que usamos para reproducir la película. Tenga en cuenta que también comenté el comando de pantalla completa en la línea 4.

Si crea y se va con su código de proyecto ahora, debería ver que al hacer clic en el botón ahora se reproducirá el video dentro de nuestro controlador de vista personalizada, justo encima del botón UIB. Esto funciona lo suficientemente bien, pero ¿qué sucede si desea mover un poco el botón para encontrar el aspecto adecuado? Es un poco incómodo copiar constantemente los valores literales de CGRect todo el tiempo. Actualice el método playMovie para hacer esto dinámicamente:

 -(IBAction) playMovie: (id) sender UIButton * playButton = (UIButton *) sender; NSString * filepath = [[NSBundle mainBundle] pathForResource: @ "big-buck-bunny-clip" ofType: @ "m4v"]; NSURL * fileURL = [NSURL fileURLWithPath: filepath]; MPMoviePlayerController * moviePlayerController = [[MPMoviePlayerController alloc] initWithContentURL: fileURL]; [[NSNotificationCenter defaultCenter] addObserver: selector automático: @selector (moviePlaybackComplete :) nombre: MPMoviePlayerPlaybackDidFinishNotification object: 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];  

En la línea 3 anterior, encasillamos el parámetro "remitente" a un objeto UIButton, ya que sabemos que es el tipo de objeto que enviará este mensaje a nuestro controlador de vista. Luego accedemos a este objeto directamente para obtener el origen X e Y del botón, así como el ancho y la altura del botón. Con el código anterior implementado, somos libres de mover el UIButton a cualquier lugar del lienzo y no tenemos que preocuparnos por actualizar constantemente nuestra llamada de función CGRectMake.

Una palabra en modo escalado

Cuando muestre un video en un rectángulo personalizado, a veces necesitará modificar el modo de escalado Propiedad del objeto MPMoviePlayerController. La configuración de esta propiedad determinará cómo se adapta la imagen de la película para completar el tamaño de reproducción que ha definido. Los ajustes de modo de escala disponibles son los siguientes:

  • MPMovieScalingModeNone
  • MPMovieScalingModeAspectFit
  • MPMovieScalingModeAspectFill
  • MPMovieScalingModeFill

Cada una de las opciones anteriores funciona como podría esperarse, con MPMovieScalingModeAspectFill y MPMovieScalingModeFill Es probable que sean las dos modificaciones más utilizadas. El modo de escala predeterminado es MPMovieScalingModeAspectFit.

Para experimentar con esta propiedad en nuestro código, inserte la siguiente línea justo antes de [MoviePlayerController jugar] declaración:

 moviePlayerController.scalingMode = MPMovieScalingModeFill; 

Verás que nuestro video ahora llena todo el espacio disponible en el rectángulo de reproducción..

Conclusión

Este tutorial ha presentado una introducción fundamental a la utilización de la clase MPMoviePlayerController con el marco de MediaPlayer. La clase MPMoviePlayerController tiene opciones adicionales que no hemos cubierto aquí, pero dejaré la exploración de éstas como un ejercicio para el lector. Con la base de este tutorial en su lugar, ¡debería poder comenzar a experimentar por su cuenta! Por favor, deje cualquier comentario o pregunta que pueda tener en la sección de comentarios a continuación. También puede enviar preguntas o comentarios a través de mi cuenta personal de twitter @markhammonds o la cuenta oficial de Mobiletuts + twitter @mobtuts. Gracias por leer, y mucha suerte en tus propios proyectos.!