Media Player – Cómo añadir un vídeo a tu app

Juan Gabriel Video , , ,
0
media_player_title

Este tutorial te mostrará como añadir un vídeo a romoantalla completa en tu app. Nada mejor para arrancar una app que un vídeo promocional con tu logo, por ejemplo o utilizarlo como una forma de transicionar entre pantallas de tu app. Empezaremos creando un proyecto de ejemplo en el que incluiremos el video. Abre para ello Xcode y crea un nuevo proyecto. Selecciona para ello  Single View Application.

project-creation
No importa demasiado es como rellenes el nombre o los identificadores del proyecto. Es solo una demo. En mi caso lo he llamado VideoTest.

 

nombre del proyecto

Vamos a ver los pasos que vamos a seguir para no perdernos:
1 – Añadir el framework de Media Player al proyecto de Xcode
2 – Crear, inicializar y añadir nuestro player a la cabecera del View Controller del proyecto.
3 – Añadir un vídeo a la carpeta de recursos de nuestra app.
4 – Inicializar nuestro Media Player con el vídeo que hayamos añadido a la app.
5 – Mejorar la ejecución de nuestro video cerrándolo cuando finalice su reproducción.

1 – Añadir el framework de Media Player al proyecto de Xcode

Ves a tu Project settings en la sección General:

A continuación ves bajando hasta una sección llamada Linked Frameworks and Libraries. Haz click en el botón de + y busca el framework Media Player.

add_framework

Muy bien! Ya has añadido el the Media Player framework a tu proyecto y está configurado para empezar a utilizar las clases de Media Player!

2 – Crear, inicializar y añadir nuestro player a la cabecera del View Controller del proyecto

Bien, ya estamos preparados para crear nuestro objeto MPMoviePlayerController para gestionar la reproducción del vídeo que queramos. Para ello, vamos al archivo ViewController.h y escribimos lo siguiente

Como podemos ver:

  • Linea 2: importamos el framework Media Player que antes hemos añadido al proyecto
  • Líneas 5 a 7: Creamos una referencia a un objeto de la clase MPMoviePlayerController. Este será nuestro reproductor.

3 – Añadir un vídeo a la carpeta de recursos de nuestra app.

Ya tenemos la parte de la cabecera del View Controller preparada. Vamos a añadir ahora el vídeo a la carpeta de recursos del proyecto. Si no tienes ningún video a tu disposición, puedes probar con uno de los de mi Curso de Desarrollo de Apps para iOS 9 de Udemy. Para ello, simplemente utilizamos un vídeo cualquiera como este, y lo arrastramos en cualquier lugar de nuestro Project Navigator (el lado izquierdo de Xcode). Al arrastrarlo, nos saldrá un menú como el siguiente:
6.add_video
Nos aseguramos de que el vídeo se copie como recurso y que el checkbox del target de nuestro programa principal esté activado como en la imagen.

4 – Inicializar nuestro Media Player con el vídeo que hayamos añadido a la app.

A continuación, nos movemos al ViewController.m y añadimos el siguiente fragmento de código

Vamos a ver qué significa tanto código y a intentar entender qué hace cada línea:

  • Línea 3: dentro del view did load, simplemente hacemos una llamada al método play para no ensuciar este método más de lo deseado. Recuerda que es una muy buena práctica el dejar los métodos lo más limpios y estructurados posible.
  • Líneas 7 a 18: realizamos la implementación del método play que llamamos en el view did load. El método puede estructurarse en:
    • Línea 9: creamos una variable bundle con la que poder acceder a las imágenes, sonidos, vídeos y otros elementos de recursos que hayamos importado en nuestro proyecto de Xcode sobre la carpeta Resources (por lo general en el nivel raíz).
    • Línea 10: de todos los recursos, nos interesa aquel llamado “curso-programacion-promo.mp4”. Dicha línea nos devuelve el path, la dirección dentro de la estructura de carpetas donde Xcode ha guardado nuestro video
    • Línea 11: finalmente, con dicha dirección creamos una URL, que es la variable con la que podremos inicializar nuestro player.
    • Línea 13: inicializamos nuestro player con la URL antes creada.
    • Línea 14: mandamos un mensaje al player para que se prepare para reproducir el vídeo cuando así se le indique. De este modo lo carga en memoria y lo tiene disponible sin que haya un retardo entre que el usuario decide iniciar la reproducción y esta empieza.
    • Línea 15: le indicamos al vídeo player que debe ocupar toda la pantalla de la vista de nuestro View Controller (self) que lo alberga.
    • Línea 16: añadimos el reproductor a la vista de nuestro View Controller.
    • Línea 17: finalmente, le decimos al MPMoviePlayerController que puede reproducir el contenido que ha cargado haciendo uso del método play.

