|
|
@@ -1,40 +1,67 @@
|
|
1
|
1
|
function Player(sources) {
|
|
2
|
2
|
this.playlist = sources;
|
|
3
|
3
|
this.current = {};
|
|
|
4
|
+ this.volume = 100;
|
|
|
5
|
+ this.currentSong = -1;
|
|
4
|
6
|
this.isPlaying = false;
|
|
5
|
|
- this.player;
|
|
|
7
|
+ this.isMute = false;
|
|
|
8
|
+ this.rate = 500;
|
|
6
|
9
|
this.YTplayer = false;
|
|
|
10
|
+ this.controls = {};
|
|
|
11
|
+ this.interval = null;
|
|
7
|
12
|
|
|
8
|
13
|
this.init = function() {
|
|
9
|
14
|
this.loadYTplayer();
|
|
|
15
|
+ this.bindControls();
|
|
10
|
16
|
this.bindEvents();
|
|
11
|
|
- console.log('init...');
|
|
12
|
17
|
}
|
|
13
|
18
|
|
|
14
|
19
|
this.bindEvents = function() {
|
|
15
|
|
- var toggle = document.getElementById('player-toggle');
|
|
16
|
|
- toggle.addEventListener('click', this.toggle);
|
|
17
|
|
- var previous = document.getElementById('player-previous');
|
|
18
|
|
- previous.addEventListener('click', this.previous);
|
|
19
|
|
- var next = document.getElementById('player-next');
|
|
20
|
|
- next.addEventListener('click', this.next);
|
|
|
20
|
+ this.controls.toggle.addEventListener('click', this.toggle);
|
|
|
21
|
+ this.controls.previous.addEventListener('click', this.previous);
|
|
|
22
|
+ this.controls.next.addEventListener('click', this.next);
|
|
|
23
|
+ this.controls.bar.addEventListener('click', this.seekPosition);
|
|
|
24
|
+ this.controls.volume.addEventListener('input', this.setVolume);
|
|
|
25
|
+ this.controls.volumeMute.addEventListener('click', this.setMute);
|
|
21
|
26
|
}
|
|
22
|
27
|
|
|
23
|
|
- this.newSong = function (videoId) {
|
|
24
|
|
- if (this.YTplayer)
|
|
25
|
|
- this.YTplayer.parentNode.removeChild(this.YTplayer);
|
|
26
|
|
- this.YTplayer = new YT.Player('YTplayer', {
|
|
27
|
|
- height: '0',
|
|
28
|
|
- width: '0',
|
|
29
|
|
- videoId: videoId,
|
|
30
|
|
- playerVars: {
|
|
31
|
|
-
|
|
32
|
|
- },
|
|
33
|
|
- events: {
|
|
34
|
|
- 'onReady': onPlayerReady,
|
|
35
|
|
- 'onStateChange': onPlayerStateChange
|
|
36
|
|
- }
|
|
37
|
|
- });
|
|
|
28
|
+ this.bindControls = function() {
|
|
|
29
|
+ this.controls.toggle = document.getElementById('player-toggle');
|
|
|
30
|
+ this.controls.next = document.getElementById('player-next');
|
|
|
31
|
+ this.controls.previous = document.getElementById('player-previous');
|
|
|
32
|
+ this.controls.volume = document.getElementById('player-volume-bar');
|
|
|
33
|
+ this.controls.volumeSet = document.getElementById('player-volume-set');
|
|
|
34
|
+ this.controls.volumeMute = document.getElementById('player-volume-mute');
|
|
|
35
|
+ this.controls.bar = document.getElementById('player-bar');
|
|
|
36
|
+ this.controls.buffer = document.getElementById('player-buffer');
|
|
|
37
|
+ this.controls.played = document.getElementById('player-played');
|
|
|
38
|
+ this.controls.cursor = document.getElementById('player-cursor');
|
|
|
39
|
+ this.controls.duration = document.getElementById('player-duration');
|
|
|
40
|
+ this.controls.currentTime = document.getElementById('player-currentTime');
|
|
|
41
|
+ this.controls.title = document.getElementById('player-title');
|
|
|
42
|
+ }
|
|
|
43
|
+
|
|
|
44
|
+ this.getVideoID = function(url) {
|
|
|
45
|
+ re = /\?v=([^&]*)/;
|
|
|
46
|
+ match = re.exec(url);
|
|
|
47
|
+ return (match && match.length >= 2 ? match[1] : '');
|
|
|
48
|
+ }
|
|
|
49
|
+
|
|
|
50
|
+ this.newSong = function (url) {
|
|
|
51
|
+ if (!this.YTplayer) {
|
|
|
52
|
+ this.YTplayer = new YT.Player('YTplayer', {
|
|
|
53
|
+ height: '0',
|
|
|
54
|
+ width: '0',
|
|
|
55
|
+ videoId: this.getVideoID(url),
|
|
|
56
|
+ events: {
|
|
|
57
|
+ 'onReady': onPlayerReady,
|
|
|
58
|
+ 'onStateChange': onPlayerStateChange
|
|
|
59
|
+ }
|
|
|
60
|
+ });
|
|
|
61
|
+ } else {
|
|
|
62
|
+ this.YTplayer.loadVideoById(this.getVideoID(url));
|
|
|
63
|
+ }
|
|
|
64
|
+ this.isPlaying = true;
|
|
38
|
65
|
}
|
|
39
|
66
|
|
|
40
|
67
|
this.loadYTplayer = function() {
|
|
|
@@ -44,33 +71,119 @@ function Player(sources) {
|
|
44
|
71
|
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
|
|
45
|
72
|
};
|
|
46
|
73
|
|
|
47
|
|
- this.seekPosition = function() {};
|
|
|
74
|
+ this.getState = function() {
|
|
|
75
|
+ var current = this.YTplayer.getCurrentTime();
|
|
|
76
|
+ var bufferized = this.YTplayer.getVideoLoadedFraction() * 100;
|
|
|
77
|
+ var duration = this.current.duration;
|
|
|
78
|
+ var fraction = (current / duration) * 100;
|
|
|
79
|
+ this.controls.played.style.width = fraction + '%';
|
|
|
80
|
+ this.controls.buffer.style.width = bufferized + '%';
|
|
|
81
|
+ this.controls.cursor.style.left = fraction + '%';
|
|
|
82
|
+ current = new Date(current * 1000);
|
|
|
83
|
+ current = current.toTimeString().substr(3, 6);
|
|
|
84
|
+ this.controls.currentTime.textContent = current;
|
|
|
85
|
+ }
|
|
|
86
|
+
|
|
|
87
|
+ this.seekPosition = function() {
|
|
|
88
|
+ var duration = evaplayer.current.duration;
|
|
|
89
|
+ var fraction = (event.offsetX / evaplayer.controls.bar.clientWidth) * 100;
|
|
|
90
|
+ var timeseeked = (duration * fraction) / 100;
|
|
|
91
|
+ evaplayer.YTplayer.seekTo(timeseeked);
|
|
|
92
|
+ };
|
|
|
93
|
+
|
|
|
94
|
+ this.setVolume = function() {
|
|
|
95
|
+ evaplayer.YTplayer.setVolume(event.target.value);
|
|
|
96
|
+ evaplayer.volume = event.target.value;
|
|
|
97
|
+ };
|
|
|
98
|
+
|
|
|
99
|
+ this.setMute = function() {
|
|
|
100
|
+ if (!evaplayer.isMute) {
|
|
|
101
|
+ evaplayer.YTplayer.mute();
|
|
|
102
|
+ evaplayer.controls.volume.value = 0;
|
|
|
103
|
+ evaplayer.controls.volumeMute.style.textDecoration = 'line-through';
|
|
|
104
|
+ } else {
|
|
|
105
|
+ evaplayer.YTplayer.unMute();
|
|
|
106
|
+ evaplayer.controls.volume.value = evaplayer.volume;
|
|
|
107
|
+ evaplayer.controls.volumeMute.style.textDecoration = 'none';
|
|
|
108
|
+ }
|
|
|
109
|
+ evaplayer.isMute = !evaplayer.isMute;
|
|
|
110
|
+ };
|
|
|
111
|
+
|
|
48
|
112
|
this.toggle = function() {
|
|
49
|
|
- if (evaplayer.isPlaying) {
|
|
|
113
|
+ if (evaplayer.isPlaying)
|
|
50
|
114
|
evaplayer.YTplayer.pauseVideo();
|
|
51
|
|
- } else {
|
|
|
115
|
+ else
|
|
52
|
116
|
evaplayer.YTplayer.playVideo();
|
|
53
|
|
- }
|
|
54
|
117
|
evaplayer.isPlaying = !evaplayer.isPlaying;
|
|
55
|
118
|
return evaplayer;
|
|
56
|
119
|
};
|
|
|
120
|
+
|
|
57
|
121
|
this.next = function() {
|
|
58
|
|
- return
|
|
|
122
|
+ evaplayer.currentSong++;
|
|
|
123
|
+ if (evaplayer.currentSong > evaplayer.playlist.length - 1)
|
|
|
124
|
+ evaplayer.currentSong = 0;
|
|
|
125
|
+ evaplayer.newSong(evaplayer.playlist[evaplayer.currentSong].link);
|
|
59
|
126
|
};
|
|
60
|
|
- this.previous = function() {};
|
|
61
|
|
- this.init();
|
|
62
|
|
-};
|
|
63
|
127
|
|
|
64
|
|
-function onYouTubeIframeAPIReady() {
|
|
65
|
|
- evaplayer.newSong('519_pOvP9xs');
|
|
66
|
|
-}
|
|
|
128
|
+ this.previous = function() {
|
|
|
129
|
+ evaplayer.currentSong--;
|
|
|
130
|
+ if (evaplayer.currentSong < 0)
|
|
|
131
|
+ evaplayer.currentSong = evaplayer.playlist.length - 1;
|
|
|
132
|
+ evaplayer.newSong(evaplayer.playlist[evaplayer.currentSong].link);
|
|
|
133
|
+ };
|
|
|
134
|
+
|
|
|
135
|
+ this.updateInfo = function() {
|
|
|
136
|
+ var data = this.YTplayer.getVideoData();
|
|
|
137
|
+ var duration = this.YTplayer.getDuration();
|
|
|
138
|
+ this.current = {
|
|
|
139
|
+ author: data.author,
|
|
|
140
|
+ title: data.title,
|
|
|
141
|
+ duration: duration
|
|
|
142
|
+ };
|
|
|
143
|
+ var title = this.current.title;
|
|
|
144
|
+ if (this.current.author)
|
|
|
145
|
+ title = this.current.author + ' - ' + title;
|
|
|
146
|
+ this.controls.title.textContent = title;
|
|
|
147
|
+ var duration = this.current.duration;
|
|
|
148
|
+ duration = new Date(duration * 1000);
|
|
|
149
|
+ duration = duration.toTimeString().substr(3, 6);
|
|
|
150
|
+ this.controls.duration.textContent = duration;
|
|
|
151
|
+ };
|
|
67
|
152
|
|
|
68
|
|
-function onPlayerReady(event) {
|
|
69
|
|
- event.target.playVideo();
|
|
70
|
|
-}
|
|
|
153
|
+ function onPlayerReady(event) {
|
|
|
154
|
+ event.target.playVideo();
|
|
|
155
|
+ if (!evaplayer.interval)
|
|
|
156
|
+ evaplayer.interval = setInterval(function() {
|
|
|
157
|
+ evaplayer.getState();
|
|
|
158
|
+ }, evaplayer.rate);
|
|
|
159
|
+ }
|
|
71
|
160
|
|
|
72
|
|
-function onPlayerStateChange(event) {
|
|
73
|
|
- if (event.data == YT.PlayerState.PLAYING && !evaplayer.isPlaying) {
|
|
74
|
|
- evaplayer.isPlaying = true;
|
|
|
161
|
+ function onPlayerStateChange(event) {
|
|
|
162
|
+ switch (event.data) {
|
|
|
163
|
+ case YT.PlayerState.PLAYING:
|
|
|
164
|
+ evaplayer.isPlaying = true;
|
|
|
165
|
+ evaplayer.updateInfo();
|
|
|
166
|
+ evaplayer.controls.toggle.textContent = '◻';
|
|
|
167
|
+ if (!evaplayer.interval)
|
|
|
168
|
+ evaplayer.interval = setInterval(function() {
|
|
|
169
|
+ evaplayer.getState();
|
|
|
170
|
+ }, evaplayer.rate);
|
|
|
171
|
+ break;
|
|
|
172
|
+ case YT.PlayerState.ENDED:
|
|
|
173
|
+ evaplayer.next();
|
|
|
174
|
+ break;
|
|
|
175
|
+ case YT.PlayerState.PAUSED:
|
|
|
176
|
+ evaplayer.isPlaying = false;
|
|
|
177
|
+ evaplayer.controls.toggle.textContent = '▻';
|
|
|
178
|
+ clearInterval(evaplayer.interval);
|
|
|
179
|
+ evaplayer.interval = null;
|
|
|
180
|
+ break;
|
|
|
181
|
+ }
|
|
75
|
182
|
}
|
|
|
183
|
+
|
|
|
184
|
+ this.init();
|
|
|
185
|
+};
|
|
|
186
|
+
|
|
|
187
|
+function onYouTubeIframeAPIReady() {
|
|
|
188
|
+ evaplayer.next();
|
|
76
|
189
|
}
|
Coldiary
5 år sedan