UIWebViewでYouTube動画を再生する

2013.06.10

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

iOSアプリでYouTubeの動画を再生する方法ですが、実はちょっと工夫が必要です。 既にご存知の方も多いかもしれませんが、iOSのネイティブアプリでYouTubeの動画を再生する方法の1つとして、UIWebViewを使用する方法があります。今回はその方法をご紹介します。また、本記事では以下の環境を前提に説明します。

  • Mac OS X 10.8 Moutain lion
  • Xcode 4.6.2
  • iOS SDK 6.1

プロジェクトの準備

プロジェクトの作成

それではまず、Xcodeプロジェクトを作成しましょう。XcodeよりSingle View Applicationを選択し、以下の内容でプロジェクトを作成しましょう。

項目 設定値
Product Name YouTubeSample
Organization Name 自分の名前(サンプルなのでテキトー)
Company Identifier 会社名(サンプルなのでテキトー)
Class Prefix なし
Devices iPhone
Use Storyboards チェックする(ストーリーボードを使用)
Use Automatic Reference Counting チェックする(ARC有効)
Include Unit Tests チェックしない(unit testのターゲットを含まない)

ios-uiwebview-youtube_1

ios-uiwebview-youtube_2

ストーリーボードの編集

続いてストーリーボードを編集します。といっても、もともとあるViewControllerにUIWebViewをのっけるだけです。

ios-uiwebview-youtube_3

のっけたUIWebViewはwebViewという名前でOutletの接続をしておきます。

ios-uiwebview-youtube_4

ios-uiwebview-youtube_5

iframeを用いてYouTube動画を再生する

それでは、実際にYouTube動画を再生するためのロジックを書いてみましょう。といってもやり方は非常に簡単で、UIWebViewのHTML文字列にiframe埋め込み版のYouTubeプレーヤーを設定するだけです。ViewController- (void)viewDidAppear:(BOOL)animatedメソッドを追加し、以下のように記述してみましょう。動画IDはお好きな動画をYouTubeで検索し、「http://www.youtube.com/watch?v=[Video ID]」の[Video ID]をコピーして設定してみてください。(今回サンプルで使用している動画はMeshuggahというスウェーデンのかっこいいメタルバンドです!)

#import "ViewController.h"

@interface ViewController ()

@property (weak, nonatomic) IBOutlet UIWebView *webView;

@end

@implementation ViewController

- (void)viewDidAppear:(BOOL)animated
{
    [super viewDidAppear:animated];
    
    // スクロールを無効にする
    self.webView.scrollView.scrollEnabled = NO;
    // スクロール時の跳ね返りを抑制する
    self.webView.scrollView.bounces = NO;

    // YouTubeのVideo ID
    NSString *videoID = @"qc98u-eGzlc";
    
    // UIWebViewにセットするHTMLのテンプレート
    NSString *htmlString = @" \
<!DOCTYPE html> \
<html> \
  <head> \
    <meta name=\"viewport\" content=\"initial-scale=1.0, user-scalable=no, width=%f\"> \
  </head> \
  <body style=\"background:#000000; margin-top:0px; margin-left:0px\"> \
    <iframe width=\"%f\" \
            height=\"%f\" \
            src=\"http://www.youtube.com/embed/%@?showinfo=0\" \
            frameborder=\"0\" \
            allowfullscreen> \
    </iframe> \
  </body> \
</html> \
    ";
    
    // HTMLテンプレートにUIWebViewのサイズとVideo IDをセットする
    NSString *html = [NSString stringWithFormat:
                      htmlString,
                      self.webView.frame.size.width,
                      self.webView.frame.size.width,
                      self.webView.frame.size.height,
                      videoID];
    
    // UIWebViewに生成したHTMLをセットする
    [self.webView loadHTMLString:html baseURL:nil];
}

@end

この状態で実行すると、画面表示後- (void)viewDidAppear:(BOOL)animated以下のように動画再生画面が表示されます。

ios-uiwebview-youtube_11

再生ボタンをタップすると、いつものようにフルスクリーンで動画が再生されるはずです。

ios-uiwebview-youtube_12

UIWebViewのカテゴリとして実装する

毎回HTMLをセットするのも面倒なので、UIWebViewのカテゴリとして実装しておくといいでしょう。それでは早速プロジェクトにUIWebViewのカテゴリUIWebView+YouTubeを作成しましょう。

ios-uiwebview-youtube_6

ios-uiwebview-youtube_7

ios-uiwebview-youtube_8

ios-uiwebview-youtube_9

ios-uiwebview-youtube_10

作成したら.h、.mを以下のように実装しましょう。

UIWebView+YouTube.h
#import <UIKit/UIKit.h>

@interface UIWebView (YouTube)

/**
 * 指定したYouTube動画を再生する
 * 
 * @param videoID YouTubeのVideo ID
 */
-(void)loadYouTubeWithVideoID:(NSString *)videoID;

@end
UIWebView+YouTube.m
#import "UIWebView+YouTube.h"

@implementation UIWebView (YouTube)

- (void)loadYouTubeWithVideoID:(NSString *)videoID
{
    // スクロールを無効にする
    self.scrollView.scrollEnabled = NO;
    // スクロール時の跳ね返りを抑制する
    self.scrollView.bounces = NO;
    
    // UIWebViewにセットするHTMLのテンプレート
    NSString *htmlString = @" \
<!DOCTYPE html> \
<html> \
  <head> \
    <meta name=\"viewport\" content=\"initial-scale=1.0, user-scalable=no, width=%f\"> \
  </head> \
  <body style=\"background:#000000; margin-top:0px; margin-left:0px\"> \
    <iframe width=\"%f\" \
            height=\"%f\" \
            src=\"http://www.youtube.com/embed/%@?showinfo=0\" \
            frameborder=\"0\" \
            allowfullscreen> \
    </iframe> \
  </body> \
</html> \
    ";
    
    // HTMLテンプレートにUIWebViewのサイズとVideo IDをセットする
    NSString *html = [NSString stringWithFormat:
                      htmlString,
                      self.frame.size.width,
                      self.frame.size.width,
                      self.frame.size.height,
                      videoID];
    
    
    // UIWebViewに生成したHTMLをセットする
    [self loadHTMLString:html baseURL:nil];
}

@end

カテゴリを実装したら、ViewControllerを以下のように修正しましょう。

ViewController.m
#import "ViewController.h"
#import "UIWebView+YouTube.h"

@interface ViewController ()

@property (weak, nonatomic) IBOutlet UIWebView *webView;

@end

@implementation ViewController

- (void)viewDidAppear:(BOOL)animated
{
    [super viewDidAppear:animated];

    // YouTube動画を再生する
    [self.webView loadYouTubeWithVideoID:@"qc98u-eGzlc"];
}

@end

まとめ

今回はUIWebViewを使ったYouTube動画の再生方法について紹介しました。YouTube動画を再生するにはこの方法以外にもMPMoviePlayerViewControllerを拡張する方法がなどがあります。次回はこのMPMoviePlayerViewControllerを使う場合のやり方について紹介したいと思います!