构建自定义的 YouTube 播放列表播放器（1）

look_w

2005 年推出的 YouTube 已经发展成为占主导地位的视频共享网站。播放列表是 YouTube 上使用最广泛的特性之一。您可以用自己和其他用户上传的视频建立播放列表，并在 YouTube 上分享您的播放列表。您还可以将它们嵌入到您的网站、博客或社交媒体页面上，以便分享您的播放列表。然而，嵌入式播放列表播放器不具备 YouTube.com 上的原生播放器的全部功能。
图 1 显示了原生的 youtube.com 播放列表播放器。
图 1. 原生的播放列表播放器
图 2 显示了默认的嵌入式播放器。
图 2. 嵌入式播放列表播放器
在嵌入式播放器中：

• 在默认情况下，已包括的视频的列表是隐藏的，并且只显示为覆盖，而不是像在 YouTube.com 上那样显示在播放器旁边。
• 随机播放列表的功能被移除。
• 由作者添加到播放列表中的注释被删除。

我决定在我的博客上嵌入一个播放列表，播放 2014 年世界杯预选赛的最佳进球，此时，我遇到了一些限制。利用 YouTube API、jQuery、JsRender 模板引擎，以及 Bootstrap 前端框架的帮助，我扩展并改进了默认嵌入播放器，以便创建一个相当于原生播放器的版本。我会在本文中引导您完成同样的过程。您将在 Y​​ouTube 上建立一个播放列表，在精彩时刻（比如进球的时候）添加注释，然后使用相同的工具来构建一个嵌入式播放器，恢复缺失的功能，并改善用户体验。
完整的项目代码保存在 DevOps Services 上。我已经将应用程序部署到 Codename:Bluemix，所以您可以看到它在运行。您可以使用任何主机站点（包括 Bluemix）来部署您的代码。

Flash 安全性设置由于 Flash 对象的安全沙箱，如果您在浏览器中从系统直接打开 index.html 文件，对 YouTube API 的调用将无法正常工作。应用程序必须托管在 Web 服务器（例如，Bluemix）上。

备注：要建立本文项目中的代码的分支，请单击右上角的 EDIT CODE 按钮（如果您尚未登录，请输入您的 DevOps Services 登录信息），然后单击菜单上的 FORK 按钮，创建一个新的项目。
第一步是获得用来访问 YouTube API 的密钥。
获得一个 YouTube API 密钥要访问任何 Google 服务（包括 YouTube）的 API，必须先在 Google Developers Console 上注册一个项目，并创建一个 API 密钥。对各种 API 的访问是免费的，每天都有一定的请求数量限制，该数量因服务而异，拥有 Google 帐户的任何人都可以访问。
用您的 Google 凭据登录到  ，单击 Create Project。在默认情况下，项目名称和项目 ID 文本框中包含随机值。输入您的项目名称和 ID，然后单击 Create。
图 3. 创建新的 Google API 项目在项目仪表板中，单击 APIs & auth 打开可用 API 的列表。向下滚动到 YouTube Data API v3，单击标签为 Off 的相关按钮，启用您的项目访问。选中 APIs & Auth > Credentials 并在 Public API Access 下选中 Create New Key。选择 Browser key。
在 Create a browser key and configure allowed referers 对话框中，您可以将对 API 密钥的访问限制为来自特定域的请求，比如您自己的站点或 Bluemix.net。除非您限制访问，否则您的 API 密钥在您的应用程序 HTML 源代码中对所有人都是可见的。在开发过程中，这没有问题，所以将对话框保留空白，然后单击 Create 即可。但是，在部署完项目后，请返回到这一步，并限制来自您的应用程序域的请求进行访问，这样第三方就不可以在其他应用程序中使用该密钥。
如果您从 DevOps Services 克隆项目，那么现在您就可以将密钥插入到 index.html 文件注明的位置，使代码成功运行。