使用 YouTube 輔助程式庫在 iOS 應用程式中嵌入 YouTube 影片

youtube-ios-player-helper 是開放原始碼程式庫，可協助您將 YouTube iframe 播放器嵌入 iOS 應用程式。程式庫會建立 WebView，並在應用程式的 Objective-C 程式碼和 YouTube 播放器的 JavaScript 程式碼之間建立橋樑，讓 iOS 應用程式控制 YouTube 播放器。本文說明如何安裝程式庫，並開始在 iOS 應用程式中使用。

安裝

本文假設您已建立新的單一檢視應用程式 iOS 專案，並指定最新版本 iOS，且在建立專案時新增下列檔案：

  • Main.storyboard
  • ViewController.h
  • ViewController.m

您可以透過 CocoaPods 安裝程式庫，也可以從專案的 GitHub 頁面複製程式庫和來源檔案。

  • 您可以透過 CocoaPods 安裝程式庫。此外，您也可以透過專案的 GitHub 頁面取得程式庫和來源檔案，並複製到現有專案中。

透過 CocoaPods 安裝程式庫

如果專案使用 CocoaPods，請在 Podfile 中加入下列程式碼，安裝程式庫。 在該行中，將 x.y.z 替換為最新 Pod 版本，該版本會在專案的 GitHub 頁面上標明。

pod "youtube-ios-player-helper", "~> x.y.z"

在指令列提示中輸入 pod install，更新工作區的依附元件。

提示：請注意，使用 CocoaPods 時，您必須在 Xcode 中開啟 .xcworkspace 檔案，而非 .xcodeproj 檔案。

詳情請參閱 CocoaPods 教學課程。

手動安裝程式庫

如要手動安裝輔助程式庫，請透過 GitHub 的下載連結下載來源，或複製存放區。取得程式碼的本機副本後，請按照下列步驟操作：

  1. 在 Xcode 或 Finder 中開啟範例專案。

  2. 選取 YTPlayerView.h、YTPlayerView.m 和「Assets」資料夾。如果您在 Xcode 中開啟工作區，這些檔案會位於「Pods」->「Development Pods」->「YouTube-Player-iOS-Helper」和「Pods」->「Development Pods」->「YouTube-Player-iOS-Helper」->「Resources」底下。在 Finder 中，您可以在專案根目錄的「Classes」和「Assets」目錄中找到這些檔案。

  3. 將這些檔案和資料夾拖曳至專案中。確認已勾選「Copy items into destination group’s folder」選項。拖曳 Assets 資料夾時，請務必勾選「Create Folder References for any added folders」選項。

程式庫應已安裝完成。

透過 Interface Builder 或 Storyboard 新增 YTPlayerView

如要透過 Interface Builder 或 Storyboard 新增 YTPlayerView，請按照下列步驟操作：

  1. 將 UIView 執行個體拖曳到「View」。

  2. 選取「Identity Inspector」，然後將檢視畫面的類別變更為 YTPlayerView。

  3. 開啟 ViewController.h 並新增下列標頭：

    #import “YTPlayerView.h”

    並新增下列屬性：

    @property(nonatomic, strong) IBOutlet YTPlayerView *playerView;

  4. 在 Interface Builder 中，建立從上一步定義的 View 元素到 View Controller 的 playerView 屬性的連線。

  5. 現在開啟 ViewController.m，並在 viewDidLoad 方法結尾新增下列程式碼：

    [self.playerView loadWithVideoId:@"M7lc1UVf-VE"];

Build and run your application. 影片縮圖載入後，輕觸影片縮圖即可啟動全螢幕影片播放器。

控制影片播放

ViewController::loadWithVideoId: 方法有一個變化版本 loadWithVideoId:playerVars:，可讓開發人員將其他播放器變數傳遞至檢視畫面。這些播放器變數對應於 IFrame Player API 中的播放器參數。playsinline 參數可讓影片直接在檢視畫面中播放，而非全螢幕播放。影片內嵌播放時，包含影片的 iOS 應用程式可以透過程式輔助方式控制播放。

使用下列程式碼取代 loadWithVideoId: 呼叫：

NSDictionary *playerVars = @{
  @"playsinline" : @1,
};
[self.playerView loadWithVideoId:@"M7lc1UVf-VE" playerVars:playerVars];

