【iPhone SDK】UIWebViewを使用してYouTube動画を再生する

iPhoneには基本アプリとしてYouTubeアプリがあります。

しかし、プロモーションアプリなどアプリ内で動画を再生した場合があります。
リソースに登録した動画や、サーバーにアップしている動画を再生するには
MPMoviePlayerControllerを使用します。
iOSのバージョンによって記述が変わるので近いうちにこの件の投稿を行う予定です。


さて、本題のYouTube再生ですが、
YouTubeのURLを直接MPMoviePlayerControllerにわたしても再生はできません。
直接MP4のファイルではないからですね。

YouTubeには外部プレイヤーというものが用意されています。
これはブログなどYouTube動画を手軽に視聴できるようにしてくれるものです。

こちらのYouTubeAPIブログによると
iPhoneアプリでYouTube動画再生は2通りあります。

1.Safariを起動させ、YouTubeへジャンプする
[[UIApplication sharedApplication] openURL:[NSURL URLWithString:@"http://~~"]];

しかし、これではマルチタスク非対応のOSではアプリが終了してしまいます。

2.Embedタグを使用する
iPhoneアプリにはWEBページを表示することができるUIWebViewがあります。
これにYouTubeの外部プレイヤータグを設定することで再生できますよっとあります。

・HTMLソースをまず作成
NSString *htmlString = @"<html><head>
<meta name = \"viewport\" content = \"initial-scale = 1.0, user-scalable = no, width = 212\"/></head>
<body style=\"background:#F00;margin-top:0px;margin-left:0px\">
<div><object width=\"212\" height=\"172\">
<param name=\"movie\" value=\"http://www.youtube.com/v/oHg5SJYRHA0&f=gdata_videos&c=ytapi-my-clientID&d=nGF83uyVrg8eD4rfEkk22mDOl3qUImVMV6ramM\"></param>
<param name=\"wmode\" value=\"transparent\"></param>
<embed src=\"http://www.youtube.com/v/oHg5SJYRHA0&f=gdata_videos&c=ytapi-my-clientID&d=nGF83uyVrg8eD4rfEkk22mDOl3qUImVMV6ramM\"
type=\"application/x-shockwave-flash\" wmode=\"transparent\" width=\"212\" height=\"172\"></embed>
</object></div></body></html>";

・UIWebViewに読み込ませる
[webView loadHTMLString:htmlString baseURL:[NSURL URLWithString: nil]];

baseURLはnilでもいいようです。

上記サンプルではURLや幅、高さが完全固定ですが、
こちらのサイトの書き方を行えば、関数化してサイズやURLを可変対応できますね

url = @"http://~~";

width = 幅サイズ;
height = 高さサイズ;

NSString* embedHTML = @"\ 
<html><head>\ 
<style type=\"text/css\">\ 
body {\ 
background-color: transparent;\ 
color: white;\ 
}\ 
</style>\ 
</head><body style=\"margin:0\">\ 
 <embed id=\"yt\" src=\"%@\" type=\"application/x-shockwave-flash\" \ 
 width=\"%0.0f\" height=\"%0.0f\"></embed>\ 
</body></html>";

NSString* html = [NSString stringWithFormat:embedHTML, url, width, height];

%とマークした部分をstringWithFormatを使用して設定する方法ですね

とりあえず、これらのサンプルから
UIWebViewに動画のサムネイル画像が表示され再生ボタンが表示されるので
再生ボタンを押下するとYouTube動画が再生開始します。


この記事へのコメント


この記事へのトラックバック