Esta página foi traduzida pela API Cloud Translation.

Incorporar vídeos do YouTube em aplicativos iOS com a Biblioteca auxiliar do YouTube

A youtube-ios-player-helper é uma biblioteca de código aberto que ajuda a incorporar um player iframe do YouTube a um app iOS. A biblioteca cria um WebView e uma ponte entre o código Objective-C do app e o código JavaScript do player do YouTube, permitindo que o app iOS controle o player do YouTube. Este artigo descreve as etapas para instalar a biblioteca e começar a usá-la no aplicativo iOS.

Instalação

Este artigo pressupõe que você criou um novo projeto iOS de aplicativo de visualização única direcionado à versão mais recente do iOS e que adicionou os seguintes arquivos ao criar o projeto:

Main.storyboard
ViewController.h
ViewController.m

Você pode instalar a biblioteca usando o CocoaPods ou copiando a biblioteca e os arquivos de origem da página do GitHub do projeto (link em inglês).

A biblioteca está disponível para instalação pelo CocoaPods. Como alternativa, os arquivos de biblioteca e de origem estão disponíveis na página do GitHub do projeto e podem ser copiados para um projeto existente.

Instalar a biblioteca pelo CocoaPods

Se o projeto usar o CocoaPods, adicione a linha abaixo ao seu Podfile para instalar a biblioteca. Nessa linha, substitua x.y.z pela versão mais recente do pod, que será identificada na página do GitHub do projeto.

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

No prompt da linha de comando, digite pod install para atualizar o espaço de trabalho com as dependências.

Dica: lembre-se de que, ao usar o CocoaPods, é necessário abrir o arquivo .xcworkspace no Xcode, e não o arquivo .xcodeproj.

Confira o tutorial do CocoaPods para saber mais.

Instalar a biblioteca manualmente

Para instalar a biblioteca auxiliar manualmente, faça o download da origem por meio do link de download do GitHub ou clone o repositório. Depois de criar uma cópia local do código, siga estas etapas:

Abra o projeto de amostra no Xcode ou Finder.
Selecione YTPlayerView.h, YTPlayerView.m e a pasta Assets. Se você abrir o espaço de trabalho no Xcode, eles estarão disponíveis em Pods -> Pods de desenvolvimento -> YouTube-Player-iOS-Helper e Pods -> Pods de desenvolvimento -> YouTube-Player-iOS-Helper -> Recursos. No Finder, eles estão disponíveis no diretório raiz do projeto nos diretórios Classes e Assets.
Arraste esses arquivos e pastas para o projeto. Verifique se a opção Copiar itens na pasta do grupo de destino está marcada. Ao arrastar a pasta "Assets", verifique se a opção Create Folder References for any added folders está marcada.

A biblioteca será instalada.

Adicionar um `YTPlayerView` usando o Interface Builder ou o storyboard

Para adicionar um YTPlayerView usando o Criador de interface ou o storyboard:

Arraste uma instância de UIView para a visualização.
Selecione o Identity Inspector e mude a classe da visualização para YTPlayerView.
Abra ViewController.h e adicione o seguinte cabeçalho:
```
#import “YTPlayerView.h”
```
Adicione também a seguinte propriedade:
```
@property(nonatomic, strong) IBOutlet YTPlayerView *playerView;
```
No Interface Builder, crie uma conexão do elemento de visualização definido na etapa anterior com a propriedade playerView do controlador de visualizações.
Agora, abra ViewController.m e adicione o seguinte código ao final do método viewDidLoad:
```
[self.playerView loadWithVideoId:@"M7lc1UVf-VE"];
```

Crie e execute seu aplicativo. Quando a miniatura do vídeo carregar, toque nela para abrir o player.

Controlar a reprodução de vídeos

O método ViewController::loadWithVideoId: tem uma variante, loadWithVideoId:playerVars:, que permite que os desenvolvedores transmitam mais variáveis do jogador para a visualização. Essas variáveis de player correspondem aos parâmetros do player na API IFrame Player. O parâmetro playsinline permite que o vídeo seja reproduzido diretamente na visualização em vez de em tela cheia. Quando um vídeo é reproduzido inline, o aplicativo iOS que o contém pode controlar a reprodução de forma programática.

