5 // -------------------------------------------------------------------------------------------------------------------- |
5 // -------------------------------------------------------------------------------------------------------------------- |
6 |
6 |
7 // Global |
7 // Global |
8 this.initDone = false; |
8 this.initDone = false; |
9 this.playerIsReady = false; |
9 this.playerIsReady = false; |
10 this.iOS = false; |
10 this.playerWaitForBeingReady = false; // used on ipad |
|
11 this.mobile; |
|
12 this.ipad; |
|
13 this.nextPage; |
|
14 this.reloadPage; |
11 |
15 |
12 // Sequences |
16 // Sequences |
13 this.allSequencesData = []; |
17 this.allSequencesData = []; |
14 this.sequences = []; |
18 this.sequences = []; |
|
19 this.singleVideo; |
15 |
20 |
16 // Popcorn objects |
21 // Popcorn objects |
17 this.videoDivId = ""; |
22 this.videoDivId = ""; |
18 this.videoExt = ""; |
23 this.videoExt = ""; |
19 this.preferOgg = true; // debug |
|
20 this.popSeq = null; |
24 this.popSeq = null; |
21 |
25 |
22 // Controls |
26 // Controls |
23 this.playButton = null; |
27 this.playButton = null; |
|
28 this.hdSdButton = null |
24 this.progressCurrent = null; |
29 this.progressCurrent = null; |
25 this.progressDuration = null; |
30 this.progressDuration = null; |
26 this.hd = false; |
31 this.progressCursor = null; |
27 this.seekTime = 0.0; |
32 this.progressBar = null; |
|
33 this.progressCursorX = 0; |
|
34 this.progressCursorDrag; |
|
35 this.hd; |
|
36 this.seekTime = -1; |
28 |
37 |
29 // Tools |
38 // Tools |
30 this.logiEnable = true; |
39 this.logiEnable = true; |
31 this.jsonData = []; |
40 this.jsonData = []; |
32 |
41 |
33 // -------------------------------------------------------------------------------------------------------------------- |
42 // -------------------------------------------------------------------------------------------------------------------- |
34 // Functions |
43 // Functions |
35 // -------------------------------------------------------------------------------------------------------------------- |
44 // -------------------------------------------------------------------------------------------------------------------- |
36 |
45 |
37 this.init = function(videoDivId, playButtonId, progressCurrentId, progressDurationId, jsonFile, preferOgg) |
46 this.init = function(nextPage, videoDivId, playButtonId, hdSdButtonId, progressCurrentId, progressDurationId, progressCursorId, progressBarId, jsonFile) |
38 { |
47 { |
|
48 this.nextPage = nextPage; |
39 this.videoDivId = videoDivId; |
49 this.videoDivId = videoDivId; |
40 this.preferOgg = preferOgg; |
|
41 |
50 |
42 // Control |
51 // Control |
43 this.playButton = $("#" + playButtonId).get(0); |
52 this.playButton = $("#" + playButtonId).get(0); |
|
53 this.hdSdButton = $("#" + hdSdButtonId).get(0); |
44 this.progressCurrent = $("#" + progressCurrentId); |
54 this.progressCurrent = $("#" + progressCurrentId); |
45 this.progressDuration = $("#" + progressDurationId); |
55 this.progressDuration = $("#" + progressDurationId); |
|
56 this.progressCursor = $("#" + progressCursorId); |
|
57 this.progressBar = $("#" + progressBarId); |
|
58 this.ctrlSetCursorDragFunction(); |
|
59 this.setCursorPosition(0); |
|
60 |
|
61 // HD ? |
|
62 this.hd = incChoice.getHD(); |
|
63 $(this.hdSdButton).css({"background-position" : this.hd ? '0 -12px' : '0 0'}); |
46 |
64 |
47 // Video extention |
65 // Video extention |
48 this.videoExt = this.getSupportedVideoExt(); |
66 this.videoExt = this.getSupportedVideoExt(); |
49 if (this.videoExt === "") { |
67 if (this.videoExt === "") { |
50 this.loge("your browser don't support HTML5 videos"); |
68 this.loge("your browser don't support HTML5 videos"); |
51 return false; |
69 return false; |
52 } |
70 } |
53 |
71 |
54 // Detect iOS |
72 if (jsonFile !== null & jsonFile !== undefined) { |
55 this.detectIOS(); |
73 // Load all sequences data |
56 if (this.iOS) { |
74 this.allSequencesData = this.loadJson(jsonFile); |
57 this.logi("we are on iOS"); |
75 |
58 } |
76 // Add index to the videos |
59 |
77 for (var i = 0; i < this.allSequencesData.videos.length; ++i) { |
60 // Load all sequences data |
78 this.allSequencesData.videos[i].index = i; |
61 this.allSequencesData = this.loadJson(jsonFile); |
79 } |
|
80 } |
62 |
81 |
63 this.initDone = true; |
82 this.initDone = true; |
|
83 this.mobile = IsSmartphone(); |
|
84 this.ipad = !this.mobile && IsIpad(); |
|
85 |
64 return true; |
86 return true; |
65 }; |
87 }; |
66 |
88 |
67 this.destroySequence = function() |
89 this.destroySequence = function() |
68 { |
90 { |
73 this.sequences = []; |
95 this.sequences = []; |
74 this.popSeq.remove(); |
96 this.popSeq.remove(); |
75 } |
97 } |
76 }; |
98 }; |
77 |
99 |
78 this.createPopSequence = function(words) |
100 this.createPopSequence = function(words, videosIndex) |
79 { |
101 { |
80 if (!this.initDone) { |
102 if (!this.initDone) { |
81 this.loge("incplayer not initialized"); |
103 this.loge("incplayer not initialized"); |
82 return; |
104 return; |
83 } |
105 } |
84 |
106 |
85 // Delete previous popcorn objects |
107 // Delete previous popcorn objects |
86 this.destroySequence(); |
108 this.destroySequence(); |
87 |
109 |
88 // Choose the 3 video |
110 // Choose the 3 videos |
89 this.choosePopSequence(words); |
111 this.choosePopSequence(words, videosIndex); |
90 |
112 |
91 // And cerate the popcorn sequence |
113 // And init the popcorn sequence |
92 this.initPopSequence(); |
114 this.initPopSequence(); |
93 }; |
115 }; |
94 |
116 |
95 this.choosePopSequence = function(words) |
117 this.playSingleVideo = function(videoUrl) |
96 { |
118 { |
97 this.sequences = []; |
119 this.sequences = []; |
98 var videos = this.allSequencesData.videos; |
120 var video = { name : "xxx", src: videoUrl, in: 0, out: "1.44" }; |
99 |
121 this.sequences.push(video); |
100 // Choose first video |
122 this.formatPopSequence(); |
101 var v1 = this.getRandomVideos(words[0]); |
123 this.initPopSequence(); |
102 this.sequences.push(v1); |
124 this.singleVideo = true; |
103 |
125 } |
104 var v2, v3; |
126 |
105 |
127 this.choosePopSequence = function(wordsIndex, videosIndex) |
106 // Choose second video |
128 { |
107 do { |
129 this.sequences = []; |
108 v2 = this.getRandomVideos(words[1]) ; |
130 |
109 } while (v2.src == v1.src); |
131 if (videosIndex.length == 3) { |
110 this.sequences.push(v2); |
132 // The player got reloded, we use the previously choosen videos |
111 |
133 for (var i = 0; i < videosIndex.length; ++i) { |
112 // Choose third video |
134 this.sequences.push(this.allSequencesData.videos[videosIndex[i]]); |
113 do { |
135 } |
114 v3 = this.getRandomVideos(words[2]) ; |
136 } else { |
115 } while (v3.src == v1.src || v3.src == v2.src); |
137 // We choose new videos |
116 this.sequences.push(v3); |
138 |
117 |
139 // Get previous used videos |
|
140 var var32bits = incChoice.getChoosenVideosFlags(); |
|
141 |
|
142 // Choose videos according to the chosen words |
|
143 for (var i = 0; i < wordsIndex.length; ++i) { |
|
144 var v = this.getRandomVideos(wordsIndex[i], var32bits, this.sequences); |
|
145 if (v == null) { |
|
146 // We didn't find free video |
|
147 // So we mark some as unplayed, we must get flags again and retry |
|
148 var32bits = incChoice.getChoosenVideosFlags(); |
|
149 v = this.getRandomVideos(wordsIndex[i], var32bits, this.sequences); |
|
150 |
|
151 if (v == null) { |
|
152 this.loge("We didn't find a free video"); |
|
153 } |
|
154 } |
|
155 this.sequences.push(v); |
|
156 } |
|
157 |
|
158 // Save played videos with cookies |
|
159 this.savePlayedVideos(this.sequences, true); |
|
160 |
|
161 // Save chosen video with cookies |
|
162 this.saveChosenVideos(this.sequences); |
|
163 } |
|
164 |
|
165 // Format pop sequence |
|
166 this.formatPopSequence(); |
|
167 |
|
168 // Debug |
|
169 this.logi("choosed sequences:"); |
|
170 for (i = 0; i < this.sequences.length; ++i) { |
|
171 this.logi(this.sequenceToString(i)); |
|
172 } |
|
173 }; |
|
174 |
|
175 this.formatPopSequence = function() |
|
176 { |
118 // Set the video file name |
177 // Set the video file name |
119 var i; |
178 var i; |
120 for (i = 0; i < this.sequences.length; ++i) { |
179 for (i = 0; i < this.sequences.length; ++i) { |
121 var v = this.sequences[i]; |
180 var v = this.sequences[i]; |
122 |
181 |
123 // HD |
182 // HD |
124 if(this.hd) { |
183 if(!this.hd) { |
125 v.src += "hd"; |
184 v.src = v.src.replace("HD", "SD"); |
126 } |
185 } |
127 |
186 |
128 // Extention |
187 // Extention |
129 v.src += "." + /*this.videoExt*/ "mp4"; // todo |
188 v.src += "." + this.videoExt; |
130 |
189 |
131 // Set the final file |
190 // Set the final file |
132 this.sequences[i] = v; |
191 this.sequences[i] = v; |
133 } |
192 } |
134 |
193 |
135 for (i = 0; i < this.sequences.length; ++i) { |
194 for (i = 0; i < this.sequences.length; ++i) { |
|
195 |
|
196 // Get the sequence |
136 var seq = this.sequences[i]; |
197 var seq = this.sequences[i]; |
137 |
198 |
|
199 // Compute time in seconds |
138 var integer = Math.floor(seq.duration); |
200 var integer = Math.floor(seq.duration); |
139 var decimal = Math.floor((seq.duration - integer) * 100); |
201 var decimal = Math.floor((seq.duration - integer) * 100); |
140 var duration = integer * 60 + decimal; |
202 var duration = integer * 60 + decimal; |
141 |
203 |
142 this.sequences[i] = { src: seq.src, in: 0, out: duration }; |
204 this.sequences[i] = { src: seq.src, in: 0, out: duration }; |
143 } |
205 } |
|
206 } |
|
207 |
|
208 this.getRandomVideos = function(wordIndex, var32bits, otherVideos) |
|
209 { |
|
210 var i; |
|
211 var index = parseInt(wordIndex); |
|
212 var videos = []; |
|
213 var allVideosPlayed = true; |
|
214 var videosMatchWord = []; |
144 |
215 |
145 this.logi("choosed sequences:"); |
216 // Debug |
146 for (i = 0; i < this.sequences.length; ++i) { |
217 var freeVideosCount = 0; |
147 this.logi(this.sequenceToString(i)); |
218 var wordScoreAllVideos = 0; |
148 } |
219 |
149 }; |
220 // Get all videos affected by this word |
150 |
221 for (i = 0; i < this.allSequencesData.videos.length; ++i) { |
151 this.getRandomVideos = function(word) |
|
152 { |
|
153 var index = this.getWordIndex(word); |
|
154 var videos = []; |
|
155 |
|
156 // Get all video affected by this word |
|
157 for (var i = 0; i < this.allSequencesData.videos.length; ++i) { |
|
158 var video = this.allSequencesData.videos[i]; |
222 var video = this.allSequencesData.videos[i]; |
159 |
223 var wordScore = video.scoreWord[index]; |
160 // We push has many time the url that the score for the word |
224 |
161 for (var j = 0; j < video.scoreWord[index]; ++j) { |
225 if (wordScore <= 0) { |
|
226 // This video can't be choosen with this word |
|
227 continue; |
|
228 } |
|
229 |
|
230 videosMatchWord.push(video); // Debug |
|
231 |
|
232 video.choosen = incChoice.IsThisVideoWasPlayed(var32bits, video.index); |
|
233 if (video.choosen) { |
|
234 // This video was already played in an another session |
|
235 continue; |
|
236 } |
|
237 |
|
238 allVideosPlayed = false; |
|
239 |
|
240 // Compare categories |
|
241 video.samecat = false; |
|
242 for (var j = 0; j < otherVideos.length; ++j) { |
|
243 if (video.cat == otherVideos[j].cat) { |
|
244 video.samecat = true; |
|
245 break; |
|
246 } |
|
247 } |
|
248 if (video.samecat == true) { |
|
249 // This video have the same cat that an other selected video |
|
250 continue; |
|
251 } |
|
252 |
|
253 // We push has many time the video that the score for the word |
|
254 for (var j = 0; j < wordScore; ++j) { |
162 videos.push(video); |
255 videos.push(video); |
163 } |
256 } |
164 } |
257 |
165 |
258 // Debug |
166 return videos[this.random(0, videos.length)]; |
259 wordScoreAllVideos += wordScore; |
|
260 ++freeVideosCount; |
|
261 } |
|
262 |
|
263 if (allVideosPlayed || !videos.length) { |
|
264 // All the videos asociated with the word have been played |
|
265 // or there is no videos to choose because we skipped the one with the same cat |
|
266 // We must mark the videos asociated with the word as unplayed |
|
267 this.savePlayedVideos(videosMatchWord, false); |
|
268 return null; |
|
269 } |
|
270 |
|
271 // Choose random video |
|
272 var v = videos[this.random(0, videos.length)]; |
|
273 |
|
274 // Debug |
|
275 ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// |
|
276 |
|
277 this.logi("---------------------------------------------------------------------"); |
|
278 this.logi("The word " + this.allSequencesData.mots[index] + "(" + index + ")" +" give us " + videosMatchWord.length + " videos, we can choose " + freeVideosCount); |
|
279 this.logi("---------------------------------------------------------------------"); |
|
280 |
|
281 for (i = 0; i < videosMatchWord.length; ++i) { |
|
282 var video = videosMatchWord[i]; |
|
283 var message = this.resizeString(video.name, 15) + this.resizeString(" cat:" + video.cat, 15); |
|
284 if (video.choosen) { |
|
285 message += this.resizeString("played", 15); |
|
286 } else if (video.samecat) { |
|
287 message += this.resizeString("same cat", 15); |
|
288 } else { |
|
289 message += this.resizeString("OK", 15) + this.resizeString("proba:" + video.scoreWord[index] + "/" + wordScoreAllVideos, 15); |
|
290 } |
|
291 this.logi(message); |
|
292 } |
|
293 this.logi(""); |
|
294 this.logi("We choose " + v.name + "(" + v.index + ")" + " cat:" + v.cat + " proba: " + v.scoreWord[index] + "/" + wordScoreAllVideos + "\n\n"); |
|
295 |
|
296 return v; |
167 } |
297 } |
|
298 |
|
299 this.savePlayedVideos = function(videos, markPlayed) |
|
300 { |
|
301 var indexs = []; |
|
302 for (var i = 0; i < videos.length; ++i) { |
|
303 indexs.push(videos[i].index); |
|
304 } |
|
305 incChoice.savePlayedVideos(indexs, markPlayed); |
|
306 }; |
|
307 |
|
308 this.saveChosenVideos = function(videos) |
|
309 { |
|
310 var indexs = []; |
|
311 for (var i = 0; i < videos.length; ++i) { |
|
312 indexs.push(videos[i].index); |
|
313 } |
|
314 incChoice.saveChosenVideos(indexs); |
|
315 }; |
|
316 |
|
317 this.resizeString = function (str, size) |
|
318 { |
|
319 while (str.length < size) { |
|
320 str += " "; |
|
321 } |
|
322 return str; |
|
323 }; |
168 |
324 |
169 this.getWordIndex = function(word) |
325 this.getWordIndex = function(word) |
170 { |
326 { |
171 var words = this.allSequencesData.mots; |
327 var words = this.allSequencesData.mots; |
172 for (var i = 0; i < words.length; ++i) { |
328 for (var i = 0; i < words.length; ++i) { |
173 if (words[i] == word) { |
329 if (words[i] == word) { |
174 return i; |
330 return i; |
175 } |
331 } |
176 } |
332 } |
177 console.log("getWordIndex erreur"); |
333 this.loge("getWordIndex erreur"); |
178 return -1; |
334 return -1; |
|
335 }; |
|
336 |
|
337 this.debugDisplayWordsIndex = function() |
|
338 { |
|
339 var words = this.allSequencesData.mots; |
|
340 for (var i = 0; i < words.length; ++i) { |
|
341 this.logi(words[i] + " -> " + i); |
|
342 } |
179 }; |
343 }; |
180 |
344 |
181 this.initPopSequence = function() |
345 this.initPopSequence = function() |
182 { |
346 { |
183 var self = this; |
347 var self = this; |
190 var pop = self.popSeq.eq(i); |
354 var pop = self.popSeq.eq(i); |
191 |
355 |
192 // Hide controls |
356 // Hide controls |
193 pop.controls(false); |
357 pop.controls(false); |
194 |
358 |
195 self.listenEvent(pop, "playing", false, function() { |
359 // Play event |
|
360 self.listenEvent(pop, "playing", false, i, function(index) { |
196 self.displayPlayButton(false); |
361 self.displayPlayButton(false); |
197 self.logi("play sequence: " + self.sequenceToString(self.popSeq.active)); |
362 self.logi("play sequence: " + self.sequenceToString(self.popSeq.active)); |
198 }); |
363 }); |
199 |
364 |
200 self.listenEvent(pop, "pause", false, function() { |
365 // Pause event |
|
366 self.listenEvent(pop, "pause", false, i, function(index) { |
201 self.displayPlayButton(true); |
367 self.displayPlayButton(true); |
202 self.logi("pause sequence: " + self.sequenceToString(self.popSeq.active)); |
368 self.logi("pause sequence: " + self.sequenceToString(self.popSeq.active)); |
203 }); |
369 }); |
204 |
370 |
205 self.listenEvent(pop, "timeupdate", false, function() { |
371 // Ended event |
206 // Update the current time position |
372 self.listenEvent(pop, "ended", false, i, function(index) { |
|
373 self.logi("ended sequence: " + self.sequenceToString(self.popSeq.active)); |
|
374 }); |
|
375 |
|
376 // Timeupdate event |
|
377 self.listenEvent(pop, "timeupdate", false, i, function(index) { |
|
378 |
207 var currentTime = self.popSeq.currentTime(); |
379 var currentTime = self.popSeq.currentTime(); |
208 $(self.progressCurrent).html(self.secondsToTime(currentTime)); |
380 if (!self.progressCursorDrag) { |
209 |
381 // Move timeline and display the time |
210 // Detect vsquence end |
382 self.progressCursorX = self.setCursorPosition(currentTime); |
211 if (self.popSeq.active == 2 && currentTime >= self.popSeq.duration() - 2) { |
383 } |
|
384 |
|
385 // Detect the sequence end |
|
386 if (self.popSeq.active == self.sequences.length-1 && currentTime >= self.popSeq.duration() - 1) { |
212 setTimeout(function() { |
387 setTimeout(function() { |
213 location.href = "transition.html"; |
388 location.href = self.nextPage; |
214 }, 4000); |
389 }, 1500); |
215 |
|
216 } |
390 } |
217 }); |
391 }); |
218 |
392 |
219 self.listenEvent(pop, "canplaythrough", true, function() { |
393 /* |
|
394 // Canplaythrough event |
|
395 self.listenEvent(pop, "canplaythrough", true, i, function(index) { |
220 }); |
396 }); |
221 } |
397 */ |
222 |
398 } |
223 self.popSeq.on("loadedmetadata", function() { |
399 |
224 |
400 if (!this.ipad) { |
225 self.playerIsReady = true; |
401 self.popSeq.on("canplaythrough", function() { |
226 |
402 |
227 // todo |
403 self.playerIsReady = true; |
228 // Set total duration |
404 |
229 $(self.progressDuration).html(self.secondsToTime(self.popSeq.duration())); |
405 // Recompute Duration |
230 |
406 self.recomputeDuration(); |
231 if (!self.iOS) { |
407 |
232 // Automatic play |
408 // Automatic play |
233 self.ctrlPlay(); |
409 self.ctrlPlay(); |
234 } |
410 |
235 |
411 // Unlisten event |
236 // Unlisten event |
412 self.popSeq.off("canplaythrough"); |
237 self.popSeq.off("loadedmetadata"); |
413 self.logi("the player is ready"); |
238 self.logi("the player is ready"); |
414 }); |
239 }); |
415 } |
240 |
416 |
241 self.popSeq.on("cycle", function() { |
417 self.popSeq.on("cycle", function() { |
|
418 console.log("CYCLE"); |
242 }); |
419 }); |
243 |
420 |
244 self.popSeq.on("ended", function() { |
421 self.popSeq.on("ended", function() { |
245 }); |
422 }); |
246 |
423 |
247 }; |
424 }; |
248 |
425 |
249 this.listenEvent = function(pop, event, unlisten, func) |
426 this.listenEvent = function(pop, event, unlisten, index, func) |
250 { |
427 { |
251 pop.on(event, function() { |
428 pop.on(event, function() { |
252 // Execute the function |
429 // Execute the function |
253 func(); |
430 func(index); |
254 |
431 |
255 if (unlisten) { |
432 if (unlisten) { |
256 // Unlisten event |
433 // Unlisten event |
257 pop.off(event); |
434 pop.off(event); |
258 } |
435 } |
259 }); |
436 }); |
260 }; |
437 }; |
261 |
438 |
|
439 this.recomputeDuration = function() |
|
440 { |
|
441 // Recompute duration |
|
442 var totalDuration = 0; |
|
443 for (var j = 0; j < this.sequences.length; ++j) { |
|
444 var duration = this.popSeq.eq(j).duration(); |
|
445 |
|
446 // ofVideos |
|
447 this.popSeq.inOuts.ofVideos[j].out = duration; |
|
448 |
|
449 // ofClips |
|
450 this.popSeq.inOuts.ofClips[j].in = totalDuration; |
|
451 totalDuration += duration; |
|
452 this.popSeq.inOuts.ofClips[j].out = totalDuration; |
|
453 } |
|
454 |
|
455 // Set total duration |
|
456 $(this.progressDuration).html(this.secondsToTime(this.popSeq.duration())); |
|
457 }; |
|
458 |
|
459 this.recomputeDurationNoAutoPlay = function() |
|
460 { |
|
461 // Recompute duration |
|
462 var totalDuration = 0; |
|
463 for (var j = 0; j <= this.popSeq.active; ++j) { |
|
464 var duration = this.popSeq.eq(j).duration(); |
|
465 |
|
466 // ofVideos |
|
467 this.popSeq.inOuts.ofVideos[j].out = duration; |
|
468 |
|
469 // ofClips |
|
470 this.popSeq.inOuts.ofClips[j].in = totalDuration; |
|
471 totalDuration += duration; |
|
472 this.popSeq.inOuts.ofClips[j].out = totalDuration; |
|
473 } |
|
474 |
|
475 // Set total duration |
|
476 $(this.progressDuration).html(this.secondsToTime(this.popSeq.duration())); |
|
477 |
|
478 if (incHideBar !== undefined) { |
|
479 incHideBar.showBarPointerOnAction(6000); |
|
480 } |
|
481 }; |
|
482 |
262 this.getCurrentPop = function() |
483 this.getCurrentPop = function() |
263 { |
484 { |
264 var index = this.popSeq.active; |
485 var index = this.popSeq.active; |
265 if (index >= this.sequences.length) { |
486 if (index >= this.sequences.length) { |
266 index = this.sequences.length-1; |
487 index = this.sequences.length-1; |
267 } |
488 } |
268 return this.popSeq.eq(index); |
489 return this.popSeq.eq(index); |
269 }; |
490 }; |
270 |
491 |
|
492 this.setCursorPosition = function(time) |
|
493 { |
|
494 // Display time |
|
495 $(this.progressCurrent).html(this.secondsToTime(time)); |
|
496 |
|
497 // Move cursor timeline |
|
498 var progressCursorX = time ? ((time / this.popSeq.duration()) * (240 - 16)) : 0; |
|
499 $(this.progressCursor).css({"left" : progressCursorX }); |
|
500 $("#progress").css({"width" : progressCursorX + 8}); |
|
501 |
|
502 return progressCursorX; |
|
503 } |
|
504 |
|
505 this.forceCheckPlayerIsReady = function() |
|
506 { |
|
507 this.playerIsReady = false; |
|
508 this.playerWaitForBeingReady = false; |
|
509 this.checkPlayerIsReady(); |
|
510 } |
|
511 |
|
512 this.checkPlayerIsReady = function() |
|
513 { |
|
514 if (this.playerIsReady) { |
|
515 return true; |
|
516 } |
|
517 |
|
518 if (this.ipad) { |
|
519 |
|
520 // We "manualy" play the video (we are in a click event handler) |
|
521 var media = this.popSeq.eq(this.popSeq.active).media; |
|
522 media.play(); |
|
523 |
|
524 if (media.readystate === 4) { |
|
525 this.playerIsReady = true; |
|
526 this.recomputeDurationNoAutoPlay(); |
|
527 return false; // Ready but we don't want to do anything after |
|
528 } |
|
529 |
|
530 if (this.playerWaitForBeingReady) { |
|
531 return false; |
|
532 } |
|
533 |
|
534 this.playerWaitForBeingReady = true; |
|
535 |
|
536 var self = this; |
|
537 var mediaCanPlay = function () { |
|
538 // Remove event |
|
539 media.removeEventListener('canplaythrough', mediaCanPlay, false); |
|
540 media.removeEventListener('load', mediaCanPlay, false); |
|
541 |
|
542 // The video is ready, play |
|
543 media.play(); |
|
544 self.playerIsReady = true; |
|
545 self.recomputeDurationNoAutoPlay(); |
|
546 console.log("ipad play event"); |
|
547 } |
|
548 |
|
549 media.addEventListener('canplaythrough', mediaCanPlay, false); |
|
550 media.addEventListener('load', mediaCanPlay, false); |
|
551 |
|
552 setTimeout(function() { |
|
553 media.pause(); // Block play so it buffers before playing |
|
554 }, 1); |
|
555 } |
|
556 |
|
557 this.logi("can't play, the player is not ready"); |
|
558 return false; |
|
559 } |
|
560 |
|
561 this.ctrlSetCursorDragFunction = function() |
|
562 { |
|
563 var self = this; |
|
564 var origineX = null; |
|
565 var posX; |
|
566 var maxX = 240 - 16; |
|
567 |
|
568 var setCursorPositionX = function (x) { |
|
569 if (x < 0) { |
|
570 x = 0; |
|
571 } else if (x > maxX) { |
|
572 x = maxX; |
|
573 } |
|
574 var time = self.popSeq.duration() * x / maxX; |
|
575 self.setCursorPosition(time); |
|
576 return x; |
|
577 } |
|
578 |
|
579 var setCursorPosition = function (x) { |
|
580 self.progressCursorDrag = true; |
|
581 if (origineX == null) { |
|
582 origineX = x; |
|
583 } else { |
|
584 posX = self.progressCursorX + x - origineX; |
|
585 posX = setCursorPositionX(posX); |
|
586 } |
|
587 } |
|
588 |
|
589 this.progressCursor.on({ |
|
590 mousedown: function() { |
|
591 |
|
592 if (!self.checkPlayerIsReady()) { |
|
593 return; |
|
594 } |
|
595 |
|
596 $(document).on( |
|
597 self.ipad ? { |
|
598 touchmove: function (e) { |
|
599 e.preventDefault(); |
|
600 var touches = ( typeof( event.touches ) != "undefined" ) ? event.touches : event.changedTouches; |
|
601 setCursorPosition(touches[0].pageX); |
|
602 } |
|
603 } : { |
|
604 mousemove: function (e) { |
|
605 self.progressCursorDrag = true; |
|
606 setCursorPosition(e.pageX); |
|
607 } |
|
608 } |
|
609 ); |
|
610 } |
|
611 }); |
|
612 |
|
613 var progressBarX = $(self.progressBar).position().left; |
|
614 if (self.ipad) { |
|
615 this.progressBar.on({ |
|
616 touchdown: function(e) { |
|
617 if (!self.checkPlayerIsReady()) { |
|
618 return; |
|
619 } |
|
620 |
|
621 e.preventDefault(); |
|
622 var touches = ( typeof( event.touches ) != "undefined" ) ? event.touches : event.changedTouches; |
|
623 PosX = touches[0].pageX - progressBarX - 8; |
|
624 PosX = setCursorPositionX(PosX); |
|
625 |
|
626 // Seek time |
|
627 var jumpTime = self.popSeq.duration() * PosX / maxX; |
|
628 self.popSeq.jumpTo(jumpTime); |
|
629 } |
|
630 }); |
|
631 } else { |
|
632 this.progressBar.on({ |
|
633 mousedown: function(e) { |
|
634 if (!self.checkPlayerIsReady()) { |
|
635 return; |
|
636 } |
|
637 |
|
638 PosX = e.pageX - progressBarX - 8; |
|
639 PosX = setCursorPositionX(PosX); |
|
640 |
|
641 // Seek time |
|
642 var jumpTime = self.popSeq.duration() * PosX / maxX; |
|
643 self.popSeq.jumpTo(jumpTime); |
|
644 } |
|
645 }); |
|
646 } |
|
647 |
|
648 $(document).mouseup(function(){ |
|
649 if (self.progressCursorDrag) { |
|
650 self.progressCursorDrag = false; |
|
651 origineX = null; |
|
652 |
|
653 // Remove event |
|
654 $(document).off(self.ipad ? "touchmove" : "mousemove"); |
|
655 |
|
656 // Seek time |
|
657 var jumpTime = self.popSeq.duration() * posX / maxX; |
|
658 self.popSeq.jumpTo(jumpTime); |
|
659 } |
|
660 }); |
|
661 } |
|
662 |
271 this.ctrlPlay = function() |
663 this.ctrlPlay = function() |
272 { |
664 { |
273 if (!this.iOS && !this.playerIsReady) { |
665 if (!this.checkPlayerIsReady()) { |
274 // The video are not ready |
|
275 this.logi("can't play, the player is not ready"); |
|
276 return; |
666 return; |
277 } |
667 } |
278 |
668 |
279 if (this.getCurrentPop().paused()) { |
669 if (this.getCurrentPop().paused()) { |
280 // Play |
670 // Play |
285 } |
675 } |
286 }; |
676 }; |
287 |
677 |
288 this.ctrlNext = function() |
678 this.ctrlNext = function() |
289 { |
679 { |
290 if (!this.playerIsReady) { |
680 if (!this.checkPlayerIsReady()) { |
291 // The video are not ready |
|
292 this.logi("can't play, the player is not ready"); |
|
293 return; |
681 return; |
294 } |
682 } |
295 |
683 |
296 if (this.popSeq.active == this.sequences.length - 1) { |
684 if (this.popSeq.active == this.sequences.length - 1) { |
297 // We are at the last video |
685 // We are at the last video |
298 location.href = "transition.html"; |
686 location.href = this.nextPage; |
299 return; |
687 return; |
300 } |
688 } |
301 |
689 |
|
690 if (this.ipad) { |
|
691 this.playerIsReady = false; |
|
692 this.playerWaitForBeingReady = false; |
|
693 } |
|
694 |
302 // Go to the next video |
695 // Go to the next video |
303 var jumpTime = this.popSeq.durationSeqs(this.popSeq.active + 1); |
696 var jumpTime = this.popSeq.durationSeqs(this.popSeq.active + 1) + 0.001; |
304 this.popSeq.jumpTo(jumpTime); |
697 this.popSeq.jumpTo(jumpTime); |
305 }; |
698 }; |
306 |
699 |
307 this.ctrlPrev = function() |
700 this.ctrlPrev = function() |
308 { |
701 { |
309 if (!this.playerIsReady) { |
702 if (!this.checkPlayerIsReady()) { |
310 // The video are not ready |
|
311 this.logi("can't play, the player is not ready"); |
|
312 return; |
703 return; |
313 } |
704 } |
314 |
705 |
315 var videoIndex = this.popSeq.active; |
706 var videoIndex = this.popSeq.active; |
316 if (videoIndex !== 0) { |
707 if (videoIndex === 0) { |
317 // If we are a less than 1 sec from the sequence start, we just to the prev sequence |
708 // We jump to the start |
|
709 this.popSeq.jumpTo(0); |
|
710 } else { |
|
711 |
|
712 // If we are a less than 1 sec from the sequence start, we jump to the prev sequence |
318 // else we jump to the start of the current sequence |
713 // else we jump to the start of the current sequence |
319 var jumpTimeStartCurrent = this.popSeq.durationSeqs(videoIndex); |
714 var jumpTime = this.popSeq.durationSeqs(videoIndex); |
320 if (this.popSeq.currentTime() - jumpTimeStartCurrent < 1) { |
715 if (this.popSeq.currentTime() - jumpTime < 1) { |
321 --videoIndex; |
716 jumpTime = this.popSeq.durationSeqs(videoIndex-1); |
322 } |
717 } |
323 } |
718 this.popSeq.jumpTo(jumpTime + 0.001); |
324 |
719 } |
325 // Go to the next video |
|
326 var jumpTime = this.popSeq.durationSeqs(videoIndex); |
|
327 this.popSeq.jumpTo(jumpTime); |
|
328 }; |
|
329 |
|
330 this.ctrlFullScreen = function() |
|
331 { |
|
332 if (!this.playerIsReady) { |
|
333 // The video are not ready |
|
334 this.logi("can't play, the player is not ready"); |
|
335 return; |
|
336 } |
|
337 |
|
338 this.logi("full screen"); |
|
339 }; |
720 }; |
340 |
721 |
341 this.ctrlHd = function() |
722 this.ctrlHdSd = function() |
342 { |
723 { |
343 if (!this.playerIsReady) { |
724 // We swape between hd/sd |
344 // The video are not ready |
725 incChoice.setHD(this.hd ? 0 : 1); |
345 this.logi("can't play, the player is not ready"); |
726 |
346 return; |
727 // We record the current time |
347 } |
728 |
348 |
729 // Reload |
349 this.seekTime = this.popSeq.currentTime(); |
730 location.href = document.URL; |
350 this.hd = false; |
|
351 this.createPopSequence(); |
|
352 |
|
353 this.logi("hd"); |
|
354 }; |
731 }; |
355 |
732 |
356 this.displayPlayButton = function(playIcon) |
733 this.displayPlayButton = function(playIcon) |
357 { |
734 { |
358 /* |
735 $(this.playButton).css({"background-position" : playIcon ? '-77px 0' : '-77px -17px'}); |
359 if (playIcon) { |
|
360 // Controller display |
|
361 this.playButton.src = 'static/res/img/ctrlplayover.jpg'; |
|
362 this.playButton.onmouseover = function() {this.src='static/res/img/ctrlplayover.jpg';}; |
|
363 this.playButton.onmouseout = function() {this.src='static/res/img/ctrlplay.jpg';}; |
|
364 } else { |
|
365 // Controller display |
|
366 this.playButton.src = 'static/res/img/ctrlpauseover.jpg'; |
|
367 this.playButton.onmouseover = function() {this.src='static/res/img/ctrlpauseover.jpg';}; |
|
368 this.playButton.onmouseout = function() {this.src='static/res/img/ctrlpause.jpg';}; |
|
369 } |
|
370 */ |
|
371 }; |
736 }; |
372 |
737 |
373 // -------------------------------------------------------------------------------------------------------------------- |
738 // -------------------------------------------------------------------------------------------------------------------- |
374 // Tools Functions |
739 // Tools Functions |
375 // -------------------------------------------------------------------------------------------------------------------- |
740 // -------------------------------------------------------------------------------------------------------------------- |