Cómo incorporar videos de YouTube en aplicaciones para iOS con la biblioteca de ayuda de YouTube

El youtube-ios-player-helper es una biblioteca de código abierto que te ayuda a incorporar un reproductor de iframe de YouTube en una aplicación para iOS. La biblioteca crea un WebView y un puente entre el código Objective-C de tu aplicación y el código JavaScript del reproductor de YouTube, lo que permite que la aplicación para iOS controle el reproductor de YouTube. En este artículo, se describen los pasos para instalar la biblioteca y comenzar a usarla desde tu aplicación para iOS.

Instalación

En este artículo, se supone que creaste un nuevo proyecto de aplicación de vista única para iOS que se orienta a la versión más reciente de iOS y que agregas los siguientes archivos cuando creas el proyecto:

  • Main.storyboard
  • ViewController.h
  • ViewController.m

Puedes instalar la biblioteca a través de CocoaPods o copiando la biblioteca y los archivos fuente de la página de GitHub del proyecto.

  • La biblioteca está disponible para instalarse a través de CocoaPods. Como alternativa, la biblioteca y los archivos fuente están disponibles a través de la página de GitHub del proyecto y se pueden copiar en un proyecto existente.

Instala la biblioteca a través de CocoaPods

Si tu proyecto usa CocoaPods, agrega la siguiente línea a tu Podfile para instalar la biblioteca. En esa línea, reemplaza x.y.z por la versión más reciente del pod, que se identificará en la página de GitHub del proyecto.

pod "youtube-ios-player-helper", "~> x.y.z"

En el símbolo del sistema, escribe pod install para actualizar tu espacio de trabajo con las dependencias.

Nota: Recuerda que, cuando usas CocoaPods, debes abrir el archivo .xcworkspace en Xcode, no el archivo .xcodeproj.

Consulta el CocoaPods tutorial para obtener más información.

Instala la biblioteca de forma manual

Para instalar la biblioteca de asistencia de forma manual, descarga la fuente a través de el vínculo de descarga de GitHub o clona el repositorio. Una vez que tengas una copia local del código, sigue estos pasos:

  1. Abre el proyecto de muestra en Xcode o Finder.

  2. Selecciona YTPlayerView.h, YTPlayerView.m y la carpeta Assets. Si abres el espacio de trabajo en Xcode, estos estarán disponibles en Pods -> Development Pods -> YouTube-Player-iOS-Helper y Pods -> Development Pods -> YouTube-Player-iOS-Helper -> Resources. En Finder, estos están disponibles en el directorio raíz del proyecto en los directorios Classes y Assets.

  3. Arrastra estos archivos y carpetas a tu proyecto. Asegúrate de que la opción Copy items into destination group’s folder esté marcada. Cuando arrastres la carpeta Assets, asegúrate de que la Create Folder References for any added folders opción esté marcada.

La biblioteca ya debería estar instalada.

Agrega un YTPlayerView a través de Interface Builder o Storyboard

Para agregar un YTPlayerView a través de Interface Builder o Storyboard, haz lo siguiente:

  1. Arrastra una instancia de UIView a tu vista.

  2. Selecciona el inspector de identidad y cambia la clase de la vista a YTPlayerView.

  3. Abre ViewController.h y agrega el siguiente encabezado:

    #import “YTPlayerView.h”

    También agrega la siguiente propiedad:

    @property(nonatomic, strong) IBOutlet YTPlayerView *playerView;

  4. En Interface Builder, crea una conexión desde el elemento View que definiste en el paso anterior a la propiedad playerView de tu controlador de vistas.

  5. Ahora, abre ViewController.m y agrega el siguiente código al final de tu viewDidLoad método:

    [self.playerView loadWithVideoId:@"M7lc1UVf-VE"];

Compila y ejecuta tu aplicación. Cuando se cargue la miniatura del video, presiónala para iniciar el reproductor de video en pantalla completa.

Controla la reproducción de video

El método ViewController::loadWithVideoId: tiene una variante, loadWithVideoId:playerVars:, que permite a los desarrolladores pasar variables de reproductor adicionales a la vista. Estas variables de reproductor corresponden a los parámetros del reproductor en la API de IFrame Player. El parámetro playsinline permite que el video se reproduzca directamente en la vista en lugar de reproducirse en pantalla completa. Cuando un video se reproduce en línea, la aplicación para iOS que lo contiene puede controlar la reproducción de forma programática.

Reemplaza la llamada loadWithVideoId: por este código:

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

