使用 YouTube 辅助程序库在 iOS 应用中嵌入 YouTube 视频

youtube-ios-player-helper 是一个开源库,可帮助您将 YouTube iframe 播放器嵌入到 iOS 应用中。该库会创建一个 WebView,并在应用的 Objective-C 代码与 YouTube 播放器的 JavaScript 代码之间建立桥梁,从而让 iOS 应用能够控制 YouTube 播放器。本文介绍了安装该库的步骤,以及如何开始在 iOS 应用中使用该库 。

安装

本文假定您已创建一个以 最新版本 iOS 为目标的新 Single View Application 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. 将这些文件和文件夹拖动到项目中。确保选中将项复制到 目标组的文件夹中 选项。拖动 Assets 文件夹时,请确保选中为任何添加的文件夹创建文件夹引用 选项。

现在,该库应已安装完毕。

通过 Interface Builder 或 Storyboard 添加 YTPlayerView

如需通过 Interface Builder 或 Storyboard 添加 YTPlayerView,请执行以下操作:

  1. 将 UIView 实例拖动到视图中。

  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"];

构建并运行您的应用。视频缩略图加载完毕后,点按视频缩略图即可 启动全屏视频播放器。

控制视频播放

ViewController::loadWithVideoId: 方法有一个变体 loadWithVideoId:playerVars:, 开发者可以使用该变体将其他播放器变量传递给视图。这些播放器变量对应于 IFrame Player API中的播放器参数。playsinline 参数可让视频直接在视图中播放,而不是全屏播放。当视频内嵌播放时, 包含该视频的 iOS 应用可以通过编程方式控制播放。

将 loadWithVideoId: 调用替换为以下代码:

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

打开 Storyboard 或 Interface Builder。将两个按钮拖动到视图中,并将其标记为 播放 和停止。打开 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)控制。

打开 Storyboard 或 Interface Builder,然后按住 Control 键并拖动,将 播放 和 停止 按钮连接到 playVideo: 和 stopVideo: 方法。

现在,构建并运行应用。视频缩略图加载完毕后,您还应该能够使用原生控件播放和停止视频,除了播放器控件之外。

处理播放器回调

以编程方式处理播放事件(例如播放状态更改 和播放错误)可能很有用。在 JavaScript API 中,这是通过 事件监听器完成的。 在 Objective-C 中,这是通过 委托完成的。

以下代码展示了如何在 ViewController.h 中更新接口声明,以便该类符合委托协议。按如下所示更改 ViewController.h 的接口声明:

@interface ViewController : UIViewController<YTPlayerViewDelegate>

YTPlayerViewDelegate 是用于处理播放器中的播放事件的协议。 如需更新 ViewController.m 以处理某些事件,您首先需要将 ViewController 实例设置为 YTPlayerView 实例的委托。如需进行此更改,请将以下代码行添加到 viewDidLoad 方法 中 ViewController.h。

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。

最佳做法和限制

该库通过创建 WebView 并 呈现基本播放器所需的 HTML 和 JavaScript,基于 IFrame Player API 构建。该库的目标是尽可能易于使用,将开发者经常需要编写的方法捆绑到一个 软件包中。请注意以下几点限制:

  • 该库不支持在多个 YTPlayerView 实例中同时播放视频。如果您的应用有多个 YTPlayerView 实例,建议的最佳做法是在不同实例中开始播放之前,暂停或停止 任何现有实例中的播放。在 项目附带的示例应用中,ViewController 使用 NSNotificationCenter来调度有关播放即将 开始的通知。其他 ViewController 会收到通知,并暂停其 YTPlayerView 实例中的播放。
  • 尽可能重复使用现有的已加载 YTPlayerView 实例。如果需要在视图中更改视频,请勿创建新的 UIView 实例或新的 YTPlayerView 实例,也不要调用 loadVideoId: 或 loadPlaylistId:。请改用 cueVideoById:startSeconds: 系列函数,这些函数不会重新加载 WebView。加载整个 IFrame 播放器时,会出现明显的延迟。
  • 此播放器无法播放私享视频,但可以播放 不公开列出的视频。由于此 库封装了现有的 iframe 播放器,因此播放器的行为应与在移动浏览器中的网页上嵌入的播放器的行为几乎相同。

贡献

由于这是一个开源项目,请将修复和改进提交到 GitHub 项目的主分支。