網頁

2012年9月3日 星期一

iOS開發筆記 - app內直接播放YouTube影片(2)

之前曾寫過一篇iOS開發筆記 - app內直接播放YouTuBe影片

那篇做法有幾個問題
  1. 用iFrame內篏,不知道為什麼就是無法autoplay,找了官方文件很久相關資料也無法解決
  2. YouTuBe全螢幕會自動旋轉成橫向,當然也可以轉回直向
  3. 要自己用iOS開發筆記-加button到NavigationBar加Button
  4. 用presentModalViewController去play,即使用第三點所述之方法,會有個問題是恢復後無法操作,會當機

根據以上幾點,那篇的做法,只能UIWebView直接加上去,然後,程式在原UIViewController轉橫向,然後等待使用者按Play,不知道為什麼我就是覺得這樣有點蠢,加上YouTuBe全螢幕後,會出現個按鈕,自己再加上個按鈕,多此一舉.....

最後找到了Auto Play youtube video in iPhone / iPad,重新設計我的概念,大致如下

  1. 用舊式的embeded
  2. 要實作WebView的delegated method
  3. 直接在原 view加上這個WebView

Step 1. ViewController或要使用的那個Class記得加入WebDelegate,如:

@interface RootViewController : UIViewController<UIWebViewDelegate>
@end


Step 2. 建一個新的WebView及實際運作的程式

- (void)showYouTuBe:(NSString*)url
{
    if (__youTubeWebView == nil) {
        __youTubeWebView = [[UIWebView alloc] initWithFrame:CGRectMake(0, 0, 320, 480)]; //這邊故意設成橫向大小,不過說實在我不覺得有用就是了
       
        __youTubeWebView.delegate = self;
    }
    
    NSString *embedHTML =@"<html><head></head>"
    "<body style=\"background:#FFFFF;margin-top:20px;margin-left:0px\">"
    "<div><object width=\"%0.0f\" height=\"%0.0f\">"
    "<param name=\"wmode\" value=\"transparent\"></param>"
    "<embed src=\"%@?version=3&f=user_favorites&app=youtube_gdata\""
    "type=\"application/x-shockwave-flash\" wmode=\"transparent\" width=\"%0.0f\" height=\"%0.0f\"></embed>"
    "</object></div></body></html>";
    
    NSString* html = [NSString stringWithFormat:embedHTML, __youTubeWebView.frame.size.width, __youTubeWebView.frame.size.height, url, __youTubeWebView.frame.size.width, __youTubeWebView.frame.size.height];
    
    [__youTubeWebView loadHTMLString:html baseURL:nil];
    __youTubeWebView.backgroundColor = [UIColor clearColor];
    
    [self.view addSubview:__youTubeWebView];
}


Step 3. 寫入Delegate

- (void)webViewDidFinishLoad:(UIWebView *)_webView {
    
    UIButton *b = [self findButtonInView:_webView];
    [b addTarget:self action:@selector(finish:) forControlEvents:UIControlEventTouchUpInside];
    [b sendActionsForControlEvents:UIControlEventTouchUpInside]; //Autoplay
    
}


- (UIButton *)findButtonInView:(UIView *)view {
     UIButton *button = nil;
     if ([view isMemberOfClass:[UIButton class]]) {
          return (UIButton *)view;
     }
     if (view.subviews && [view.subviews count] > 0) {
          for (UIView *subview in view.subviews) {
               button = [self findButtonInView:subview];
               if (button) return button;
          }
     }
     return button;
}

- (void)finish:(id)sender
{
    [__youTubeWebView removeFromSuperview];
}



我在裡頭加上了
[b addTarget:self action:@selector(finish:) forControlEvents:UIControlEventTouchUpInside];

是為按下那個Done按鈕,讓整個WebView消失,見finish這個function

在實測中發現少了sendActionsForControlEvents這個method,就無法自動播放。不想自動播放,可以拿掉它。

感覺還是很多地方是可以調整的,不過要真的試一陣子才知道。

[注意]
這篇所寫所用的YouTuBe的連結,並非直接使用YouTuBe中按下“分享”按鈕的那個連結,而是按下“嵌入”按鈕並勾選“使用舊版內嵌程式碼”,再取得其中的src,例如:

Steve Jobs 賈伯斯 史丹佛大學畢業典禮演說

紅線框起來的部分就是要的網址,後續的變數都在程式碼的embedHTML紅字內,不然就是記得src的內容全copy下來後,將embedHTML中的src內容全改成%@,url的內容就該是copy下來的內容

沒有留言:

張貼留言