Substitua a chamada loadWithVideoId: por este código:

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

Abra o storyboard ou o criador de interface. Arraste dois botões para a visualização, rotulando-os como Play e Stop. Abra ViewController.h e adicione estes métodos, que vão ser mapeados para os botões:

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

Agora, abra ViewController.m e defina estas duas funções:

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

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

A maioria das funções da API IFrame Player tem equivalentes no Objective-C, embora algumas das nomenclaturas possam ser um pouco diferentes para corresponder às diretrizes de programação do Objective-C. Exceções notáveis são métodos que controlam o volume do vídeo, já que eles são controlados pelo hardware do smartphone ou com instâncias integradas UIView projetadas para essa finalidade, como MPVolumeView.

Abra seu storyboard ou o Criador de interface e arraste o controle para arrastar os botões Reproduzir e Parar para os métodos playVideo: e stopVideo:.

Agora, crie e execute o aplicativo. Quando a miniatura do vídeo carregar, você conseguirá reproduzir e parar o vídeo usando controles nativos, além dos controles do player.

Processar callbacks do jogador

Pode ser útil processar de maneira programática eventos de reprodução, como alterações de estado e erros. Na API JavaScript, isso é feito com listeners de eventos. No Objective-C,isso é feito com um delegado.

O código a seguir mostra como atualizar a declaração da interface em ViewController.h para que a classe esteja em conformidade com o protocolo delegado. Mude a declaração da interface de ViewController.h desta maneira:

@interface ViewController : UIViewController<YTPlayerViewDelegate>

YTPlayerViewDelegate é um protocolo para lidar com eventos de reprodução no player. Para atualizar o ViewController.m a fim de processar alguns dos eventos, primeiro você precisa definir a instância do ViewController como o delegado da instância do YTPlayerView. Para fazer essa mudança, adicione a seguinte linha ao método viewDidLoad em ViewController.h.

self.playerView.delegate = self;

Agora, adicione o seguinte 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;
  }
}

Compile e execute o aplicativo. Acompanhe a saída do registro no Xcode quando o estado do player mudar. Você vai ver atualizações quando o vídeo for reproduzido ou interrompido.

A biblioteca fornece as constantes que começam com o prefixo kYT* por conveniência e legibilidade. Para ver uma lista completa dessas constantes, consulte YTPlayerView.m.

Práticas recomendadas e limitações

A biblioteca é criada com base na API IFrame Player criando uma WebView e renderizando o HTML e o JavaScript necessários para um player básico. O objetivo da biblioteca é ser o mais fácil de usar possível, criando métodos de empacotamento que os desenvolvedores precisem escrever em um pacote com frequência. Há algumas limitações a serem observadas:

A biblioteca não oferece suporte à reprodução de vídeo simultânea em várias instâncias YTPlayerView. Se o aplicativo tiver várias instâncias YTPlayerView, a prática recomendada será pausar ou interromper a reprodução em qualquer instância atual antes de iniciar a reprodução em uma instância diferente. No app de exemplo que acompanha o projeto, os ViewControllers usam NSNotificationCenter para enviar notificações de que a reprodução está prestes a começar. Outros ViewControllers são notificados e pausam a reprodução nas instâncias YTPlayerView.
Reutilizar as instâncias YTPlayerView carregadas anteriormente, quando possível. Quando um vídeo precisa ser alterado em uma visualização, não crie uma nova instância de UIView ou YTPlayerView e não chame loadVideoId: ou loadPlaylistId:. Em vez disso, use a família cueVideoById:startSeconds: de funções, que não recarregam o WebView. Há um atraso perceptível ao carregar todo o player IFrame.
Este player não pode exibir vídeos privados, mas pode exibir vídeos não listados. Como essa biblioteca envolve o player iframe existente, o comportamento do player é quase idêntico ao de um player incorporado em uma página da Web em um navegador para dispositivos móveis.

Contribuições

Como este é um projeto de código aberto, envie correções e melhorias para a ramificação mestre do projeto GitHub.