1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
|
var player;
var litColor = '#eee';
var dimmedColor = '#555';
var interval;
for (var i = 0; i < ids.length; i++) {
drawBar(ids[i]);
}
function drawBar(id) {
var canvas = document.getElementById(id);
canvas.height = canvas.height; //clear
var context = canvas.getContext("2d");
if (current_id == id && player) {
context.fillStyle = dimmedColor;
context.fillRect(0, 9, 700, 2);
var loaded_start = player.getVideoStartBytes() / player.getVideoBytesTotal() * 700;
var loaded_length = player.getVideoBytesLoaded() / player.getVideoBytesTotal() * 700;
context.fillStyle = litColor;
context.fillRect(loaded_start, 9, loaded_length, 2);
var current_time = player.getVideoStartBytes() + player.getCurrentTime();
var current_pos = current_time / player.getDuration() * 690 + 5;
context.beginPath();
context.arc(current_pos, 10, 5, 0, Math.PI * 2, false);
context.closePath();
context.fill();
} else {
context.fillStyle = dimmedColor;
context.beginPath();
context.arc(5, 10, 5, 0, Math.PI * 2, false);
context.closePath();
context.fill();
context.fillRect(0, 9, 700, 2);
}
}
function onYouTubePlayerReady(playerId) {
player = document.getElementById('player');
player.addEventListener('onStateChange', 'onStateChange');
}
function onStateChange(state) {
switch (state) {
case 1: //playing
interval = setInterval(drawBar, 100, current_id);
break;
case 0: //ended
showPlay(current_id);
case -1: //unstarted
case 2: //paused
case 3: //buffering
case 5: //cued
clearInterval(interval);
}
}
function play(yid) {
if (current_id != yid) {
player.loadVideoById(yid, 0, 'hd720');
drawBar(current_id, dimmedColor);
current_id = yid;
}
if (player.getPlayerState() in {'-1':1, '0':1, '5':1}) { // unstarted, ended, cued
player.seekTo(0, true);
}
player.playVideo();
for (var i = 0; i < ids.length; i++) {
if (ids[i] == yid)
showPause(ids[i]);
else
showPlay(ids[i]);
}
}
function pause(yid) {
if (current_id != yid)
return
player.pauseVideo();
showPlay(yid);
}
function stop(yid) {
if (current_id != yid)
return
player.stopVideo();
showPlay(yid);
drawBar(yid);
}
function showPlay(yid) {
var play = document.getElementById('play_' + yid);
var pause = document.getElementById('pause_' + yid);
play.style.display = 'inline';
pause.style.display = 'none';
}
function showPause(yid) {
var pause = document.getElementById('pause_' + yid);
var play = document.getElementById('play_' + yid);
pause.style.display = 'inline';
play.style.display = 'none';
}
|
