在iOS app用webview播放YouTube影片

前言

如果要直接launch YouTube app來播放, 那需要URL scheme:

• youtube://
• http://www.youtube.com/v/VIDEO_IDENTIFIER
• http://www.youtube.com/watch?v=VIDEO_IDENTIFIER

今天我需要用嵌入webview 方式播放YouTube影片來提供比較好的使用者體驗:D

---

實作

原理就是用webview 的loadHTMLString 方法來讀取我們assign好的HTML內容.

廢話不說, 直接上code!

webplayer = [[UIWebView alloc] initWithFrame:CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT)];
    webplayer.scalesPageToFit = YES;
    webplayer.delegate = self;
    [self.view addSubview:webplayer];
    NSString *videoURL = [NSString stringWithFormat:@"http://www.youtube.com/embed/%@", youtubeID];
    NSString *videoHTML = [NSString stringWithFormat:@"\
                 \
                 \
                 \
                 \
                 \
                 \
                 \
                 ", videoURL];
    [webplayer loadHTMLString:videoHTML baseURL:nil];
    webplayer.backgroundColor = [UIColor blackColor];
    webplayer.opaque = NO;

---

重點一

如果是使用xib來製作webplayer 那可以直接把delegate給定

不然就是在.m

webplayer.delegate = self;

以及在.h 加上

@interface webPlayerViewController : UIViewController <UIWebViewDelegate> 

---

重點二

videoURL 是 http://www.youtube.com/embed/(youtubeID)

不是一般網址

https://www.youtube.com/watch?v=b1aHBlaC0de

也不是分享用的縮址

http://youtu.be/b1aHBlaC0de

舊版的嵌入網址也不適用

www.youtube.com/v/b1aHBlaC0de?version=3&hl=zh_TW&rel=0

---

最後重點

HTML 樣式的調整, 可以觀察一下NSString中一些跳脫字元的使用方式.

另外, 我們可以加上一個按鈕來關閉這頁.

UIBarButtonItem *doneButton = [[UIBarButtonItem alloc] initWithTitle:@"Done" 
         style:UIBarButtonItemStylePlain 
         target:self 
         action:@selector(onClickedDone:)];
self.navigationItem.rightBarButtonItem = doneButton;
[doneButton release];

- (void)onClickedDone:(id)sender {
    [webplayer release];
    webplayer = nil;
    //popViewController or dismissViewController
}

參考連結: MightyMeta

Sent from Evernote