¿Denso verdad? Repasa cada paso con calma e intenta entender el por qué de cada uno y verás como no es para tanto! Ha llegado el momento, ejecuta la app con el botón play o bien con la combinación Command+R y veamos el resultado!

audio-player-resultado

No está nada mal para haberlo hecho en poco más de 5 minutos, pero… Acaba el vídeo reproducido por nuestro Media Player y se queda la pantalla en negro… ¡Vamos a arreglarlo!

5 – Mejorar la ejecución de nuestro video cerrándolo cuando finalice su reproducción.

Para ello, vamos a utilizar el Notification Center de iOS. Según la documentación oficial de Apple:

Un objeto NSNotificationCenter (o símplemente, notification center) proporciona un mecanismo para transmitir información a un programa. El objeto NSNotificationCenter es básicamente una tabla para distribución de información.
Los objetos se registran a un notification center para recibir notificaciones (objetos NSNotification) utilizando el método addObserver:selector:name:object: o addObserverForName:object:queue:usingBlock:. Cada invocación de este método especifica un conjunto de notificaciones. Con esto, los objetos pueden registrarse como observadores de diferentes notificaciones que lance el programa llamando a estos métodos las veces que necesiten.

Cada programa en Cocoa tiene un centro de notificaciones por defecto. Normalmente, no crearás el tuyo propio, si no que utilizarás el que ya viene de serir. NSNotificationCenter puede enviar notificaciones solamente al programa que lo gestiona. Si quieres mandar una notificación a otro proceso o recibir notificaciones de otros procesos o apps, deberías utilizar una instancia de NSDistributedNotificationCenter.

Vamos al lío pues. Cambia el método play que hemos escrito antes por este otro añadiendo la línea 10:

Esto hace que nuestro View Controller se suscriba al evento MPMoviePlayerPlaybackDidFinishNotification, el cual se lanza cuando el vídeo del MPMoviePlayerController del Media Player deja de reproducir contenido. En este caso, le estamos diciendo al View Controller, que cuando le llegue esta notificación, ejecute el método moviePlayBackDidFinish. Nos falta implementar justamente este último método:

  • Líneas 3 a 5: hacemos que nuestro View Controller deje de escuchar las notificaciones de tipo MPMoviePlayerPlaybackDidFinishNotification, a las que nos habíamos suscrito en el método play
  • Línea 6: eliminamos nuestro reproductor de la vista que lo contiene para seguir con la ejecución normal
  • Línea 7: paramos el reproductor por seguridad (por si hubiera algo después del vídeo, como en una lista de reproducción)
  • Línea 8: y asignamos nil a nuestro reproductor para eliminar espacio en memoria.

Ejecutamos una última vez y observamos como cuando acaba el vídeo, la pantalla en negro desaparece y vuelve nuestro fondo blanco inicial.

Conclusión

En este tutorial has aprendido a utilizar el framework Media Player para añadir un vídeo de tu propia colección a la pantalla. Con la estructura que hemos planteado, ahora puedes crear, por ejemplo una tabla con 3 o 4 vídeos, o un UICollectionView, porque no y que, al hacer click sobre cada vídeo este se reproduzca. O hacer tal vez que cuando finalice un vídeo se cargue el siguiente. O mejorar el sistema para que reproduzca vídeos desde una URL en lugar de vídeos en local. Realmente todo lo difícil ya lo has hecho, y ahora se trata de mejorar lo que ya sabes. Así unes tus conocimientos de Vista y elementos de UI con los aprendidos en este tutorial sobre el manejo del Media Player para convertirte en un auténtico experto.

Descárgate el Proyecto final de Xcode para probar la librería Media Player para iOS.

Nuevo contenido cada semana

Cada semana publicaremos uno o dos tutoriales para complementar los contenidos del Curso de Desarrollo de Apps para iOS 9 en Objective-C para ayudarte en tu aprendizaje. Poco a poco aprenderás a utilizar todas las funcionalidades de los dispositivos iOS, conectar con un servidor o incluso publicar tu idea real en el App Store

Accede al curso completo para

  • Aprende programación para iOS desde cero
  • Construye tu primera app para iPhone paso a paso
  • Descarga el código fuente para consultarlo en cualquier momento
  • Nuevo contenido adicional cada semana

¡Oferta limitada! ¡Consigue hasta un 75% de descuento!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

¿Preparado para llevar tus habilidades de programación más allá?

Sí, ¡quiero unirme!