使用 YouTube 小幫手程式庫，在 iOS 應用程式中嵌入 YouTube 影片

youtube-ios-player-helper 是一個開放原始碼程式庫，可協助您將 YouTube iframe 播放器嵌入 iOS 應用程式中。這個程式庫會在應用程式的 Objective-C 程式碼與 YouTube 播放器的 JavaScript 程式碼之間建立 WebView 及橋接設定，讓 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 Pod -> YouTube-Player-iOS-Helper 和 Pods -> Development Pod -> YouTube-Player-iOS-Helper -> Resources 下找到工作區。您可以在 Finder 的 Class 和 Assets 目錄中的專案根目錄中找到這些項目。

  3. 將這些檔案和資料夾拖曳到專案中。確認已勾選 [Copy items to destination group's folder] 選項。拖曳「Assets」資料夾時，請務必勾選 [Create a FolderReferences for any added folders] (為所有新增的資料夾建立資料夾參照) 選項。

系統現在應已安裝程式庫。

透過介面建構工具或分鏡腳本新增 YTPlayerView

如何透過介面建構工具或分鏡腳本新增 YTPlayerView：

  1. 將 UIView 執行個體拖曳至您的 View 中。

  2. 選取身分檢查器，並將檢視區塊類別變更為 YTPlayerView。

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

    #import “YTPlayerView.h”

    請一併加入下列屬性：

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

  4. 在介面製作工具中，從您在上一步定義的 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];

開啟分鏡腳本或介面建立工具。將兩個按鈕拖曳至您的檢視畫面上，並為「播放」和「停止」標籤加上標籤。開啟 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。

開啟分鏡腳本或介面建構工具，並按住 拖曳 即可將「播放」和「停止」按鈕連結到 playVideo: 和 stopVideo: 方法。

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

處理玩家回呼

您可以利用程式處理播放事件，例如播放狀態變更和播放錯誤。在 JavaScript API 中，這會透過事件監聽器來完成。在目標 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 會收到通知，且會在其 YTPlayerView 執行個體中暫停播放。
  • 盡可能重複使用已載入的現有 YTPlayerView 執行個體。如果需要變更檢視畫面中的影片，請勿建立新的 UIView 執行個體或新的 YTPlayerView 執行個體，且不要呼叫 loadVideoId: 或 loadPlaylistId:。請改用 cueVideoById:startSeconds: 系列函式，該函式並不會重新載入 WebView。載入整個 iFrame 播放器時，可能會出現明顯延遲。
  • 這位玩家無法播放私人影片，但可以播放不公開的影片。由於這個程式庫會納入現有的 iframe 播放器，因此播放器的行為應與在行動瀏覽器中內嵌的播放器行為幾乎相同。

貢獻

由於這是開放原始碼專案，因此請修正並修正 GitHub 專案的主要分支版本。