顯示具有 iOS video 標籤的文章。 顯示所有文章
顯示具有 iOS video 標籤的文章。 顯示所有文章

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:











2012年5月7日 星期一

左手學App,右手學英文的youtube播放

更新:
此篇文章介紹的方法利用UIWebView播放youtube影片,
彼得潘的另一篇文章,播放天生愛情狂"張智霖"的Youtube MV
利用LBYouTubeView播放影片,效果更好,
建議採用LBYouTubeView的做法。

從App裡播放YouTube影片其實很簡單,
接下來彼得潘將以好朋友沈老師生動有趣的英文教學影片為例子,
讓大家學習消失多年的左右互搏之術,左手學App,右手學英文。


1. 建立Single View Application專案YoutubeTest

2. 定義播放youtube影片的addYouTubeVideoWebView: method


說明
為了播放youtube影片,我們需要UIWebView幫忙。UIWebView不只精通於網頁,同時也擅長youtube。利用html的iframe標籤,即可將youtube影片置於UIWebView上。


3. 傳入youtube影片的URL

呼叫剛剛定義的addYouTubeVideoWebView: method,傳入youtube影片的URL,即可播放影片。以沈老師的教學影片為例,其URL原本為http://www.youtube.com/watch?v=ESo7GBC_em8&feature=youtu.be,但我們想要在html的iframe裡播放,必須採用embed URL。
此URL必須以http://www.youtube.com/embed/開頭,然後再於後頭接上ESo7GBC_em8,變為http://www.youtube.com/embed/ESo7GBC_em8


執行App:







Youtube影片完美地播放,就連水平全螢幕播放也難不倒它。大家快點一起加入左手學App,右手學英文的幸福旅程吧!