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

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

インストール

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

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

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

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

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

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

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

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

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

詳細については、CocoaPods チュートリアルをご覧ください。

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

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

  1. Xcode または Finder でサンプル プロジェクトを開きます。

  2. YTPlayerView.h、YTPlayerView.m、[アセット] フォルダを選択します。Xcode でワークスペースを開くと、[Pods] -> [Development Pods] -> [YouTube-Player-iOS-Helper] と [Pods] -> [Development Pods] -> [YouTube-Player-iOS-Helper] -> [Resources] で確認できます。Finder では、プロジェクトのルート ディレクトリにある Classes ディレクトリと Assets ディレクトリにあります。

  3. これらのファイルとフォルダをプロジェクトにドラッグします。[Copy items into destination group’s folder] オプションがオンになっていることを確認します。Assets フォルダをドラッグするときは、[Create Folder References for any added folders] オプションがオンになっていることを確認してください。

これで、ライブラリがインストールされます。

Interface Builder または Storyboard を使用して YTPlayerView を追加する

Interface Builder または Storyboard を使用して YTPlayerView を追加するには:

  1. UIView インスタンスを View にドラッグします。

  2. Identity Inspector を選択し、ビューのクラスを YTPlayerView に変更します。

  3. ViewController.h を開き、次のヘッダーを追加します。

    #import “YTPlayerView.h”

    また、次のプロパティを追加します。

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

  4. Interface Builder で、前の手順で定義した View 要素から View Controller の playerView プロパティへの接続を作成します。

  5. 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];

ストーリーボードまたは Interface Builder を開きます。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 など）によって制御されるためです。

ストーリーボードまたは Interface Builder を開き、Control キーを押しながらドラッグして、[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 インスタンスを再利用します。View で動画を変更する必要がある場合は、新しい UIView インスタンスや新しい YTPlayerView インスタンスを作成しないでください。また、loadVideoId: も loadPlaylistId: も呼び出さないでください。代わりに、WebView を再読み込みしない cueVideoById:startSeconds: ファミリーの関数を使用します。IFrame プレーヤー全体を読み込む際に、顕著な遅延が発生します。
  • このプレーヤーでは非公開動画は再生できませんが、限定公開動画は再生できます。このライブラリは既存の iframe プレーヤーをラップするため、プレーヤーの動作は、モバイル ブラウザのウェブページに埋め込まれたプレーヤーの動作とほぼ同じになります。

寄付

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