构建自定义的 YouTube 播放列表播放器（2）
|
- UID
- 1066743
|
构建自定义的 YouTube 播放列表播放器（2）
配置 Google JavaScript 客户端库访问 YouTube APIGoogle 为多种语言（包括 JavaScript）提供了客户端库。将 JavaScript 客户端导入到您的 HTML 文档，方法是在文档的 <body> 标记（而不是 <head> 标记）中包含这个 HTML 标记：
1
| <script src="https://apis.google.com/js/client.js?onload=function"></script>
|
建议的最佳实践是将这个 <script> 标记放在 <body> 标记的末尾处。
在加载客户端库后，gapi (Google API) 对象在您的页面上的窗口范围内可用。刚才添加的 <script> 标记中的 onload 参数是指在库加载后立即调用的一个回调函数。该函数的定义必须先于加载客户端的 <script> 标记。该函数调用 gapi.client.load(api name, version, callback function) 方法来加载客户端将使用的 API。在本例中，使用了 gapi.client.load('youtube', 'v3', onYouTubeApiLoad) 来加载 YouTube API。onYouTubeApiLoad 是只有一行代码的函数，它调用了 setAPIKey 方法。在 setAPIKey 中，可以将密钥设置成您的 Google 浏览器密钥的值。
客户端提供了访问 Google 服务的多种 API 调用的方法。为了获取播放列表中的项目列表，您需要用一个异步函数来解析来自 YouTube API 中的 playlistItems.list 方法的响应，并将相关的属性存储在称为 YouTubePlayList 的 JavaScript 对象实例中。在本文中，您将开发 YouTubePlaylist 对象。该对象的构造函数是在如下所示的 JavaScript 函数中定义的。
清单 1. YouTubePlaylist.js1
2
3
4
5
6
| function YouTubePlaylist(id, entries) {
this.id = id;
this.entries = entries;
this.currently_playing = 0;
this.randomizer = false;
}
|
- id 是播放列表的 ID。
- entries 是播放列表中的视频的 JSON 数组。
- currently_playing 是在 entries 数组中当前播放视频的索引。
- randomizer 表示是否随机播放。
创建一个含响应参数的 JSON 对象现在，创建一个包含响应中需要的参数的 JSON 对象。您只需要使用可用参数 中的一小部分。
part 参数是由调用返回的属性的逗号分隔值 (CSV) 的列表。使用 contentDetails 和 snippet 属性。snippet 属性包含有关每个视频的基本信息。contentDetails 包含视频 ID 和播放列表作者添加的任何注释。在以后要识别视频的精彩时刻的时候，contentDetails 将会很重要。playListId 参数是将要使用的播放列表的 ID。对于本文，我设置了一个 ，其 ID 为 PLLzJfby7cTLTbusOgXca-yIpVOImC1mWe。在播放列表中，请注意进球的时间被添加为注释。JSON requestOptions 对象现在看起来如下所示：
1
2
3
4
| var requestOptions = {
playlistId: playlist_id,
part:'contentDetails,snippet'
};
|
调用 gapi.client.youtube.playlistItems.list() 方法，使用此 JSON 对象作为一参数，返回含两个方法的一个对象：execute 和 subscribe。用异步函数调用 execute 方法，使用响应作为一个参数。
1
| request.execute(function(response) {});
|
在响应中的 items 数组包含在播放列表中的视频列表。您将使用 jQuery each() 方法来遍历项目。您将在一个 JSON 对象中保存视频 ID、视频的中型缩略图、标题和注释，然后将它添加到一个数组中。
清单 2. 将 JSON 对象添加到 entries 数组1
2
3
4
5
6
7
8
9
10
11
| var entries = [];
$.each( response.items, function( key, val ) {
var entry = {};
entry.video_id = val.snippet.resourceId.videoId;
entry.image_src = val.snippet.thumbnails.medium.url;
entry.title = val.snippet.title;
entry.note = val.contentDetails.note;
entries.push(entry);
});
|
创建 YouTubePlayLlist 对象通过调用构造函数创建新的 YouTubePlaylist 对象（参见 ），其中含播放列表 ID 和 entries 数组，在窗口范围内将该对象保存为以播放列表 ID 命名的新变量。
1
| window[playlist_id] = new YouTubePlaylist(playlistId, entries);
|
现在，通过使用 window[playlist_id] 可以访问 YouTubePlaylist 对象。稍后，您将使用 window[playlist_id] 调用 YouTubePlaylist 对象的其他功能。 |
|
|
|
|
|
