このページは Cloud Translation API によって翻訳されました。

YouTube ヘルパーライブラリを使用して iOS アプリに YouTube 動画を埋め込む

youtube-ios-player-helper は、YouTube iframe プレーヤーを iOS アプリに埋め込むためのオープンソースライブラリです。このライブラリは、WebView とアプリの Objective-C コードと YouTube プレーヤーの JavaScript コードの間のブリッジを作成します。これにより、iOS アプリで YouTube プレーヤーを制御できます。この記事では、ライブラリをインストールして iOS アプリから使用を開始する手順について説明します。

インストール

この記事では、最新バージョンの iOS をターゲットとする新しいシングルビューアプリの iOS プロジェクトを作成し、プロジェクトの作成時に次のファイルを追加していることを前提としています。

Main.storyboard
ViewController.h
ViewController.m

ライブラリをインストールするには、CocoaPods を使用するか、プロジェクトの GitHub ページからライブラリとソースファイルをコピーします。

このライブラリは CocoaPods を介してインストールできます。または、プロジェクトの GitHub ページでライブラリとソースファイルを入手し、既存のプロジェクトにコピーすることもできます。

CocoaPods を介してライブラリをインストールする

プロジェクトで CocoaPods を使用している場合は、以下の行を Podfile に追加してライブラリをインストールします。この行で、x.y.z を最新の Pod バージョンに置き換えます。これは、プロジェクトの GitHub ページで識別されます。

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

コマンドラインプロンプトで、「pod install」と入力して、依存関係のあるワークスペースを更新します。

ヒント: CocoaPods を使用する場合は、.xcodeproj ファイルではなく、Xcode で .xcworkspace ファイルを開く必要があります。

詳しくは、CocoaPods チュートリアルをご覧ください。

ライブラリを手動でインストールする

ヘルパーライブラリを手動でインストールするには、GitHub のダウンロードリンクを介してソースをダウンロードするか、リポジトリのクローンを作成します。コードのローカルコピーを入手したら、次の手順を行います。

Xcode または Finder でサンプルプロジェクトを開きます。
YTPlayerView.h、YTPlayerView.m、Assets フォルダを選択します。Xcode でワークスペースを開くと、[Pod] -> [Developd Pod] -> [YouTube-Player-iOS-Helper] および [Pods] -> [Development Pod] -> [YouTube-Player-iOS-Helper] -> [Resources] の順に指定できます。Finder では、プロジェクトのルートディレクトリにある Classes ディレクトリと Assets ディレクトリにあります。
これらのファイルやフォルダをプロジェクトにドラッグします。[Copy items to destination group's folder] オプションが選択されていることを確認します。Assets フォルダをドラッグする場合は、[Add folders for Folder References] オプションを必ず確認してください。

これで、ライブラリのインストールが完了しました。

Interface Builder またはストーリーボードを使用して `YTPlayerView` を追加する

Interface Builder またはストーリーボードを使って YTPlayerView を追加するには:

UIView インスタンスをビューにドラッグします。
Identity Inspector を選択して、ビューのクラスを YTPlayerView に変更します。
ViewController.h を開き、次のヘッダーを追加します。
```
#import “YTPlayerView.h”
```
また、次のプロパティも追加します。
```
@property(nonatomic, strong) IBOutlet YTPlayerView *playerView;
```
Interface Builder で、前のステップで定義した View 要素から View Controller の playerView プロパティへの接続を作成します。
ViewController.m を開き、viewDidLoad メソッドの最後に次のコードを追加します。
```
[self.playerView loadWithVideoId:@"M7lc1UVf-VE"];
```

アプリをビルドして実行すると、動画のサムネイルが読み込まれたら、動画のサムネイルをタップして全画面の動画プレーヤーを起動します。

動画の再生を管理する

ViewController::loadWithVideoId: メソッドには、loadWithVideoId:playerVars: というバリアントがあり、デベロッパーは追加のプレーヤー変数をビューに渡すことができます。これらのプレーヤー変数は、IFrame Player API のプレーヤーパラメータに対応しています。playsinline パラメータを使用すると、動画を全画面表示ではなく、ビューで直接再生できます。動画がインラインで再生される場合、含まれている iOS アプリはプログラムで再生を制御できます。

loadWithVideoId: 呼び出しを次のコードに置き換えます。

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

ストーリーボードまたはインターフェースビルダーを開きます。2 つのボタンをビューにドラッグし、[Play] と [Stop] というラベルを付けます。ViewController.h を開き、次のメソッドを追加して、ボタンにマッピングされるようにします。

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

ViewController.m を開き、次の 2 つの関数を定義します。

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

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

ほとんどの IFrame Player API 関数には Objective-C の同等の機能がありますが、一部の命名は Objective-C のコーディングガイドラインにより近い場合があります。注目すべき例外は、動画の音量を制御するメソッドです。これは、スマートフォンのハードウェア、またはこの目的のために設計された UIView インスタンス（MPVolumeView など）によって制御されます。

ストーリーボードまたはインターフェースビルダーを開き、Ctrl キーを押しながらドラッグして、[Play] ボタンと [Stop] ボタンを playVideo: メソッドと stopVideo: メソッドに接続します。

アプリケーションをビルドして実行します。動画のサムネイルが読み込まれると、プレーヤーコントロールに加えてネイティブコントロールを使用して、動画を再生、停止できるようになります。

プレーヤーのコールバックを処理する

再生状態の変更や再生エラーなどの再生イベントをプログラムで処理しておくと便利です。JavaScript API では、イベントリスナーを使用します。Objective-C では、委譲で行います。

次のコードは、クラスがデリゲートプロトコルに準拠するように、ViewController.h でインターフェース宣言を更新する方法を示しています。ViewController.h のインターフェース宣言を次のように変更します。

@interface ViewController : UIViewController<YTPlayerViewDelegate>

YTPlayerViewDelegate は、プレーヤーで再生イベントを処理するプロトコルです。一部のイベントを処理するように ViewController.m を更新するには、まず ViewController インスタンスを YTPlayerView インスタンスのデリゲートとして設定する必要があります。この変更を行うには、ViewController.h の viewDidLoad メソッドに次の行を追加します。

self.playerView.delegate = self;

次に、以下のメソッドを 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;
  }
}