開啟 Storyboard 或 Interface Builder。將兩個按鈕拖曳到檢視畫面，並分別標示為「Play」和「Stop」。開啟 ViewController.h 並新增下列方法，這些方法會對應至按鈕：

- (IBAction)playVideo:(id)sender;
- (IBAction)stopVideo:(id)sender;

現在，請開啟 ViewController.m 並定義以下兩個函式：

- (IBAction)playVideo:(id)sender {
  [self.playerView playVideo];
}

- (IBAction)stopVideo:(id)sender {
  [self.playerView stopVideo];
}

大多數 IFrame Player API 函式都有對應的 Objective-C 函式，但部分命名方式可能略有不同，以更符合 Objective-C 編碼規範。但控制影片音量的方法除外，因為這些方法是由手機硬體或專為此目的設計的內建 UIView 執行個體 (例如 MPVolumeView) 控制。

開啟分鏡腳本或 Interface Builder，然後按住 Control 鍵並拖曳，將「Play」和「Stop」按鈕連結至 playVideo: 和 stopVideo: 方法。

現在請建構並執行應用程式。影片縮圖載入後，除了播放器控制項外，您應該也能使用原生控制項播放及停止影片。

處理播放器回呼

您可以透過程式輔助方式處理播放事件，例如播放狀態變更和播放錯誤。在 JavaScript API 中，這項操作是透過事件監聽器完成。在 Objective-C 中，這項作業是透過委派完成。

以下程式碼說明如何更新 ViewController.h 中的介面宣告，讓類別符合委派協定。請按照下列方式變更 ViewController.h 的介面宣告：

@interface ViewController : UIViewController<YTPlayerViewDelegate>

YTPlayerViewDelegate 是用於處理播放器中播放事件的通訊協定。如要更新 ViewController.m 來處理部分事件，請先將 ViewController 執行個體設為 YTPlayerView 執行個體的委派項目。如要進行這項變更，請在 ViewController.h 的 viewDidLoad 方法中加入下列程式碼。

self.playerView.delegate = self;

現在，請將下列方法新增至 ViewController.m：

- (void)playerView:(YTPlayerView *)playerView didChangeToState:(YTPlayerState)state {
  switch (state) {
    case kYTPlayerStatePlaying:
      NSLog(@"Started playback");
      break;
    case kYTPlayerStatePaused:
      NSLog(@"Paused playback");
      break;
    default:
      break;
  }
}

建構並執行應用程式。在 Xcode 中觀察播放器狀態變更時的記錄輸出內容。 影片播放或停止時，您應該會看到更新。

為方便使用和閱讀，程式庫提供以 kYT* 前置字元開頭的常數。如需這些常數的完整清單，請參閱 YTPlayerView.m。

最佳做法和限制

這個程式庫以 IFrame Player API 為基礎，會建立 WebView 並算繪基本播放器所需的 HTML 和 JavaScript。這個程式庫的目標是盡可能簡化使用方式，將開發人員經常需要編寫的方法組合成套件。請注意以下幾項限制：

  • 程式庫不支援在多個 YTPlayerView 執行個體中同時播放影片。如果應用程式有多個YTPlayerView執行個體，建議先暫停或停止現有執行個體的播放作業，再於其他執行個體中開始播放。在專案隨附的範例應用程式中，ViewController 會使用 NSNotificationCenter 傳送通知，指出即將開始播放。系統會通知其他 ViewController，並在這些 ViewController 的 YTPlayerView 執行個體中暫停播放。
  • 盡可能重複使用現有已載入的 YTPlayerView 執行個體。當檢視畫面中的影片需要變更時，請勿建立新的 UIView 例項或新的 YTPlayerView 例項，也不要呼叫 loadVideoId: 或 loadPlaylistId:。請改用 cueVideoById:startSeconds: 系列函式，這些函式不會重新載入 WebView。載入整個 IFrame 播放器時，會出現明顯延遲。
  • 這個播放器無法播放私人影片，但可以播放不公開影片。由於這個程式庫會包裝現有的 iframe 播放器，因此播放器的行為應與行動瀏覽器中網頁內嵌播放器的行為幾乎相同。

貢獻

由於這是開放原始碼專案，請將修正和改善項目提交至 GitHub 專案的主分支版本。