Abre el storyboard o Interface Builder. Arrastra dos botones a tu vista y etiquétalos como Reproducir y Detener. Abre ViewController.h y agrega estos métodos, que se asignarán a los botones:

- (IBAction)playVideo:(id)sender;
- (IBAction)stopVideo:(id)sender;

Ahora, abre ViewController.m y define estas dos funciones:

- (IBAction)playVideo:(id)sender {
  [self.playerView playVideo];
}

- (IBAction)stopVideo:(id)sender {
  [self.playerView stopVideo];
}

La mayoría de las funciones de la API de IFrame Player tienen equivalentes en Objective-C, aunque algunos de los nombres pueden diferir ligeramente para que coincidan más con las instrucciones de codificación de Objective-C. Las excepciones notables son los métodos que controlan el volumen del video, ya que estos se controlan con el hardware del teléfono o con instancias UIView integradas diseñadas para este propósito, como MPVolumeView.

Abre tu storyboard o Interface Builder y arrastra el control para conectar los botones Reproducir y Detener a los métodos playVideo: y stopVideo:.

Ahora, compila y ejecuta la aplicación. Una vez que se cargue la miniatura del video, deberías poder reproducir y detener el video con los controles nativos, además de los controles del reproductor.

Controla las devoluciones de llamada del reproductor

Puede ser útil controlar de forma programática los eventos de reproducción, como los cambios de estado de reproducción y los errores de reproducción. En la API de JavaScript, esto se hace con objetos de escucha de eventos. En Objective-C,esto se hace con un delegado.

En el siguiente código, se muestra cómo actualizar la declaración de interfaz en ViewController.h para que la clase cumpla con el protocolo de delegado. Cambia la declaración de interfaz de ViewController.h de la siguiente manera:

@interface ViewController : UIViewController<YTPlayerViewDelegate>

YTPlayerViewDelegate es un protocolo para controlar eventos de reproducción en el reproductor. Para actualizar ViewController.m para controlar algunos de los eventos, primero debes establecer la instancia ViewController como el delegado de la instancia YTPlayerView. Para realizar este cambio, agrega la siguiente línea al método viewDidLoad en ViewController.h.

self.playerView.delegate = self;

Ahora, agrega el siguiente método a 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;
  }
}

Compila y ejecuta la aplicación. Observa el resultado del registro en Xcode a medida que cambia el estado del reproductor. Deberías ver actualizaciones cuando se reproduce o detiene el video.

La biblioteca proporciona las constantes que comienzan con el kYT* prefijo para comodidad y legibilidad. Para obtener una lista completa de estas constantes, consulta YTPlayerView.m.

Prácticas recomendadas y limitaciones

La biblioteca se basa en la API de IFrame Player mediante la creación de un WebView y la renderización del HTML y JavaScript necesarios para un reproductor básico. El objetivo de la biblioteca es que sea lo más fácil de usar posible, ya que agrupa los métodos que los desarrolladores deben escribir con frecuencia en un paquete. Se deben tener en cuenta algunas limitaciones:

  • La biblioteca no admite la reproducción de video simultánea en varias YTPlayerView instancias. Si tu aplicación tiene múltiples YTPlayerView instancias, una práctica recomendada es pausar o detener la reproducción en cualquier instancia existente antes de iniciar la reproducción en una instancia diferente. En la aplicación de ejemplo que se incluye con el proyecto, los ViewControllers usan NSNotificationCenter para enviar notificaciones de que la reproducción está a punto de comenzar. Se notifica a otros ViewControllers y se pausará la reproducción en sus YTPlayerView instancias.
  • Reutiliza tus instancias de YTPlayerView existentes y cargadas cuando sea posible. Cuando se deba cambiar un video en una vista, no crees una instancia UIView nueva ni una instancia YTPlayerView nueva, y no llames a loadVideoId: ni a loadPlaylistId:. En su lugar, usa la cueVideoById:startSeconds: familia de funciones, que no vuelven a cargar el WebView. Hay una demora notable cuando se carga todo el reproductor de iframe.
  • Este reproductor no puede reproducir videos privados, pero sí puede reproducir videos no listados. Dado que esta biblioteca une el reproductor de iframe existente, el comportamiento del reproductor debería ser casi idéntico al de un reproductor incorporado en una página web en un navegador para dispositivos móviles.

Contribuciones

Como se trata de un proyecto de código abierto, envía correcciones y mejoras a la rama principal del proyecto de GitHub.