-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
120 lines (104 loc) · 2.47 KB
/
index.html
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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html>
<html>
<head>
<title>Attempt to beat Will</title>
</head>
<body>
<div id="players">
</div>
<a href="javascript:void(0);" onclick="playNext();">Start</a>
<script src="https://www.youtube.com/iframe_api"></script>
<script>
var PLAYER_COUNT = 5;
var currentPlayerIndex = 0;
var players = [];
var eventIndex = 0;
var events = [];
var Player = function (parentIdString) {
this.player = new YT.Player(parentIdString, {
playerVars: {
enablejsapi: 1,
controls: 0,
showInfo: 0,
modestBranding: 1
},
events: {
'onStateChange': this.onStateChange.bind(this),
'onReady': this.onReady.bind(this)
}
});
this.state = 0; // 0 - Default
// 3 - Setting up buffering
// 4 - Ready to play
};
Player.prototype.cueNext = function () {
var event = events.shift();
if (event == undefined) {
console.log("DONE");
return;
}
this.state = 3;
this.player.cueVideoById({
videoId: event.video_id,
startSeconds: event.start,
endSeconds: event.end,
suggestedQuality: "240p"
});
}
Player.prototype.onStateChange = function (newState) {
switch (newState.data) {
case YT.PlayerState.ENDED:
this.cueNext();
playNext();
break;
case YT.PlayerState.PLAYING:
if (this.state == 3) {
this.player.pauseVideo();
this.player.unMute();
}
break;
case YT.PlayerState.PAUSED:
if (this.state == 3) {
this.state = 4;
}
break;
case YT.PlayerState.CUED:
if (this.state == 3) {
this.player.mute();
this.player.playVideo();
} else {
this.state = 4;
}
break;
}
}
Player.prototype.onReady = function (e) {
console.log("READY FOOL");
console.log(arguments);
this.cueNext();
}
function onYouTubeIframeAPIReady() {
var jsonReq = new XMLHttpRequest();
jsonReq.open("GET", "events.json", false);
jsonReq.send(null);
var json = jsonReq.responseText;
events = JSON.parse(json);
for (var i = 0; i < PLAYER_COUNT; i++) {
var playerDiv = document.createElement("div");
playerDiv.id = "player-"+i;
document.getElementById("players").appendChild(playerDiv);
players.push(new Player(playerDiv.id));
}
}
function playNext() {
var currentPlayer = players[currentPlayerIndex];
if (currentPlayerIndex >= players.length-1) {
currentPlayerIndex = 0;
} else {
currentPlayerIndex++;
}
currentPlayer.player.playVideo();
}
</script>
</body>
</html>