|
1 function IncPlayer() |
|
2 { |
|
3 // -------------------------------------------------------------------------------------------------------------------- |
|
4 // Members |
|
5 // -------------------------------------------------------------------------------------------------------------------- |
|
6 |
|
7 // Global |
|
8 this.initDone = false; |
|
9 this.playerIsReady = false; |
|
10 this.iOS = false; |
|
11 |
|
12 // Sequences |
|
13 this.allSequencesData = []; |
|
14 this.sequences = []; |
|
15 |
|
16 // Popcorn objects |
|
17 this.videoDivIdName = ""; |
|
18 this.videoExt = ""; |
|
19 this.preferOgg = true; // debug |
|
20 this.popSeq = null; |
|
21 |
|
22 // Controls |
|
23 this.playButton = null; |
|
24 //this.hd = true; |
|
25 this.hd = false; |
|
26 this.seekTime = 0.0; |
|
27 |
|
28 // Tools |
|
29 this.logiEnable = true; |
|
30 this.jsonData = []; |
|
31 |
|
32 // -------------------------------------------------------------------------------------------------------------------- |
|
33 // Functions |
|
34 // -------------------------------------------------------------------------------------------------------------------- |
|
35 |
|
36 this.init = function(videoDivIdName, playButton, jsonFile, preferOgg) |
|
37 { |
|
38 this.videoDivIdName = videoDivIdName; |
|
39 this.preferOgg = preferOgg; |
|
40 this.playButton = $(playButton).get(0); |
|
41 |
|
42 // Video extention |
|
43 this.videoExt = this.getSupportedVideoExt(); |
|
44 if (this.videoExt === "") { |
|
45 this.loge("your browser don't support HTML5 videos"); |
|
46 return false; |
|
47 } |
|
48 |
|
49 // Detect iOS |
|
50 this.detectIOS(); |
|
51 if (this.iOS) { |
|
52 this.logi("we are on iOS"); |
|
53 } |
|
54 |
|
55 // Load all sequences data |
|
56 this.allSequencesData = this.loadJson(jsonFile); |
|
57 this.logi("sequences in part1: " + (this.allSequencesData.part1 !== undefined ? this.allSequencesData.part1.length : 0)); |
|
58 this.logi("sequences in part2: " + (this.allSequencesData.part2 !== undefined ? this.allSequencesData.part2.length : 0)); |
|
59 this.logi("sequences in part3: " + (this.allSequencesData.part3 !== undefined ? this.allSequencesData.part3.length : 0)); |
|
60 |
|
61 this.initDone = true; |
|
62 return true; |
|
63 }; |
|
64 |
|
65 this.destroySequence = function() |
|
66 { |
|
67 if (this.popSeq !== null) { |
|
68 for (var i = 0; i < this.sequences.length; ++i) { |
|
69 this.popSeq.eq(i).destroy(); |
|
70 } |
|
71 this.sequences = []; |
|
72 this.popSeq.remove(); |
|
73 } |
|
74 }; |
|
75 |
|
76 this.createPopSequence = function() |
|
77 { |
|
78 if (!this.initDone) { |
|
79 this.loge("incplayer not initialized"); |
|
80 return; |
|
81 } |
|
82 |
|
83 // Delete previous popcorn objects |
|
84 this.destroySequence(); |
|
85 |
|
86 // Choose the 3 video |
|
87 this.choosePopSequence(); |
|
88 |
|
89 // And cerate the popcorn sequence |
|
90 this.initPopSequence(); |
|
91 }; |
|
92 |
|
93 this.choosePopSequence = function() |
|
94 { |
|
95 this.sequences = []; |
|
96 if (this.allSequencesData.part1 !== undefined && this.allSequencesData.part1.length) { |
|
97 this.sequences.push(this.allSequencesData.part1[this.random(0, this.allSequencesData.part1.length)]); |
|
98 } |
|
99 if (this.allSequencesData.part2 !== undefined && this.allSequencesData.part2.length) { |
|
100 this.sequences.push(this.allSequencesData.part2[this.random(0, this.allSequencesData.part2.length)]); |
|
101 } |
|
102 if (this.allSequencesData.part3 !== undefined && this.allSequencesData.part3.length) { |
|
103 this.sequences.push(this.allSequencesData.part3[this.random(0, this.allSequencesData.part3.length)]); |
|
104 } |
|
105 |
|
106 // Set the video file name |
|
107 var i; |
|
108 for (i = 0; i < this.sequences.length; ++i) { |
|
109 var file = this.sequences[i].src; |
|
110 |
|
111 // HD |
|
112 if(this.hd) { |
|
113 file += "hd"; |
|
114 } |
|
115 |
|
116 // Extention |
|
117 file += "." + this.videoExt; |
|
118 |
|
119 // Set the final file |
|
120 this.sequences[i].src = file; |
|
121 } |
|
122 |
|
123 this.logi("choosed sequences:"); |
|
124 for (i = 0; i < this.sequences.length; ++i) { |
|
125 this.logi(this.sequenceToString(i)); |
|
126 } |
|
127 |
|
128 // debug |
|
129 var message = $("#message"); |
|
130 if (message !== undefined && this.sequences.length > 0) { |
|
131 if (this.sequences[0].src.search("720") >= 0) { |
|
132 message.html("720"); |
|
133 } else if (this.sequences[0].src.search("480") >= 0) { |
|
134 message.html("480"); |
|
135 } else if (this.sequences[0].src.search("360") >= 0) { |
|
136 message.html("360"); |
|
137 } else { |
|
138 message.html("???"); |
|
139 } |
|
140 } |
|
141 |
|
142 }; |
|
143 |
|
144 this.initPopSequence = function() |
|
145 { |
|
146 var self = this; |
|
147 |
|
148 // Create the popcorn sequencer |
|
149 self.popSeq = Popcorn.sequence(self.videoDivIdName, self.sequences); |
|
150 |
|
151 for (var i = 0; i < self.sequences.length; ++i) { |
|
152 |
|
153 var pop = self.popSeq.eq(i); |
|
154 |
|
155 // Hide controls |
|
156 pop.controls(false); |
|
157 |
|
158 // Mute (debug) |
|
159 pop.mute(); |
|
160 |
|
161 self.listenEvent(pop, "playing", false, function() { |
|
162 self.displayPlayButton(false); |
|
163 self.logi("play sequence: " + self.sequenceToString(self.popSeq.active)); |
|
164 }); |
|
165 |
|
166 self.listenEvent(pop, "pause", false, function() { |
|
167 self.displayPlayButton(true); |
|
168 self.logi("pause sequence: " + self.sequenceToString(self.popSeq.active)); |
|
169 }); |
|
170 |
|
171 self.listenEvent(pop, "timeupdate", false, function() { |
|
172 if (!self.iOS) { |
|
173 //self.logi("current: " + self.getCurrentPop().currentTime()); |
|
174 } |
|
175 }); |
|
176 |
|
177 self.listenEvent(pop, "canplaythrough", true, function() { |
|
178 }); |
|
179 } |
|
180 |
|
181 self.popSeq.on("loadedmetadata", function() { |
|
182 |
|
183 self.playerIsReady = true; |
|
184 |
|
185 if (!self.iOS) { |
|
186 // Automatic play |
|
187 self.ctrlPlay(); |
|
188 |
|
189 if (self.seekTime !== 0.0) { |
|
190 self.popSeq.jumpTo(self.seekTime); |
|
191 self.seekTime = 0.0; |
|
192 } |
|
193 } |
|
194 |
|
195 // Unlisten event |
|
196 self.popSeq.off("loadedmetadata"); |
|
197 |
|
198 self.logi("the player is ready"); |
|
199 }); |
|
200 |
|
201 self.popSeq.on("cycle", function() { |
|
202 self.logi("CYCLE !"); |
|
203 }); |
|
204 }; |
|
205 |
|
206 this.listenEvent = function(pop, event, unlisten, func) |
|
207 { |
|
208 pop.on(event, function() { |
|
209 // Execute the function |
|
210 func(); |
|
211 |
|
212 if (unlisten) { |
|
213 // Unlisten event |
|
214 pop.off(event); |
|
215 } |
|
216 }); |
|
217 }; |
|
218 |
|
219 //this. |
|
220 |
|
221 this.getCurrentPop = function() |
|
222 { |
|
223 var index = this.popSeq.active; |
|
224 if (index >= this.sequences.length) { |
|
225 index = this.sequences.length-1; |
|
226 } |
|
227 return this.popSeq.eq(index); |
|
228 }; |
|
229 |
|
230 this.ctrlPlay = function() |
|
231 { |
|
232 if (!this.iOS && !this.playerIsReady) { |
|
233 // The video are not ready |
|
234 this.logi("can't play, the player is not ready"); |
|
235 return; |
|
236 } |
|
237 |
|
238 if (this.getCurrentPop().paused()) { |
|
239 // Play |
|
240 this.popSeq.play(); |
|
241 } else { |
|
242 // Pause |
|
243 this.popSeq.pause(); |
|
244 } |
|
245 }; |
|
246 |
|
247 this.ctrlForward = function() |
|
248 { |
|
249 if (!this.playerIsReady) { |
|
250 // The video are not ready |
|
251 this.logi("can't play, the player is not ready"); |
|
252 return; |
|
253 } |
|
254 |
|
255 // Seek 1 second forward |
|
256 this.popSeq.jumpTo(this.popSeq.currentTime() + 1); |
|
257 }; |
|
258 |
|
259 this.ctrlBackward = function() |
|
260 { |
|
261 if (!this.playerIsReady) { |
|
262 // The video are not ready |
|
263 this.logi("can't play, the player is not ready"); |
|
264 return; |
|
265 } |
|
266 |
|
267 // Seek 1 second backward |
|
268 this.popSeq.jumpTo(this.popSeq.currentTime() - 1); |
|
269 }; |
|
270 |
|
271 this.ctrlFullScreen = function() |
|
272 { |
|
273 if (!this.playerIsReady) { |
|
274 // The video are not ready |
|
275 this.logi("can't play, the player is not ready"); |
|
276 return; |
|
277 } |
|
278 |
|
279 this.logi("full screen"); |
|
280 }; |
|
281 |
|
282 this.ctrlHd = function() |
|
283 { |
|
284 if (!this.playerIsReady) { |
|
285 // The video are not ready |
|
286 this.logi("can't play, the player is not ready"); |
|
287 return; |
|
288 } |
|
289 |
|
290 this.seekTime = this.popSeq.currentTime(); |
|
291 this.hd = false; |
|
292 this.createPopSequence(); |
|
293 |
|
294 this.logi("hd"); |
|
295 }; |
|
296 |
|
297 this.displayPlayButton = function(playIcon) |
|
298 { |
|
299 if (playIcon) { |
|
300 // Controller display |
|
301 this.playButton.src = 'static/res/img/ctrlplayover.jpg'; |
|
302 this.playButton.onmouseover = function() {this.src='static/res/img/ctrlplayover.jpg';}; |
|
303 this.playButton.onmouseout = function() {this.src='static/res/img/ctrlplay.jpg';}; |
|
304 } else { |
|
305 // Controller display |
|
306 this.playButton.src = 'static/res/img/ctrlpauseover.jpg'; |
|
307 this.playButton.onmouseover = function() {this.src='static/res/img/ctrlpauseover.jpg';}; |
|
308 this.playButton.onmouseout = function() {this.src='static/res/img/ctrlpause.jpg';}; |
|
309 } |
|
310 }; |
|
311 |
|
312 // -------------------------------------------------------------------------------------------------------------------- |
|
313 // Tools Functions |
|
314 // -------------------------------------------------------------------------------------------------------------------- |
|
315 |
|
316 this.logi = function(txt) |
|
317 { |
|
318 if (this.logiEnable) { |
|
319 console.log("info: " + txt); |
|
320 } |
|
321 }; |
|
322 |
|
323 this.loge = function(txt) |
|
324 { |
|
325 console.log("error: " + txt); |
|
326 }; |
|
327 |
|
328 this.loadJson = function(jsonFile) |
|
329 { |
|
330 var txt = this.loadTxtFile(jsonFile); |
|
331 return JSON.parse(txt); |
|
332 }; |
|
333 |
|
334 this.loadTxtFile = function(jsonFile) |
|
335 { |
|
336 var xhr = new XMLHttpRequest(); |
|
337 xhr.open("GET", jsonFile, false); |
|
338 xhr.overrideMimeType('text/plain; charset=x-user-defined'); |
|
339 |
|
340 try { |
|
341 xhr.send(null); |
|
342 } catch(e) { |
|
343 return ""; |
|
344 } |
|
345 |
|
346 if (xhr.status == 404) { |
|
347 return ""; |
|
348 } |
|
349 |
|
350 var buffer; |
|
351 if (xhr.responseType == "arraybuffer") { |
|
352 buffer = xhr.response; |
|
353 } else if (xhr.mozResponseArrayBuffer === null) { |
|
354 buffer = xhr.mozResponseArrayBuffer; |
|
355 } else { |
|
356 buffer = xhr.response; |
|
357 } |
|
358 return buffer; |
|
359 }; |
|
360 |
|
361 this.random = function(min, max) |
|
362 { |
|
363 return Math.floor((Math.random()*(max-min))+min); |
|
364 }; |
|
365 |
|
366 this.sequenceToString = function(index) |
|
367 { |
|
368 return JSON.stringify(this.sequences[index]); |
|
369 }; |
|
370 |
|
371 this.getSupportedVideoExt = function() |
|
372 { |
|
373 var v = document.createElement("video"); |
|
374 |
|
375 if (v.canPlayType) { |
|
376 |
|
377 // Check for Ogg support |
|
378 if (this.preferOgg && v.canPlayType('video/ogg; codecs="theora"') !== "") { |
|
379 return "ogg"; |
|
380 } |
|
381 |
|
382 // Check for Webm support |
|
383 if (v.canPlayType('video/webm; codecs="vp8, vorbis"') !== "") { |
|
384 return "webm"; |
|
385 } |
|
386 |
|
387 // Check for MPEG-4 support |
|
388 if (v.canPlayType('video/mp4; codecs="mp4v.20.8"' ) !== "") { |
|
389 return "mp4"; |
|
390 } |
|
391 |
|
392 // Check for h264 support |
|
393 if ((v.canPlayType('video/mp4; codecs="avc1.42E01E"' ) !== "" || v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"'))) { |
|
394 return "mp4"; |
|
395 } |
|
396 } |
|
397 |
|
398 return ""; |
|
399 }; |
|
400 |
|
401 this.detectIOS = function() |
|
402 { |
|
403 var p = navigator.platform; |
|
404 if (p === 'iPad' || p === 'iPhone' || p === 'iPod') { |
|
405 this.iOS = true; |
|
406 } |
|
407 }; |
|
408 } |
|
409 |
|
410 var incPlayer = new IncPlayer(); |