使用 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 中，这些内容位于项目的根目录中的 Classes 和 Assets 目录中。

  3. 将这些文件和文件夹拖到您的项目中。确保已选中 Copy items into destination group's folder 选项。拖动素材资源文件夹时，请务必选中为所有已添加的文件夹创建文件夹引用选项。

现在，应安装该库。

通过 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 并按住拖动鼠标，将 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 将收到通知，并将在其 YTPlayerView 实例中暂停播放。
  • 尽可能重复使用已加载的现有 YTPlayerView 实例。如果需要在视图中更改视频，请勿创建新的 UIView 实例或新的 YTPlayerView 实例，也不要调用 loadVideoId: 或 loadPlaylistId:。请改为使用不会重新加载 WebView 的 cueVideoById:startSeconds: 系列的函数。加载整个 iframe 播放器时会有明显的延迟。
  • 此播放器无法播放私享视频，但可以播放不公开列出的视频。由于此库会封装现有 iframe 播放器，因此该播放器的行为应该与移动浏览器中嵌入网页的播放器的行为几乎相同。

贡献

由于这是一个开源项目，因此请向 GitHub 项目的 master 分支提交修复和改进。