使用 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.hYTPlayerView.mAssets 資料夾。如果您在 Xcode 中開啟工作區,就可以在 Pods -> Development Pod -> YouTube-Player-iOS-HelperPods -> Development Pod -> YouTube-Player-iOS-Helper -> Resources 下找到工作區。您可以在 Finder 的 ClassAssets 目錄中的專案根目錄中找到這些項目。

  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.hviewDidLoad 方法中加入以下這一行。

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 專案的主要分支版本