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

论坛元老

Rank: 8 Rank: 8

UID: 1066743

1^#

打印

字体大小: tT

look_w发表于 2018-11-2 16:05 | 只看该作者

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

使用所添加的功能现在添加函数，以便使用 JavaScript 对象的附加功能。
首先，添加一个辅助函数来安排播放列表的控制。如果播放器打开了随机播放：

高亮显示 “随机” 图标。
“上一个” 图标始终被禁用，因为没有在任何地方记录先前播放的视频。
“下一个” 图标始终被启用，因为播放列表处于随机状态中，永远不会播放 “最后一个” 视频。（想想看：当您的 MP3 播放器是随机播放时，它是否停止过播放？）

如果播放列表没有打开随机播放：

只有在播放列表中的第一个条目在播放时才会禁用 “上一个” 图标。
只有在播放列表中的最后一个条目在播放时才会禁用 “下一个” 图标。
“随机” 图标被禁用，直到再次单击它。

清单 9 显示了辅助函数。
清单 9. 安排播放列表控制的辅助函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

接下来，我们添加一个函数，为给定的播放列表 ID 将视频加载到播放器，并在时间索引处开始播放。请记住，从当前播放视频的 div 中删除 nowPlaying 类，并将其添加到新视频的 div。然后调用清单 9 中的辅助函数，安排播放列表图标。清单 10 显示了视频加载函数。
清单 10. 将视频加载到播放器中的函数

1
2
3
4
5
6
7
8
9

function loadVideoForPlayer(currently_playing_video_id, player_id, time) {
time = time || 0;
var video_id = window[player_id].getCurrentlyPlaying();
$('#' + currently_playing_video_id).removeClass('nowPlaying')
$('#' + video_id).addClass('nowPlaying');
$('#' + player_id + 'playListEntries').scrollTop($('#' + video_id).index() * 80);
document.getElementById(player_id).loadVideoById(video_id, time, "large");
arrangePlayerControls(player_id);
}

最后，添加一个函数来加载给定播放列表中的下一个视频，但前提是播放列表中有另一个视频（也就是说，没有打开随机播放，而且当前视频不是最后一个视频）。
清单 11. 在下一个视频存在时加载视频的函数

1
2
3
4
5
6

function loadNextVideo(player_id) {
var currently_playing_video_id = window[player_id].getCurrentlyPlaying();
if(window[player_id].next()) {
loadVideoForPlayer(currently_playing_video_id, player_id);
}
}

该函数类似于在 onYouTubePlayerReady() 中声明的匿名函数（参见），重构 onYouTubePlayerReady() 中的 case 0 块，以便将它改为调用 loadNextVideo()。
您可能已经注意到，我在播放列表中的每个视频内都添加了进球的时间。利用这些新函数，您可以使用进球时间作为链接热点，直接跳转到视频中的进球时刻，而不需要观看整个视频。在 addPlaylistToElement() 中的 $.each() 循环内，将每个 playlistItem 对象的注释值存储在一个本地变量中，然后使用 JavaScript match() 函数从注释返回一个时间数组，使用正则表达式 /[0-9]*:[0-5][0-9]/g 找出每个时间。然后，您可以循环整个数组，并用一个链接来替换变量中的每个时间值，利用播放器 ID、要播放的视频和开始时间的时间索引来调用 cueThisVideo() 函数。请记住，YouTube API loadVideoById() 调用是按秒计算时间的，所以要将时间分割成一个数组，在字符串中使用冒号作为分隔符。将第一索引（分钟）的值乘以 60，就可以将其转换为秒，然后将所得的秒数与第二索引中的秒数相加，就可以获得总秒数。例如，1:30 变为数组 [1，30]（1 * 60）+ 30 = 90 秒。最后，用新的链接替换注释中的时间。当注释中的每个时间值都被处理后，将完成的字符串保存为在 entries 数组中每个条目的注释，如清单 12 所示。
清单 12. 用一个链接替换注释中的时间

1
2
3
4
5
6
7
8
9
10
11
12
13
14

var note = val.contentDetails.note;
var times = note.match(/[0-9]*:[0-5][0-9]/g);
times.forEach(function(value, index, array) {
var time = value.split(":");
var seconds = parseInt(time[0]) * 60;
seconds += parseInt(time[1]);
note = note.replace(value,
   "<span class='timeLink' onclick='cueThisVideo(\""
   + player_id + "\", \""
   + video_id + "\", "
   + seconds + ");'>"
   + value + "</span>");
});
entry.note = note;

剩下的工作就是重新访问模板，并添加对这些新函数的调用。您希望用户能够通过单击标题或缩略图让视频排队，在播放列表中排队上一个或下一个视频，并利用控制面板上的相关按钮随机化播放列表。清单 13 显示了已经在模板中完成的更改，以便使用附加的功能。
清单 13. 重构的模板代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<div onclick="cueThisVideo('{{:~player_id}}', '{{:video_id}}');"
   class="playListEntryThumbnail">
      <img src="{{:image_src}}"/>
</div>
<div onclick="cueThisVideo('{{:~player_id}}', '{{:video_id}}');"
   class="playListEntryTitle">
   {{:title}}
</div>

<span id="{{:id}}Backward"
   class="playListControl disabled glyphicon glyphicon-backward"
   onclick="if(!$(this).hasClass('disabled')) { loadPreviousVideo('{{:id}}') }">
</span>
<span id="{{:id}}Forward"
   class="playListControl glyphicon glyphicon-forward"
   onclick="if(!$(this).hasClass('disabled')) { loadNextVideo('{{:id}}') }">
</span>
<span id="{{:id}}Random"
   class="playListControl glyphicon glyphicon-random"
   onclick="window['{{:id}}'].randomize();arrangePlayerControls('{{:id}}');">
</span>

收藏分享评分

回复引用

订阅 TOP

返回列表