Incorporar vídeos do YouTube em aplicativos iOS com a Biblioteca auxiliar do YouTube
Mantenha tudo organizado com as coleções
Salve e categorize o conteúdo com base nas suas preferências.
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.storyboardViewController.hViewController.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.
Exceto em caso de indicação contrária, o conteúdo desta página é licenciado de acordo com a Licença de atribuição 4.0 do Creative Commons, e as amostras de código são licenciadas de acordo com a Licença Apache 2.0. Para mais detalhes, consulte as políticas do site do Google Developers. Java é uma marca registrada da Oracle e/ou afiliadas.
Última atualização 2023-02-22 UTC.
[[["Fácil de entender","easyToUnderstand","thumb-up"],["Meu problema foi resolvido","solvedMyProblem","thumb-up"],["Outro","otherUp","thumb-up"]],[["Não contém as informações de que eu preciso","missingTheInformationINeed","thumb-down"],["Muito complicado / etapas demais","tooComplicatedTooManySteps","thumb-down"],["Desatualizado","outOfDate","thumb-down"],["Problema na tradução","translationIssue","thumb-down"],["Problema com as amostras / o código","samplesCodeIssue","thumb-down"],["Outro","otherDown","thumb-down"]],["Última atualização 2023-02-22 UTC."],[[["\u003cp\u003eThis library, \u003ccode\u003eyoutube-ios-player-helper\u003c/code\u003e, facilitates embedding a YouTube iframe player within an iOS application by creating a \u003ccode\u003eWebView\u003c/code\u003e and bridging Objective-C code with the player's JavaScript.\u003c/p\u003e\n"],["\u003cp\u003eInstallation is possible via CocoaPods by adding a specific line to the Podfile, or manually by downloading the source code from the project's GitHub page and dragging specific files into your iOS project.\u003c/p\u003e\n"],["\u003cp\u003eA \u003ccode\u003eYTPlayerView\u003c/code\u003e can be added through Interface Builder or Storyboard by dragging a \u003ccode\u003eUIView\u003c/code\u003e, changing its class to \u003ccode\u003eYTPlayerView\u003c/code\u003e, and connecting it to a \u003ccode\u003eplayerView\u003c/code\u003e property in the \u003ccode\u003eViewController.h\u003c/code\u003e file.\u003c/p\u003e\n"],["\u003cp\u003eThe library allows for controlling video playback, enabling inline play and manipulation using the IFrame Player API through Objective-C equivalent methods.\u003c/p\u003e\n"],["\u003cp\u003eThe library allows the handling of playback events, such as start and stop, through a delegate protocol, \u003ccode\u003eYTPlayerViewDelegate\u003c/code\u003e, where the \u003ccode\u003eViewController\u003c/code\u003e conforms to this protocol to capture those events.\u003c/p\u003e\n"]]],["The `youtube-ios-player-helper` library enables embedding and controlling a YouTube iframe player within an iOS app. Installation is via CocoaPods or manual file copying from GitHub. To use, a `YTPlayerView` is added to the storyboard, connected to a `ViewController`, and initialized with a video ID. Playback is controlled through Objective-C methods (e.g., `playVideo`, `stopVideo`) linked to UI elements. Developers can pass player variables, and the library supports delegate-based event handling for playback states. The library is based on the iFrame Player API and includes a few limitations.\n"],null,["# Embed YouTube Videos in iOS Applications with the YouTube Helper Library\n\nThe `youtube-ios-player-helper` is an open source library that helps you embed a\nYouTube iframe player into an iOS application. The library creates a\n`WebView` and a bridge between your application's Objective-C code and the\nYouTube player's JavaScript code, thereby allowing the iOS application to control the\nYouTube player. This article describes the steps to install the library and get started\nusing it from your iOS application.\n\nInstallation\n------------\n\nThis article assumes you have created a new Single View Application iOS project targeting\nthe latest version of iOS, and that you add the following files when creating the\nproject:\n\n- `Main.storyboard`\n- `ViewController.h`\n- `ViewController.m`\n\nYou can install the library via\n[CocoaPods](https://cocoapods.org/) or by copying the library\nand source files from the\n[project's GitHub page](https://github.com/youtube/youtube-ios-player-helper).\n\n- The library is available to install via CocoaPods. Alternatively, the library and source files are available via the project's GitHub page and can be copied into an existing project.\n\n### Install the library via CocoaPods\n\nIf your project uses CocoaPods, add the line below to your Podfile to install the library.\nIn that line, replace `x.y.z` with the latest pod version, which will be\nidentified on the project's GitHub page. \n\n```text\npod \"youtube-ios-player-helper\", \"~\u003e x.y.z\"\n```\n\nAt the command line prompt, type `pod install` to update your workspace with the\ndependencies.\n\nTip: Remember that when using CocoaPods, you must open the `.xcworkspace` file\nin Xcode, not the `.xcodeproj` file.\n\nCheck out the [CocoaPods\ntutorial](https://guides.cocoapods.org/using/getting-started.html) to learn more.\n\n### Manually install the library\n\nTo install the helper library manually, either download the source via\n[GitHub's download link](https://github.com/youtube/youtube-ios-player-helper) or\nclone the repository. Once you have a local copy of the code, follow these steps:\n\n1. Open the sample project in Xcode or Finder.\n\n2. Select `YTPlayerView.h`, `YTPlayerView.m`, and the\n **Assets** folder. If you open the workspace in Xcode, these are available\n under **Pods -\\\u003e Development Pods -\\\u003e YouTube-Player-iOS-Helper** and\n **Pods -\\\u003e Development Pods -\\\u003e YouTube-Player-iOS-Helper -\\\u003e Resources** . In the Finder,\n these are available in the project's root directory in the **Classes** and\n **Assets** directories.\n\n3. Drag these files and folders into your project. Make sure the **Copy items into\n destination group's folder** option is checked. When dragging the Assets folder, make\n sure that the **Create Folder References for any added folders** option is\n checked.\n\nThe library should now be installed.\n\nAdd a `YTPlayerView` via Interface Builder or the Storyboard\n------------------------------------------------------------\n\nTo add a `YTPlayerView` via Interface Builder or the Storyboard:\n\n1. Drag a `UIView` instance onto your View.\n\n2. Select the Identity Inspector and change the class of the view to\n `YTPlayerView`.\n\n3. Open `ViewController.h` and add the following header:\n\n ```objective-c\n #import \"YTPlayerView.h\"\n ```\n\n Also add the following property: \n\n ```objective-c\n @property(nonatomic, strong) IBOutlet YTPlayerView *playerView;\n ```\n4. In Interface Builder, create a connection from the View element that you defined in the\n previous step to your View Controller's `playerView` property.\n\n5. Now open `ViewController.m` and add the following code to the end of your\n `viewDidLoad` method:\n\n ```objective-c\n [self.playerView loadWithVideoId:@\"M7lc1UVf-VE\"];\n ```\n\nBuild and run your application. When the video thumbnail loads, tap the video thumbnail to\nlaunch the fullscreen video player.\n\nControl video playback\n----------------------\n\nThe `ViewController::loadWithVideoId:` method has a variant,\n`loadWithVideoId:playerVars:`, that allows developers to pass additional player\nvariables to the view. These player variables correspond to the\n[player parameters in the\nIFrame Player API](https://developers.google.com/youtube/player_parameters). The `playsinline` parameter enables the video to play\ndirectly in the view rather than playing fullscreen. When a video is playing inline, the\ncontaining iOS application can programmatically control playback.\n\nReplace the `loadWithVideoId:` call with this code: \n\n```objective-c\nNSDictionary *playerVars = @{\n @\"playsinline\" : @1,\n};\n[self.playerView loadWithVideoId:@\"M7lc1UVf-VE\" playerVars:playerVars];\n```\n\nOpen up the storyboard or Interface Builder. Drag two buttons onto your View, labeling them\n**Play** and **Stop** . Open `ViewController.h` and add these methods, which\nwill be mapped to the buttons: \n\n```objective-c\n- (IBAction)playVideo:(id)sender;\n- (IBAction)stopVideo:(id)sender;\n```\n\nNow open `ViewController.m` and define these two functions: \n\n```objective-c\n- (IBAction)playVideo:(id)sender {\n [self.playerView playVideo];\n}\n\n- (IBAction)stopVideo:(id)sender {\n [self.playerView stopVideo];\n}\n```\n\nMost of the IFrame Player API functions have Objective-C equivalents, though some of the\nnaming may differ slightly to more closely match Objective-C coding guidelines. Notable\nexceptions are methods controlling the volume of the video, since these are controlled by\nthe phone hardware or with built in `UIView` instances designed for this purpose,\nsuch as [`MPVolumeView`](https://developer.apple.com/library/ios/documentation/mediaplayer/reference/MPVolumeView_Class/Reference/Reference.html).\n\nOpen your storyboard or Interface Builder and control-drag to connect the **Play** and\n**Stop** buttons to the `playVideo:` and `stopVideo:` methods.\n\nNow build and run the application. Once the video thumbnail loads, you should be able to\nplay and stop the video using native controls in addition to the player controls.\n\nHandle player callbacks\n-----------------------\n\nIt can be useful to programmatically handle playback events, such as playback state changes\nand playback errors. In the JavaScript API, this is done with\n[event listeners](https://developers.google.com/youtube/iframe_api_reference#Adding_event_listener).\nIn Objective-C,this is done with a\n[delegate](https://developer.apple.com/library/ios/documentation/general/conceptual/CocoaEncyclopedia/DelegatesandDataSources/DelegatesandDataSources.html).\n\n\nThe following code shows how to update the interface declaration in\n`ViewController.h` so the class conforms to the delegate protocol. Change\n`ViewController.h`'s interface declaration as follows: \n\n```objective-c\n@interface ViewController : UIViewController\u003cYTPlayerViewDelegate\u003e\n```\n\n`YTPlayerViewDelegate` is a protocol for handling playback events in the player.\nTo update `ViewController.m` to handle some of the events, you first need to set\nthe `ViewController` instance as the delegate of the `YTPlayerView`\ninstance. To make this change, add the following line to the `viewDidLoad` method\nin `ViewController.h`. \n\n```objective-c\nself.playerView.delegate = self;\n```\n\nNow add the following method to `ViewController.m`: \n\n```objective-c\n- (void)playerView:(YTPlayerView *)playerView didChangeToState:(YTPlayerState)state {\n switch (state) {\n case kYTPlayerStatePlaying:\n NSLog(@\"Started playback\");\n break;\n case kYTPlayerStatePaused:\n NSLog(@\"Paused playback\");\n break;\n default:\n break;\n }\n}\n```\n\nBuild and run the application. Watch the log output in Xcode as the player state changes.\nYou should see updates when the video is played or stopped.\n\nThe library provides the constants that begin with the `kYT*` prefix for\nconvenience and readability. For a full list of these constants, look at\n`YTPlayerView.m`.\n\nBest practices and limitations\n------------------------------\n\nThe library builds on top of the IFrame Player API by creating a `WebView` and\nrendering the HTML and JavaScript required for a basic player. The library's goal is to be\nas easy-to-use as possible, bundling methods that developers frequently have to write into a\npackage. There are a few limitations that should be noted:\n\n- The library does not support concurrent video playback in multiple `YTPlayerView` instances. If your application has multiple `YTPlayerView` instances, a recommended best practice is to pause or stop playback in any existing instances before starting playback in a different instance. In the example application that ships with the project, the ViewControllers make use of `NSNotificationCenter` to dispatch notifications that playback is about to begin. Other ViewControllers are notified and will pause playback in their `YTPlayerView` instances.\n- Reuse your existing, loaded `YTPlayerView` instances when possible. When a video needs to be changed in a View, don't create a new `UIView` instance or a new `YTPlayerView` instance, and don't call either `loadVideoId:` or `loadPlaylistId:`. Instead, use the `cueVideoById:startSeconds:` family of functions, which do not reload the `WebView`. There is a noticeable delay when loading the entire IFrame player.\n- This player cannot play private videos, but it can play [unlisted videos](https://support.google.com/youtube/answer/157177). Since this library wraps the existing iframe player, the player's behavior should be nearly identical to that of a player embedded on a webpage in a mobile browser.\n\nContributions\n-------------\n\nSince this is an open-source project, please submit fixes and improvements to the\n[master branch of the GitHub\nproject](https://github.com/youtube/youtube-ios-player-helper)."]]
