构建自定义的 YouTube 播放列表播放器（3）
|
- UID
- 1066743
|
构建自定义的 YouTube 播放列表播放器（3）
使用模板与 JsRender 格式化播放器您的播放器的外形看起来会像图 4，缩略图、标题和注释表位于右侧，共同组成播放列表中的条目。
图 4. 新播放器的结构
在默认情况下，HTML 字符集不包括类似于在原生 YouTube 播放器上的下一个、上一个和随机的图标。您的应用程序将使用 Bootstrap 前端框架提供的图标。为了导入 Bootstrap 样式表，请将下面的代码片断添加到 <head> 标记。
1
2
3
| <link rel="stylesheet"
type="text/css"
href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
|
您将使用 JsRender 模板引擎渲染 YouTubePlaylist 对象。在 <script> 标记中定义一个 JsRender 模板，将 type 属性设置为 text/x-jsrender。您可以通过调用 x-jsrender 模板的 render() 方法与要渲染的对象生成 HTML。您可以使用双大括号 {{:}} 渲染模板中的变量。例如，{{:id}} 渲染传递给模板的对象的 id 属性。
清单 3 中所示的模板在 Web 页面中嵌入了一个 YouTube 播放器。
清单 3. 嵌入 YouTube 播放器的模板1
2
3
4
5
6
7
8
| <object width="640"
height="360"
data="http://www.youtube.com/v/video id?version=3&enablejsapi=1&playerapiid=id"
id="player id"
type="application/x-shockwave-flash">
<param value="always" name="allowScriptAccess">
<param value="true" name="allowFullScreen">
</object>
|
在清单 3 中，video id 是要播放的视频的 ID，player id 是播放器对象本身的 ID。在初始化时，系统会提示您位于 entries 数组中的第一个视频，所以可以输入 {{:entries[0].video_id}} 作为嵌入式播放器模板中的视频 ID。对于播放器 ID，可以使用播放列表的 ID，即 {{:id}}。
在 YouTube 播放器对象的初始化时，播放器会自动调用 onYouTubePlayerReady() 函数，使用播放器的 ID 作为参数，定制它在状态更改时的行为。播放器的状态是未开始、结束、播放、暂停、缓冲和视频提示；这些状态被列举为 -1、0、1、2、3 和 4。在该 API 的当前版本中，不能定制回调函数。现在，您将在窗口范围内定义一个函数，加载在播放列表中的下一个视频（您稍后会在 YouTubePlaylist 对象中定义这个函数），并将其添加为侦听播放器的一个事件侦听器。
清单 4. 加载播放列表中的下一个视频的函数1
2
3
4
5
6
7
8
9
10
11
12
| function onYouTubePlayerReady(playerApiId) {
var player = document.getElementById(playerApiId);
window["onStateChange" + playerApiId] = function(state) {
switch(state) {
case 0:
var video_player = document.getElementById(player_id);
video_player.loadVideoById(window[player_id].getNextVideo(), 0, "large"); <br>
break;
}
};
player.addEventListener("onStateChange", "onStateChange" + playerApiId);
}
|
要遍历视频数组，可以使用 JsRender {{for}} 标记。您将利用清单 5 中的模板创建在图 4 右边的每个播放列表条目。
清单 5. 用于创建列表中每个播放列表条目的模板1
2
3
4
5
6
7
8
9
10
11
| {{for entries}}
<div class="playListEntry {{if #index == 0}}nowPlaying{{/if}}" id="{{:video_id}}">
<div class="playListEntryThumbnail">
<img src="{{:image_src}}"/>
</div>
<div class="playListEntryDescription">
<div class="playListEntryTitle">{{:title}}</div>
<div class="playListEntryNote">{{:note}}</div>
</div>
</div>
{{/for}}
|
在清单 5 中，entries 是 YouTubePlaylist 对象中的 entries 属性。数组中的对象的索引被存储在 #index 变量中。因为列表中的第一个条目是创建播放器时在播放器中加载的视频，所以您可以将 nowPlaying CSS 类应用于第一个 playListEntry 类，方法是使用 {{if}} 标记在 for 循环中识别它。
在播放器底部的控件是通过将 Bootstrap glyphicon 类应用到一个 span 来创建的，图标使用 glyphicon-backward、glyphicon-forward 和 glyphicon-random 类。
1
2
3
4
5
| <div class="playListControls">
<span class="playListControl disabled glyphicon glyphicon-backward"/>
<span class="playListControl glyphicon glyphicon-forward"/>
<span class="playListControl glyphicon glyphicon-random"/>
</div>
|
请注意，最初 “上一个” 图标是被禁用的，因为当播放器第一次加载时，它被默认为播放列表中的第一项，所以没有上一个视频可以播放。
您将渲染的 HTML 添加到页面上的一个空 div，使用 ID playlist 和此代码段（请记住，window[player_id] 指的是在 “ ” 一节中创建的对象。
1
| $('#' + player_id).html($('#playListPlayerTemplate').render(window[player_id]));
|
为了使此代码可重用，将其移动到带有签名 addPlaylistToElement(playlist_id, element_id) 的函数。然后就可以使用 addPlaylistToElement('PLLzJfby7cTLTbusOgXca-yIpVOImC1mWe', 'playlist') 调用它。 |
|
|
|
|
|