アプリケーションをビルドして実行します。プレーヤーの状態の変化に応じて、Xcode でログ出力を確認します。動画の再生や停止が完了すると最新情報が表示されます。

このライブラリには、便宜性と読みやすさを考慮して kYT* プレフィックスで始まる定数が用意されています。これらの定数の一覧については、YTPlayerView.m をご覧ください。

ベストプラクティスと制限事項

ライブラリは、WebView を作成し、基本的なプレーヤーに必要な HTML と JavaScript をレンダリングすることで、IFrame Player API の上に構築されます。ライブラリの目標は、可能な限り使いやすく、デベロッパーがパッケージに書き込む必要のあるメソッドをバンドル化することです。注意すべき制限がいくつかあります。

このライブラリは、複数の YTPlayerView インスタンスでの動画の同時再生をサポートしていません。アプリケーションに YTPlayerView インスタンスが複数ある場合は、別のインスタンスで再生を開始する前に、既存のインスタンスで再生を一時停止または停止することをおすすめします。プロジェクトに付属するサンプルアプリケーションでは、ViewController は、NSNotificationCenter を使用して再生が開始される通知をディスパッチします。他の ViewController は、YTPlayerView インスタンスで通知され、再生を一時停止します。
可能な限り、既存の読み込み済み YTPlayerView インスタンスを再利用します。ビュー内の動画を変更する必要がある場合は、新しい UIView インスタンスまたは新しい YTPlayerView インスタンスを作成しないでください。また、loadVideoId: または loadPlaylistId: を呼び出さないでください。代わりに、WebView を再読み込みしない cueVideoById:startSeconds: ファミリーの関数を使用してください。IFrame プレーヤー全体の読み込みで顕著な遅延が生じています。
このプレーヤーは非公開の動画を再生できませんが、限定公開動画は再生できます。このライブラリは既存の iframe プレーヤーをラップしているため、プレーヤーの動作はモバイルブラウザ内のウェブページに埋め込まれたプレーヤーとほぼ同じになります。

投稿

これはオープンソースプロジェクトであるため、GitHub プロジェクトのマスターブランチに修正と改善を送信してください。

YouTube ヘルパー ライブラリを使用して iOS アプリに YouTube 動画を埋め込む