2012年10月14日 星期日

播放天生愛情狂"張智霖"的Youtube MV

iOS SDK內建的MPMoviePlayerController十分強大,輕輕鬆鬆就能播放手機上或雲端上的網路影片,然而如果直接指定Youtube影片的URL,MPMoviePlayerController卻變成啞巴吃黃蓮,有苦說不出,完全無能為力,無法順利播放。幸運地,第三方套件LBYouTubeView已經幫我們解決了這個問題,成功地利用MPMoviePlayerController播放Youtube影片。接下來彼得潘將為各位示範如何運用LBYouTubeView,播放偶像張智霖即將上映的愛情電影"天生愛情狂"。

1. 下載利用MPMoviePlayerController播放Youtube影片的LBYouTubeView

git clone https://github.com/larcus94/LBYouTubeView.git

2. 建立新專案PlayYoutube

3. 將剛剛下載的LBYouTubeView資料夾加入專案


4. 加入MediaPlayer.framework


5. 移除使用JSONKit的程式碼

iPhone使用者升級到新版iOS的比例很高,現在絕大多數的使用者都已升到iOS 5以上,因此我們可以大膽採用iOS 5內建的JSON API,不需要再透過第三方library JSONKit。

(1) 移除#import "JSONKit.h"  (LBYouTubeExtractor.m)

(2)  在_extractYouTubeURLFromFile:error: method裡 (LBYouTubeExtractor.m)
       移除
       else {
            JSONCode = [JSON objectFromJSONStringWithParseOptions:JKParseOptionNone  
                    error:&decodingError];
        }

6.  利用LBYouTubePlayerViewController播放Youtube影片  

PlayYoutubeViewController.h.m:

#import "LBYouTubePlayerViewController.h"


@interface PlayYoutubeViewController ()
{
    LBYouTubePlayerViewController* controller;
}
@end

@implementation PlayYoutubeViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
    
    
    NSURL *url = [NSURL URLWithString:@"http://www.youtube.com/watch?v=kLKaZ6Mi3H0"];
    controller = [[LBYouTubePlayerViewController alloc] initWithYouTubeURL:url quality:LBYouTubeVideoQualityLarge];
    controller.view.frame = CGRectMake(0.0f, 0.0f, 200.0f, 200.0f);
    controller.view.center = self.view.center;
    [self.view addSubview:controller.view];
    
}
說明:
(1) NSURL *url = [NSURL URLWithString:@"http://www.youtube.com/watch?v=kLKaZ6Mi3H0"];

設定張智霖浪漫愛情電影"天生愛情狂"MV的Youtube URL。

(2) controller.view.frame = CGRectMake(0.0f, 0.0f, 200.0f, 200.0f);
     controller.view.center = self.view.center;

設定影片顯示的位置和大小。

執行App:

影片會貼心地自動播放,不用勞駕使用者動指按下播放鍵。


點選右下角的放大button後,即可以放大播放。



如果還不滿足,還可以再次點選右上角的放大button,使影片佔滿整個畫面,但由於一般影片都是寬螢幕的比例,所以在直立畫面時將有部分畫面被切除。


最好的影片觀賞角度當然是水平模式呀,讓我們將iPhone轉向,以水平角度好好欣賞張智霖微笑的帥氣表情。



很多時候,我們想在App裡呈現的影片不只一個。因此我們希望能夠顯示影片的縮圖清單,然後再讓使用者自行選出一見鍾情的影片觀看,抓取Youtube影片的縮圖其實很簡單,縮圖的網址規則如下:

http://img.youtube.com/vi/VIDEO_ID/#.jpg

以"天生愛情狂"為例,其影片URL為http://www.youtube.com/watch?v=kLKaZ6Mi3H0,因此它的VIDEO_ID為kLKaZ6Mi3H0。 而#我們可以用 0 ~ 3代入,對應到Youtube幫我們產生的影片縮圖。 1 ~ 3都是120*90的小圖,2則是預設的縮圖。 0的圖案同2,只不過大小為480*360的大圖。

ex:











沒有留言:

張貼留言