Incorpora videos de YouTube en aplicaciones de iOS con la biblioteca de ayuda de YouTube

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 da por sentado que creaste un nuevo proyecto de aplicación para iOS de vista única orientado 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 instalarla a través de CocoaPods o copiando los archivos fuente y la biblioteca de la página de GitHub del proyecto.

  • La biblioteca está disponible para instalarla 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 mediante 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 la ventana de la línea de comandos, escribe pod install para actualizar el lugar de trabajo con las dependencias.

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

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

Cómo instalar la biblioteca de forma manual

Para instalar la biblioteca auxiliar de forma manual, descarga la fuente mediante 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 lugar de trabajo en Xcode, puedes encontrar esta información en Pods -> Pods -> Pods -> YouTube-Player-iOS-Helper y Pods -> Pods -> YouTube-Player-iOS-Helper -> Resources. En Finder, estos están disponibles en el directorio raíz del proyecto, en los directorios Clases y Activos.

  3. Arrastra los archivos y las carpetas al proyecto. Asegúrate de que la opción Copiar elementos a la carpeta del grupo de destino esté marcada. Cuando arrastres la carpeta Elementos, asegúrate de que esté marcada la opción Crear referencias de carpeta para cualquier carpeta agregada.

Se debería instalar la biblioteca.

Agrega un elemento YTPlayerView a través de Interface Builder o del guion gráfico

Para agregar un YTPlayerView mediante Interface Builder o el guion gráfico, sigue estos pasos:

  1. Arrastra una instancia de UIView a tu View.

  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 con la propiedad playerView del controlador de vista.

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

    [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.

Controlar 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 del reproductor de IFrame. El parámetro playsinline permite que el video se reproduzca directamente en la vista, en lugar de reproducirse en pantalla completa. Cuando se reproduce un video de forma intercalada, la app para iOS puede controlar la reproducción de manera programática.

Reemplaza la llamada loadWithVideoId: por este código:

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

Abre el guión gráfico o el Compilador de interfaces. Arrastra dos botones a tu vista, 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 del reproductor de IFrame tienen equivalentes de Objective-C, aunque algunos de los nombres pueden variar un poco para coincidir mejor con los lineamientos de codificación de Objective-C. Las excepciones notables son los métodos que controlan el volumen del video, ya que lo controla el hardware del teléfono o con instancias UIView integradas diseñadas para este propósito, como MPVolumeView.

Abre el guión gráfico o el Compilador de interfaces y mantén presionada la tecla Control y arrastra 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, podrás reproducir y detener el video con los controles nativos y los del reproductor.

Cómo controlar devoluciones de llamada del reproductor

Puede ser útil para controlar de manera 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 se ajuste al protocolo de delegado. Cambia la declaración de la 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. Si quieres 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. Mira el resultado del registro en Xcode a medida que cambia el estado del reproductor. Deberías ver las actualizaciones cuando se reproduzca o detenga el video.

La biblioteca proporciona las constantes que comienzan con el prefijo kYT* para mayor 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 del reproductor IFrame mediante la creación de un WebView y el procesamiento de 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 y agrupar 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 simultánea de videos en varias instancias de YTPlayerView. Si tu aplicación tiene varias instancias de YTPlayerView, se recomienda pausar o detener la reproducción en cualquier instancia existente antes de iniciarla en una instancia diferente. En la aplicación de ejemplo que se incluye en el proyecto, los ViewControllers usan NSNotificationCenter para despachar notificaciones que la reproducción está a punto de comenzar. Se notifica a otros ViewControllers y pausarán la reproducción en sus instancias YTPlayerView.
  • Vuelve a usar las instancias de YTPlayerView cargadas existentes cuando sea posible. Cuando se debe cambiar un video en una vista, no crees una nueva instancia UIView o YTPlayerView, ni llames a loadVideoId: ni a loadPlaylistId:. En su lugar, usa la familia de funciones cueVideoById:startSeconds:, que no vuelve a cargar WebView. Hay una demora notable cuando se carga todo el reproductor IFrame.
  • Este reproductor no puede reproducir videos privados, pero puede reproducir videos no listados. Debido a que esta biblioteca une el reproductor iframe existente, el comportamiento del reproductor debe ser casi idéntico al de un reproductor incorporado en una página web en un navegador para dispositivos móviles.

Contribuciones

Dado que este es un proyecto de código abierto, envía correcciones y mejoras a la rama principal del proyecto de GitHub.