|
1 /* |
|
2 * |
|
3 * Copyright 2010 Institut de recherche et d'innovation |
|
4 * contributor(s) : Samuel Huron |
|
5 * |
|
6 * contact@iri.centrepompidou.fr |
|
7 * http://www.iri.centrepompidou.fr |
|
8 * |
|
9 * This software is a computer program whose purpose is to show and add annotations on a video . |
|
10 * This software is governed by the CeCILL-C license under French law and |
|
11 * abiding by the rules of distribution of free software. You can use, |
|
12 * modify and/ or redistribute the software under the terms of the CeCILL-C |
|
13 * license as circulated by CEA, CNRS and INRIA at the following URL |
|
14 * "http://www.cecill.info". |
|
15 * |
|
16 * The fact that you are presently reading this means that you have had |
|
17 * knowledge of the CeCILL-C license and that you accept its terms. |
|
18 */ |
|
19 |
|
20 if(window.__IriSP === undefined ){ var __IriSP={};} |
|
21 |
|
22 |
|
23 // vimeo |
|
24 /* |
|
25 |
|
26 var flashvars = { |
|
27 clip_id: video_id, |
|
28 show_portrait: 1, |
|
29 show_byline: 1, |
|
30 show_title: 1, |
|
31 js_api: 1, // required in order to use the Javascript API |
|
32 js_onLoad: 'vimeo_player_loaded', // moogaloop will call this JS function when it's done loading (optional) |
|
33 js_swf_id: 'moogaloop' // this will be passed into all event methods so you can keep track of multiple moogaloops (optional) |
|
34 }; |
|
35 |
|
36 var flashvars = { |
|
37 clip_id: video_id, |
|
38 show_portrait: 1, |
|
39 show_byline: 1, |
|
40 show_title: 1, |
|
41 |
|
42 }; |
|
43 |
|
44 */ |
|
45 |
|
46 // Player Configuration |
|
47 __IriSP.config = undefined; |
|
48 __IriSP.configDefault = { |
|
49 metadata:{ |
|
50 format:'cinelab', |
|
51 src:'http://exp.iri.centrepompidou.fr/franceculture/franceculture/ldt/cljson/id/ef4dcc2e-8d3b-11df-8a24-00145ea4a2be', |
|
52 load:'jsonp' |
|
53 }, |
|
54 gui:{ |
|
55 width:650, |
|
56 height:0, |
|
57 mode:'radio', |
|
58 container:'LdtPlayer', |
|
59 debug:false, |
|
60 css:'../src/css/LdtPlayer.css' |
|
61 }, |
|
62 player:{ |
|
63 type:'jwplayer', |
|
64 src:'../res/swf/player.swf', |
|
65 params:{ |
|
66 allowfullscreen:"true", |
|
67 allowscriptaccess:"always", |
|
68 wmode:"transparent" |
|
69 }, |
|
70 flashvars:{ |
|
71 streamer:"streamer", |
|
72 file:"file", |
|
73 live:"true", |
|
74 autostart:"true", |
|
75 controlbar:"none", |
|
76 playerready:"__IriSP.playerReady", |
|
77 // Vimeo |
|
78 js_api: 1, |
|
79 js_onLoad:"__IriSP.playerReady", |
|
80 js_swf_id:"Ldtplayer1", |
|
81 show_title: 0, |
|
82 clip_id: "video_id", |
|
83 show_portrait: 1, |
|
84 show_byline: 0 |
|
85 |
|
86 }, |
|
87 attributes:{ |
|
88 id:"Ldtplayer1", |
|
89 name:"Ldtplayer1" |
|
90 } |
|
91 }, |
|
92 module:null |
|
93 }; |
|
94 |
|
95 __IriSP.lib = { |
|
96 jQuery:"http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js", |
|
97 jQueryUI:"http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.min.js", |
|
98 jQueryToolTip:"http://cdn.jquerytools.org/1.2.4/all/jquery.tools.min.js", |
|
99 swfObject:"http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js", |
|
100 cssjQueryUI:"http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/base/jquery-ui.css" |
|
101 }; |
|
102 |
|
103 // Player Variable |
|
104 __IriSP.LdtShareTool = ""+ |
|
105 "\n<a onclick=\"__IriSP.MyApiPlayer.share('delicious');\" title='partager avec delicious'><span class='share shareDelicious'> </span></a>"+ |
|
106 "\n<a onclick=\"__IriSP.MyApiPlayer.share('facebook');\" title='partager avec facebook'> <span class='share shareFacebook'> </span></a>"+ |
|
107 "\n<a onclick=\"__IriSP.MyApiPlayer.share('twitter');\" title='partager avec twitter'> <span class='share shareTwitter'> </span></a>"+ |
|
108 "\n<a onclick=\"__IriSP.MyApiPlayer.share('myspace');\" title='partager avec Myspace'> <span class='share shareMySpace'> </span></a>"; |
|
109 |
|
110 // Official instance - to refactor ? |
|
111 __IriSP.MyLdt = null; |
|
112 __IriSP.MyTags = null; |
|
113 __IriSP.MyApiPlayer = null; |
|
114 __IriSP.player = null; |
|
115 |
|
116 // genral var (old code) - to refactor |
|
117 __IriSP.Durration = null; |
|
118 __IriSP.playerLdtWidth = null; |
|
119 __IriSP.playerLdtHeight = null; |
|
120 |
|
121 |
|
122 |
|
123 |
|
124 |
|
125 __IriSP.init = function (config){ |
|
126 |
|
127 |
|
128 if(config === null){ |
|
129 |
|
130 __IriSP.config = __IriSP.configDefault; |
|
131 |
|
132 } else { |
|
133 |
|
134 __IriSP.config = config; |
|
135 |
|
136 |
|
137 |
|
138 if (__IriSP.config.player.params == null){ |
|
139 __IriSP.config.player.params = __IriSP.configDefault.player.params;} |
|
140 |
|
141 if (__IriSP.config.player.flashvars == null){ |
|
142 __IriSP.config.player.flashvars = __IriSP.configDefault.player.flashvars;} |
|
143 if (__IriSP.config.player.attributes == null){ |
|
144 __IriSP.config.player.attributes = __IriSP.configDefault.player.attributes;} |
|
145 } |
|
146 |
|
147 var metadataSrc = __IriSP.config.metadata.src; |
|
148 var guiContainer = __IriSP.config.gui.container; |
|
149 var guiMode = __IriSP.config.gui.mode; |
|
150 var guiLdtShareTool = __IriSP.LdtShareTool; |
|
151 // Localize jQuery variable |
|
152 __IriSP.jQuery = null; |
|
153 |
|
154 /******** Load jQuery if not present *********/ |
|
155 if (window.jQuery === undefined || window.jQuery.fn.jquery !== '1.4.2') { |
|
156 var script_tag = document.createElement('script'); |
|
157 script_tag.setAttribute("type","text/javascript"); |
|
158 script_tag.setAttribute("src",__IriSP.lib.jQuery); |
|
159 //"http://cdn.jquerytools.org/1.2.4/full/jquery.tools.min.js"); |
|
160 script_tag.onload = scriptLibHandler; |
|
161 script_tag.onreadystatechange = function () { // Same thing but for IE |
|
162 if (this.readyState == 'complete' || this.readyState == 'loaded') { |
|
163 scriptLibHandler(); |
|
164 |
|
165 } |
|
166 }; |
|
167 // Try to find the head, otherwise default to the documentElement |
|
168 (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag); |
|
169 } else { |
|
170 // The jQuery version on the window is the one we want to use |
|
171 __IriSP.jQuery = window.jQuery; |
|
172 scriptLibHandler(); |
|
173 } |
|
174 |
|
175 /******** Called once jQuery has loaded ******/ |
|
176 function scriptLibHandler() { |
|
177 |
|
178 var script_jqUi_tooltip = document.createElement('script'); |
|
179 script_jqUi_tooltip.setAttribute("type","text/javascript"); |
|
180 script_jqUi_tooltip.setAttribute("src",__IriSP.lib.jQueryToolTip); |
|
181 script_jqUi_tooltip.onload = scriptLoadHandler; |
|
182 script_jqUi_tooltip.onreadystatechange = function () { // Same thing but for IE |
|
183 if (this.readyState == 'complete' || this.readyState == 'loaded') { |
|
184 scriptLoadHandler("jquery.tools.min.js loded"); |
|
185 } |
|
186 }; |
|
187 |
|
188 var script_swfObj = document.createElement('script'); |
|
189 script_swfObj.setAttribute("type","text/javascript"); |
|
190 script_swfObj.setAttribute("src",__IriSP.lib.swfObject); |
|
191 script_swfObj.onload = scriptLoadHandler; |
|
192 script_swfObj.onreadystatechange = function () { // Same thing but for IE |
|
193 if (this.readyState == 'complete' || this.readyState == 'loaded') { |
|
194 scriptLoadHandler("swfobject.js loded"); |
|
195 } |
|
196 }; |
|
197 |
|
198 var script_jqUi = document.createElement('script'); |
|
199 script_jqUi.setAttribute("type","text/javascript"); |
|
200 script_jqUi.setAttribute("src",__IriSP.lib.jQueryUI); |
|
201 script_jqUi.onload = scriptLoadHandler; |
|
202 script_jqUi.onreadystatechange = function () { // Same thing but for IE |
|
203 if (this.readyState == 'complete' || this.readyState == 'loaded') { |
|
204 scriptLoadHandler("jquery-ui.min.js loded"); |
|
205 } |
|
206 }; |
|
207 |
|
208 |
|
209 |
|
210 |
|
211 (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_jqUi_tooltip); |
|
212 (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_jqUi); |
|
213 (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_swfObj); |
|
214 |
|
215 |
|
216 }; |
|
217 |
|
218 /******** Called once all lib are loaded ******/ |
|
219 var loadLib = 0; |
|
220 function scriptLoadHandler(Mylib) { |
|
221 //alert(Mylib); |
|
222 loadLib +=1; |
|
223 if(loadLib===3){ |
|
224 main(); |
|
225 }else { |
|
226 // __IriSP.jQuery('#'+__IriSP.config.gui.container).html("Loading library ..."); |
|
227 } |
|
228 }; |
|
229 |
|
230 /******** Our main function ********/ |
|
231 function main() { |
|
232 |
|
233 |
|
234 // Make __IriSP.jQuery and restore window.jQuery |
|
235 __IriSP.jQuery = window.jQuery.noConflict(true); |
|
236 // Call MY Jquery |
|
237 __IriSP.jQuery(document).ready(function($) { |
|
238 |
|
239 /******* Load CSS *******/ |
|
240 var css_link_jquery = __IriSP.jQuery("<link>", { |
|
241 rel: "stylesheet", |
|
242 type: "text/css", |
|
243 href: __IriSP.lib.cssjQueryUI, |
|
244 'class': "dynamic_css" |
|
245 }); |
|
246 var css_link_custom = __IriSP.jQuery("<link>", { |
|
247 rel: "stylesheet", |
|
248 type: "text/css", |
|
249 href: __IriSP.config.gui.css, |
|
250 'class': "dynamic_css" |
|
251 }); |
|
252 |
|
253 css_link_jquery.appendTo('head'); |
|
254 css_link_custom.appendTo('head'); |
|
255 |
|
256 // to see dynamicly loaded css on IE |
|
257 if ($.browser.msie) { |
|
258 $('.dynamic_css').clone().appendTo('head'); |
|
259 } |
|
260 |
|
261 //__IriSP.trace("main","ready createMyHtml"); |
|
262 |
|
263 __IriSP.createMyHtml(); |
|
264 //__IriSP.trace("main","end createMyHtml"); |
|
265 |
|
266 /******* Load Metadata *******/ |
|
267 |
|
268 __IriSP.jQuery.ajax({ |
|
269 dataType: __IriSP.config.metadata.load, |
|
270 url:metadataSrc, |
|
271 success : function(json){ |
|
272 |
|
273 __IriSP.trace("ajax","success"); |
|
274 |
|
275 // START PARSING ----------------------- |
|
276 if(json === ""){ |
|
277 alert("ERREUR DE CHARGEMENT JSON"); |
|
278 } else { |
|
279 |
|
280 |
|
281 // # CREATE MEDIA // |
|
282 // # JUSTE ONE PLAYER FOR THE MOMENT // |
|
283 //__IriSP.jQuery("<div></div>").appendTo("#output"); |
|
284 var MyMedia = new __IriSP.Media( |
|
285 json.medias[0].id, |
|
286 json.medias[0].href, |
|
287 json.medias[0]['meta']['dc:duration'], |
|
288 json.medias[0]['dc:title'], |
|
289 json.medias[0]['dc:description']); |
|
290 |
|
291 __IriSP.trace("__IriSP.MyApiPlayer", |
|
292 __IriSP.config.gui.width+" " |
|
293 + __IriSP.config.gui.height + " " |
|
294 + json.medias[0].href + " " |
|
295 + json.medias[0]['meta']['dc:duration'] + " " |
|
296 + json.medias[0]['meta']['item']['value']); |
|
297 |
|
298 // Create APIplayer |
|
299 __IriSP.MyApiPlayer = new __IriSP.APIplayer( |
|
300 __IriSP.config.gui.width, |
|
301 __IriSP.config.gui.height, |
|
302 json.medias[0].href, |
|
303 json.medias[0]['meta']['dc:duration'], |
|
304 json.medias[0]['meta']['item']['value']); |
|
305 |
|
306 // # CREATE THE FIRST LINE // |
|
307 __IriSP.trace("__IriSP.init.main","__IriSP.Ligne"); |
|
308 __IriSP.MyLdt = new __IriSP.Ligne ( |
|
309 json['annotation-types'][0].id, |
|
310 json['annotation-types'][0]['dc:title'], |
|
311 json['annotation-types'][0]['dc:description'], |
|
312 json.medias[0]['meta']['dc:duration']); |
|
313 |
|
314 // CREATE THE TAG CLOUD // |
|
315 __IriSP.trace("__IriSP.init.main","__IriSP.Tags"); |
|
316 __IriSP.MyTags = new __IriSP.Tags (json.tags); |
|
317 |
|
318 // CREATE THE ANNOTATIONS // |
|
319 // JUSTE FOR THE FIRST TYPE // |
|
320 __IriSP.jQuery.each(json.annotations, function(i,item) { |
|
321 if (item.meta['id-ref'] == __IriSP.MyLdt.id) { |
|
322 //__IriSP.trace("__IriSP.init.main","__IriSP.MyLdt.addAnnotation"); |
|
323 __IriSP.MyLdt.addAnnotation( |
|
324 item.id, |
|
325 item.begin, |
|
326 item.end, |
|
327 item.media, |
|
328 item.content.title, |
|
329 item.content.description, |
|
330 item.content.color, |
|
331 item.tags); |
|
332 } |
|
333 //MyTags.addAnnotation(item); |
|
334 }); |
|
335 __IriSP.jQuery.each(json.lists, function(i,item) { |
|
336 __IriSP.trace("lists",""); |
|
337 }); |
|
338 __IriSP.jQuery.each(json.views, function(i,item) { |
|
339 __IriSP.trace("views",""); |
|
340 }); |
|
341 } |
|
342 // END PARSING ----------------------- // |
|
343 |
|
344 |
|
345 },error : function(data){ |
|
346 alert("ERROR : "+data); |
|
347 } |
|
348 }); |
|
349 |
|
350 |
|
351 }); |
|
352 } |
|
353 |
|
354 }; |
|
355 |
|
356 |
|
357 __IriSP.createMyHtml = function(){ |
|
358 var width = __IriSP.config.gui.width; |
|
359 |
|
360 // AUDIO */ |
|
361 // PB dans le html : ; |
|
362 if(__IriSP.config.gui.mode=="radio"){ |
|
363 __IriSP.jQuery( "<div id='Ldt-Root'>\n"+ |
|
364 " <div id='Ldt-PlaceHolder'>\n"+ |
|
365 " <a href='http://www.adobe.com/go/getflashplayer'>Get flash</a> to see this player \n"+ |
|
366 " </div>\n"+ |
|
367 " <div id='Ldt-controler' class='demo'>\n"+ |
|
368 " <div class='Ldt-Control1' >\n"+ |
|
369 " <button id='ldt-CtrlPlay' onclick='__IriSP.MyApiPlayer.play()'>Lecture / Pause </button>\n"+ |
|
370 " <button id='ldt-CtrlNext' onclick='__IriSP.MyLdt.nextAnnotation()'>Suivant</button>\n"+ |
|
371 " </div>\n"+ |
|
372 " <div id='Ldt-Annotations' class='ui-slider'>\n"+ |
|
373 " <div id='slider-range-min'></div>\n"+ |
|
374 " </div>\n"+ |
|
375 " <div class='Ldt-Control2'>\n"+ |
|
376 " <button id='ldt-CtrlLink'> Partager </button>\n"+ |
|
377 " <button id='ldt-CtrlSound' onclick='__IriSP.MyApiPlayer.mute()'>Sound</button>\n"+ |
|
378 " </div>\n"+ |
|
379 " <div class='cleaner'> \;</div> \n"+ |
|
380 " <div id='Ldt-Show-Arrow-container'>\n"+ |
|
381 " <div id='Ldt-Show-Arrow'> </div>\n"+ |
|
382 " </div>\n"+ |
|
383 "</div>\n"+ |
|
384 "<div>\n"+ |
|
385 " <div id='ldt-Show'> </div>\n"+ |
|
386 " <div id='Ldt-ShowAnnotation-audio' class='demo' >\n"+ |
|
387 " <div id='Ldt-SaTitle'></div>\n"+ |
|
388 " <div id='Ldt-SaDescription'></div>\n"+ |
|
389 " <div class='cleaner'><!-- \;--></div>\n"+ |
|
390 " </div>\n"+ |
|
391 " <div id='Ldt-SaKeyword'>\n"+ |
|
392 " <div id='Ldt-SaKeywordText'> </div>\n"+ |
|
393 " <div class='cleaner'></div>\n"+ |
|
394 " <div id='Ldt-SaShareTools'>\n"+ |
|
395 " \n"+ |
|
396 " "+__IriSP.LdtShareTool+"\n"+ |
|
397 " \n"+ |
|
398 " </div>\n"+ |
|
399 " <div class='cleaner'></div>"+ |
|
400 "</div> "+ |
|
401 //"<div id='Ldt-Tags'> Mots clefs : </div>"+ |
|
402 "</div>"+ |
|
403 "<div id='Ldt-output'></div>").appendTo("#"+__IriSP.config.gui.container); |
|
404 } else if(__IriSP.config.gui.mode=="video") { |
|
405 |
|
406 __IriSP.jQuery( "<div id='Ldt-Root'>\n"+ |
|
407 " <div id='Ldt-PlaceHolder'>\n"+ |
|
408 " <a href='http://www.adobe.com/go/getflashplayer'>Get flash</a> to see this player \n"+ |
|
409 " </div>\n"+ |
|
410 " <div id='Ldt-controler' class='demo'>\n"+ |
|
411 " <div class='Ldt-Control1' >\n"+ |
|
412 " <button id='ldt-CtrlPlay' onclick='__IriSP.MyApiPlayer.play()'>Lecture / Pause </button>\n"+ |
|
413 " <button id='ldt-CtrlNext' onclick='__IriSP.MyLdt.nextAnnotation()'>Suivant</button>\n"+ |
|
414 " </div>\n"+ |
|
415 " <div id='Ldt-Annotations' class='ui-slider'>\n"+ |
|
416 " <div id='slider-range-min'></div>\n"+ |
|
417 " </div>\n"+ |
|
418 " <div class='Ldt-Control2'>\n"+ |
|
419 " <button id='ldt-CtrlLink'> Partager </button>\n"+ |
|
420 " <button id='ldt-CtrlSound' onclick='__IriSP.MyApiPlayer.mute()'>Sound</button>\n"+ |
|
421 " </div>\n"+ |
|
422 " <div class='cleaner'> \;</div> \n"+ |
|
423 " <div id='Ldt-Show-Arrow-container'>\n"+ |
|
424 " <div id='Ldt-Show-Arrow'> </div>\n"+ |
|
425 " </div>\n"+ |
|
426 "</div>\n"+ |
|
427 "<div>\n"+ |
|
428 " <div id='ldt-Show'> </div>\n"+ |
|
429 " <div id='Ldt-ShowAnnotation-audio' class='demo' >\n"+ |
|
430 " <div id='Ldt-SaTitle'></div>\n"+ |
|
431 " <div id='Ldt-SaDescription'></div>\n"+ |
|
432 " <div class='cleaner'><!-- \;--></div>\n"+ |
|
433 " </div>\n"+ |
|
434 " <div id='Ldt-SaKeyword'>\n"+ |
|
435 " <div id='Ldt-SaKeywordText'> </div>\n"+ |
|
436 " <div class='cleaner'></div>\n"+ |
|
437 " <div id='Ldt-SaShareTools'>\n"+ |
|
438 " \n"+ |
|
439 " "+__IriSP.LdtShareTool+"\n"+ |
|
440 " \n"+ |
|
441 " </div>\n"+ |
|
442 " <div class='cleaner'></div>"+ |
|
443 "</div> "+ |
|
444 //"<div id='Ldt-Tags'> Mots clefs : </div>"+ |
|
445 "</div>"+ |
|
446 "<div id='Ldt-output'></div>").appendTo("#"+__IriSP.config.gui.container); |
|
447 |
|
448 } |
|
449 |
|
450 |
|
451 __IriSP.trace("__IriSP.createHtml","end"); |
|
452 __IriSP.jQuery("#Ldt-Annotations").width(width-(75*2)); |
|
453 __IriSP.jQuery("#Ldt-Show-Arrow-container").width(width-(75*2)); |
|
454 __IriSP.jQuery("#Ldt-ShowAnnotation-audio").width(width-10); |
|
455 __IriSP.jQuery("#Ldt-ShowAnnotation-video").width(width-10); |
|
456 __IriSP.jQuery("#Ldt-SaKeyword").width(width-10); |
|
457 __IriSP.jQuery("#Ldt-controler").width(width-10); |
|
458 __IriSP.jQuery("#Ldt-Control").attr("z-index","100"); |
|
459 __IriSP.jQuery("#Ldt-controler").hide(); |
|
460 |
|
461 __IriSP.jQuery("<div id='Ldt-load-container'><div id='Ldt-loader'> </div> Chargement... </div>").appendTo("#Ldt-ShowAnnotation-audio"); |
|
462 |
|
463 if(__IriSP.config.gui.mode=='radio'){ |
|
464 __IriSP.jQuery("#Ldt-load-container").attr("width",__IriSP.config.gui.width); |
|
465 } |
|
466 // Show or not the output |
|
467 if(__IriSP.config.gui.debug===true){ |
|
468 __IriSP.jQuery("#Ldt-output").show(); |
|
469 } else { |
|
470 __IriSP.jQuery("#Ldt-output").hide(); |
|
471 } |
|
472 |
|
473 }; |
|
474 |
|
475 __IriSP.Media = function (id,url,duration,title,description){ |
|
476 this.id = id; |
|
477 this.url = url; |
|
478 this.title = title; |
|
479 this.description = description; |
|
480 this.duration = duration; |
|
481 this.lignes = new Array(); |
|
482 |
|
483 __IriSP.trace("__IriSP.Media","Media ID : "+id); |
|
484 __IriSP.trace("__IriSP.Media","Media URL : "+url); |
|
485 __IriSP.trace("__IriSP.Media","Media title : "+title); |
|
486 } |
|
487 __IriSP.Media.prototype.createPlayerMedia = function (width,height,MyStreamer,MySwfPath){ |
|
488 __IriSP.MyApiPlayer = new __IriSP.APIplayer(width,height,this.url,this.duration,MyStreamer,MySwfPath); |
|
489 //createPlayer(width,height,this.url,this.duration,MyStreamer,MySwfPath); |
|
490 } |
|
491 __IriSP.Media.prototype.getMediaDuration = function (){ |
|
492 return (this.duration); |
|
493 } |
|
494 __IriSP.Media.prototype.getMediaTitle = function (){ |
|
495 return (this.title); |
|
496 } |
|
497 |
|
498 |
|
499 |
|
500 /* INTERFACE : SLIDER ( CONTROL BAR ) | BUTTON () */ |
|
501 __IriSP.createInterface = function(width,height,duration){ |
|
502 |
|
503 __IriSP.jQuery("#Ldt-controler").show(); |
|
504 //__IriSP.jQuery("#Ldt-Root").css('display','visible'); |
|
505 __IriSP.trace("__IriSP.createInterface",width+","+height+","+duration+","); |
|
506 |
|
507 __IriSP.jQuery("#Ldt-ShowAnnotation").click(function () { |
|
508 //__IriSP.jQuery(this).slideUp(); |
|
509 }); |
|
510 |
|
511 var LdtpPlayerY = __IriSP.jQuery("#Ldt-PlaceHolder").attr("top"); |
|
512 var LdtpPlayerX = __IriSP.jQuery("#Ldt-PlaceHolder").attr("left"); |
|
513 __IriSP.jQuery("#slider-range-min").slider({ //range: "min", |
|
514 value: 0, |
|
515 min: 1, |
|
516 max: duration/1000,//1:54:52.66 = 3600+3240+ |
|
517 step: 0.1, |
|
518 slide: function(event, ui) { |
|
519 |
|
520 //__IriSP.jQuery("#amount").val(ui.value+" s"); |
|
521 //player.sendEvent('SEEK', ui.value) |
|
522 __IriSP.MyApiPlayer.seek(ui.value); |
|
523 //changePageUrlOffset(ui.value); |
|
524 //player.sendEvent('PAUSE') |
|
525 } |
|
526 }); |
|
527 __IriSP.trace("__IriSP.createInterface","ICI"); |
|
528 __IriSP.jQuery("#amount").val(__IriSP.jQuery("#slider-range-min").slider("value")+" s"); |
|
529 __IriSP.jQuery(".Ldt-Control1 button:first").button({ |
|
530 icons: { |
|
531 primary: 'ui-icon-play' |
|
532 }, |
|
533 text: false |
|
534 }).next().button({ |
|
535 icons: { |
|
536 primary: 'ui-icon-seek-next' |
|
537 }, |
|
538 text: false |
|
539 }); |
|
540 __IriSP.jQuery(".Ldt-Control2 button:first").button({ |
|
541 icons: { |
|
542 primary: 'ui-icon-transferthick-e-w'//, |
|
543 //secondary: 'ui-icon-volume-off' |
|
544 }, |
|
545 text: false |
|
546 }).next().button({ |
|
547 icons: { |
|
548 primary: 'ui-icon-volume-on' |
|
549 }, |
|
550 text: false |
|
551 }); |
|
552 |
|
553 // /!\ PB A MODIFIER |
|
554 //__IriSP.MyTags.draw(); |
|
555 __IriSP.trace("__IriSP.createInterface","ICI2"); |
|
556 __IriSP.jQuery("#ldt-CtrlPlay").attr("style","background-color:#CD21C24;"); |
|
557 |
|
558 __IriSP.jQuery("#Ldt-load-container").hide(); |
|
559 |
|
560 if(__IriSP.config.gui.mode=="radio" & __IriSP.jQuery.browser.msie!=true){ |
|
561 __IriSP.jQuery("#Ldtplayer1").attr("height","0"); |
|
562 } |
|
563 __IriSP.trace("__IriSP.createInterface","3"); |
|
564 |
|
565 __IriSP.trace("__IriSP.createInterface","END"); |
|
566 |
|
567 } |
|
568 |
|
569 |
|
570 /* API player - work in progress ... need refactoring of code */ |
|
571 __IriSP.APIplayer = function (width,height,url,duration,streamerPath,MySwfPath){ |
|
572 |
|
573 |
|
574 this.player = null; |
|
575 this.hashchangeUpdate = null; |
|
576 |
|
577 this.width = width; |
|
578 this.height = height; |
|
579 this.url = url; |
|
580 this.duration = duration; |
|
581 this.streamerPath = streamerPath; |
|
582 this.MySwfPath = MySwfPath; |
|
583 |
|
584 __IriSP.MyApiPlayer = this; |
|
585 |
|
586 __IriSP.createPlayer(this.url,this.streamerPath); |
|
587 __IriSP.trace("__IriSP.APIplayer","__IriSP.createPlayer"); |
|
588 |
|
589 //__IriSP.config.player |
|
590 /* |
|
591 - dailymotion // &enableApi=1&chromeless=1 |
|
592 - youtube |
|
593 - html5 |
|
594 - flowplayer |
|
595 - jwplayer |
|
596 */ |
|
597 |
|
598 } |
|
599 __IriSP.APIplayer.prototype.ready = function(player){ |
|
600 |
|
601 //__IriSP.trace("__IriSP.APIplayer.prototype.APIpReady"," __IriSP.createInterface"); |
|
602 __IriSP.createInterface(this.width,this.height,this.duration); |
|
603 //__IriSP.trace("__IriSP.APIplayer.prototype.APIpReady","END __IriSP.createInterface"); |
|
604 |
|
605 // hashchange EVENT |
|
606 if (window.addEventListener){ |
|
607 |
|
608 // pour FIREFOX hashchange EVENT |
|
609 window.addEventListener("hashchange", function() { |
|
610 var url = window.location.href; |
|
611 var time = __IriSP.retrieveTimeFragment(url); |
|
612 __IriSP.trace("__IriSP.APIplayer.prototype.ready",time); |
|
613 if(__IriSP.MyApiPlayer.hashchangeUpdate==null){ |
|
614 __IriSP.MyApiPlayer.seek(time); |
|
615 }else{ |
|
616 __IriSP.MyApiPlayer.hashchangeUpdate=null; |
|
617 } |
|
618 }, false); |
|
619 |
|
620 } |
|
621 else if (window.attachEvent){ |
|
622 // FOR IE hashchange EVENT |
|
623 |
|
624 window.attachEvent("onhashchange", function() { |
|
625 __IriSP.trace("hashchange",time); |
|
626 var url = window.location.href; |
|
627 var time = __IriSP.retrieveTimeFragment(url); |
|
628 if(__IriSP.MyApiPlayer.hashchangeUpdate==null){ |
|
629 __IriSP.MyApiPlayer.seek(time); |
|
630 }else{ |
|
631 __IriSP.MyApiPlayer.hashchangeUpdate=null; |
|
632 } |
|
633 }, false); |
|
634 } |
|
635 |
|
636 } |
|
637 __IriSP.APIplayer.prototype.pause = function(){ |
|
638 this.hashchangeUpdate = true; |
|
639 __IriSP.player.sendEvent('PAUSE'); |
|
640 } |
|
641 __IriSP.APIplayer.prototype.play = function(){ |
|
642 this.hashchangeUpdate = true; |
|
643 //__IriSP.trace("__IriSP.config.player.type",__IriSP.config.player.type); |
|
644 if(__IriSP.config.player.type=='jwplayer'){ |
|
645 |
|
646 __IriSP.player.sendEvent('PLAY'); |
|
647 |
|
648 } else if(__IriSP.config.player.type=='dailymotion' |
|
649 || __IriSP.config.player.type=='youtube' |
|
650 || __IriSP.config.player.type=='vimeo') { |
|
651 |
|
652 var status = __IriSP.player.getPlayerState(); |
|
653 __IriSP.trace("__IriSP.APIplayer.prototype.play.status",status); |
|
654 |
|
655 if (status!=1){ |
|
656 __IriSP.player.playVideo(); |
|
657 //} else if(__IriSP.config.player.type=='vimeo' ){ |
|
658 }else{ |
|
659 __IriSP.player.pauseVideo(); |
|
660 } |
|
661 |
|
662 } |
|
663 } |
|
664 __IriSP.APIplayer.prototype.mute = function(){ |
|
665 __IriSP.player.sendEvent('MUTE'); |
|
666 |
|
667 //alert(__IriSP.jQuery(".ui-icon-volume-on").css("background-position-x")); |
|
668 if (__IriSP.jQuery(".ui-icon-volume-on").css("background-position")=="-144px -160px"){ |
|
669 __IriSP.jQuery(".ui-icon-volume-on").css("background-position","-130px -160px"); |
|
670 } else { |
|
671 __IriSP.jQuery(".ui-icon-volume-on").css("background-position","-144px -160px"); |
|
672 } |
|
673 } |
|
674 __IriSP.APIplayer.prototype.share = function(network){ |
|
675 |
|
676 var MyMessage = encodeURIComponent("J'écoute Les Retours du Dimanche : "); |
|
677 var MyURLNow = window.location.href; |
|
678 var shareURL; |
|
679 //alert(network+" : "+MyURLNow); |
|
680 |
|
681 if(network == "facebook"){ |
|
682 shareURL = "http://www.facebook.com/share.php?u="; |
|
683 }else if(network == "twitter"){ |
|
684 shareURL = "http://twitter.com/home?status="+MyMessage; |
|
685 }else if(network == "myspace"){ |
|
686 shareURL ="http://www.myspace.com/Modules/PostTo/Pages/?u="; |
|
687 }else if(network == "delicious"){ |
|
688 shareURL = "http://delicious.com/save?url="; |
|
689 }else if(network == "JameSpot"){ |
|
690 shareURL = "http://www.jamespot.com/?action=spotit&u="; |
|
691 //alert(network+" non actif pour l'instant : "+MyURLNow); |
|
692 } |
|
693 |
|
694 window.open(shareURL+encodeURIComponent(MyURLNow)); |
|
695 //window.location.href = shareURL+encodeURIComponent(MyURLNow); |
|
696 } |
|
697 __IriSP.APIplayer.prototype.seek = function (time){ |
|
698 __IriSP.trace("__IriSP.APIplayer.prototype.seek",time); |
|
699 if(__IriSP.config.player.type=='jwplayer'){ |
|
700 __IriSP.player.sendEvent('SEEK', time); |
|
701 } else if(__IriSP.config.player.type=='dailymotion' |
|
702 || __IriSP.config.player.type=='youtube') { |
|
703 __IriSP.player.seekTo(time); |
|
704 } |
|
705 this.changePageUrlOffset(time); |
|
706 } |
|
707 __IriSP.APIplayer.prototype.update = function (time){ |
|
708 this.hashchangeUpdate = true; |
|
709 __IriSP.player.sendEvent('SEEK', time); |
|
710 } |
|
711 __IriSP.APIplayer.prototype.changePageUrlOffset = function (time) { |
|
712 //alert(time); |
|
713 __IriSP.trace("__IriSP.APIplayer.prototype.changePageUrlOffset","CHANGE URL "+time); |
|
714 window.location.hash = "#t=" + time; |
|
715 window.location.href = window.location.href; |
|
716 } |
|
717 |
|
718 /* MEDIA FRAGMENT FUNCTION */ |
|
719 |
|
720 __IriSP.jumpToTimeoffset = function (form) { |
|
721 var time = form.time.value; |
|
722 __IriSP.MyApiPlayer.changePageUrlOffset(time); |
|
723 } |
|
724 __IriSP.retrieveTimeFragment = function (url) { |
|
725 var pageoffset = 0; |
|
726 var offsettime = 0; |
|
727 |
|
728 if (url.split("#")[1] != null) { |
|
729 pageoffset = url.split("#")[1]; |
|
730 if (pageoffset.substring(2) != null) { |
|
731 offsettime = pageoffset.substring(2); |
|
732 } |
|
733 } |
|
734 return offsettime; |
|
735 } |
|
736 __IriSP.ignoreTimeFragment = function(url){ |
|
737 if (url.split("#")[1] != null) { |
|
738 var pageurl= url.split("#")[0]; |
|
739 } |
|
740 return pageurl; |
|
741 } |
|
742 |
|
743 |
|
744 /* CODE SPECIAL JW PLAYER creation + listener */ |
|
745 |
|
746 __IriSP.currentPosition = 0; |
|
747 __IriSP.currentVolume = 50; |
|
748 __IriSP.player = null; |
|
749 __IriSP.startPosition = null; |
|
750 |
|
751 |
|
752 |
|
753 __IriSP.createPlayer = function (url,streamerPath) { |
|
754 |
|
755 // vimeo |
|
756 __IriSP.config.player.flashvars.clip_id = __IriSP.config.player.src; |
|
757 |
|
758 if(__IriSP.config.player.type=='dailymotion'){ |
|
759 __IriSP.config.player.src = __IriSP.config.player.src+"&chromeless=1&enableApi=1"; |
|
760 } else if (__IriSP.config.player.type=='youtube'){ |
|
761 __IriSP.config.player.src = __IriSP.config.player.src+"&enablejsapi=1&version=3"; |
|
762 } else if (__IriSP.config.player.type=='vimeo'){ |
|
763 __IriSP.config.player.src = "http://vimeo.com/moogaloop.swf"; |
|
764 } |
|
765 |
|
766 __IriSP.trace("__IriSP.createPlayer","start"); |
|
767 |
|
768 __IriSP.myUrlFragment = url.split(streamerPath); |
|
769 __IriSP.config.player.flashvars.streamer = streamerPath; |
|
770 __IriSP.config.player.flashvars.file = __IriSP.myUrlFragment[1]; |
|
771 |
|
772 |
|
773 |
|
774 var flashvars = __IriSP.config.player.flashvars; |
|
775 var params = __IriSP.config.player.params; |
|
776 var attributes = __IriSP.config.player.attributes; |
|
777 |
|
778 __IriSP.trace( |
|
779 "__IriSP.createPlayer", |
|
780 "SWFOBJECT src:"+ |
|
781 __IriSP.config.player.src+ |
|
782 " " +__IriSP.config.gui.width+ |
|
783 " " +__IriSP.config.gui.height+ |
|
784 " || src = " +__IriSP.config.player.src |
|
785 ); |
|
786 |
|
787 |
|
788 swfobject.embedSWF( |
|
789 __IriSP.config.player.src, |
|
790 "Ldt-PlaceHolder", |
|
791 __IriSP.config.gui.width, |
|
792 __IriSP.config.gui.height, |
|
793 "9.0.115", |
|
794 false, |
|
795 flashvars, |
|
796 params, |
|
797 attributes |
|
798 ); |
|
799 |
|
800 // need a methode to |
|
801 // re execute if this swf call does'nt work |
|
802 } |
|
803 |
|
804 /* HOOK system for player API */ |
|
805 /* Name of hooked function |
|
806 - PlayerReady |
|
807 - PlayerAddListeners |
|
808 - PlayerPositionListener |
|
809 - PlayerPositionListenerAction |
|
810 |
|
811 // */ |
|
812 __IriSP.Hook = { |
|
813 hooks: [], |
|
814 |
|
815 register: function ( name, callback ) { |
|
816 if( 'undefined' == typeof( Hook.hooks[name] ) ) |
|
817 Hook.hooks[name] = [] |
|
818 Hook.hooks[name].push( callback ) |
|
819 }, |
|
820 |
|
821 call: function ( name, arguments ) { |
|
822 if( 'undefined' != typeof( Hook.hooks[name] ) ) |
|
823 for( i = 0; i < Hook.hooks[name].length; ++i ) |
|
824 if( true != Hook.hooks[name][i]( arguments ) ) { break; } |
|
825 } |
|
826 } |
|
827 |
|
828 /* API DAILYMOTION */ |
|
829 onDailymotionPlayerReady = function (playerid){ |
|
830 |
|
831 //alert(playerid); |
|
832 __IriSP.player = document.getElementById(__IriSP.config.player.attributes.id); |
|
833 __IriSP.MyApiPlayer.ready(__IriSP.player); |
|
834 |
|
835 var url = document.location.href; |
|
836 var time = __IriSP.retrieveTimeFragment(url); |
|
837 __IriSP.startPosition = time; |
|
838 __IriSP.DailymotionAddListeners(); |
|
839 |
|
840 __IriSP.MyApiPlayer.ready(playerid); |
|
841 } |
|
842 __IriSP.DailymotionAddListeners = function () { |
|
843 if (__IriSP.player) { |
|
844 __IriSP.trace("__IriSP.addListeners","ADD Listener "); |
|
845 //__IriSP.player.addEventListener("onStateChange", "__IriSP.DailymotionPositionListener"); |
|
846 setTimeout("__IriSP.DailymotionPositionListener()",100); |
|
847 __IriSP.DailymotionPositionListener(); |
|
848 __IriSP.player.addModelListener("VOLUME", "__IriSP.volumeListener"); |
|
849 //__IriSP.player.addModelListener('STATE', '__IriSP.stateMonitor'); |
|
850 } else { |
|
851 __IriSP.setTimeout("__IriSP.DailymotionAddListeners()",100); |
|
852 } |
|
853 } |
|
854 __IriSP.DailymotionPositionListener = function() { |
|
855 |
|
856 __IriSP.currentPosition = __IriSP.player.getCurrentTime(); |
|
857 //__IriSP.trace("__IriSP.DailymotionPositionListener",__IriSP.currentPosition); |
|
858 //__IriSP.trace("__IriSP.currentPosition",__IriSP.currentPosition); |
|
859 |
|
860 __IriSP.jQuery("#slider-range-min").slider("value",__IriSP.currentPosition); |
|
861 __IriSP.jQuery("#amount").val(__IriSP.currentPosition+" s"); |
|
862 // afficher annotation |
|
863 /*__IriSP.MyLdt.checkTime(__IriSP.currentPosition); |
|
864 */ |
|
865 |
|
866 setTimeout("__IriSP.DailymotionPositionListener()",10); |
|
867 } |
|
868 |
|
869 /* API YOUTUBE */ |
|
870 onYouTubePlayerReady= function (playerid){ |
|
871 |
|
872 var url = document.location.href; |
|
873 var time = __IriSP.retrieveTimeFragment(url); |
|
874 __IriSP.player = document.getElementById(__IriSP.config.player.attributes.id); |
|
875 __IriSP.startPosition = time; |
|
876 |
|
877 __IriSP.MyApiPlayer.ready(__IriSP.player); |
|
878 |
|
879 __IriSP.MyApiPlayer.seek(time); |
|
880 __IriSP.MyApiPlayer.play(); |
|
881 |
|
882 |
|
883 __IriSP.YouTubeAddListeners(); |
|
884 __IriSP.trace("onYouTubePlayerReady=",time); |
|
885 //__IriSP.MyApiPlayer.ready(playerid); |
|
886 } |
|
887 __IriSP.YouTubeAddListeners = function () { |
|
888 if (__IriSP.player) { |
|
889 __IriSP.trace("__IriSP.addListeners","ADD Listener "); |
|
890 __IriSP.player.addEventListener("onStateChange", "__IriSP.YouTubeStateMonitor"); |
|
891 setTimeout("__IriSP.YouTubePositionListener()",100); |
|
892 __IriSP.player.addModelListener("VOLUME", "__IriSP.volumeListener"); |
|
893 //__IriSP.player.addModelListener('STATE', '__IriSP.stateMonitor'); |
|
894 } else { |
|
895 __IriSP.setTimeout("__IriSP.YouTubePositionListener()",100); |
|
896 } |
|
897 } |
|
898 __IriSP.YouTubePositionListener = function() { |
|
899 |
|
900 __IriSP.currentPosition = __IriSP.player.getCurrentTime(); |
|
901 //__IriSP.trace("__IriSP.YouTubePositionListener",__IriSP.currentPosition); |
|
902 //__IriSP.trace("__IriSP.currentPosition",__IriSP.currentPosition); |
|
903 |
|
904 __IriSP.MyLdt.checkTime(__IriSP.currentPosition); |
|
905 __IriSP.jQuery("#slider-range-min").slider("value",__IriSP.currentPosition); |
|
906 __IriSP.jQuery("#amount").val(__IriSP.currentPosition+" s"); |
|
907 // afficher annotation |
|
908 __IriSP.MyLdt.checkTime(__IriSP.currentPosition); |
|
909 |
|
910 |
|
911 setTimeout("__IriSP.YouTubePositionListener()",10); |
|
912 } |
|
913 __IriSP.YouTubeStateMonitor = function (obj) { |
|
914 __IriSP.player.addModelListener('__IriSP.YouTubeStateMonitor ', newstate); |
|
915 //alert(newstate+" "+obj.newstate); |
|
916 if(newstate == '2') |
|
917 { |
|
918 __IriSP.trace("__IriSP.stateMonitor","PAUSE"); |
|
919 __IriSP.MyApiPlayer.changePageUrlOffset(__IriSP.currentPosition); |
|
920 |
|
921 }else if (newstate == '1'){ |
|
922 // une fois la video prete a lire la déplacer au bon timecode |
|
923 if(__IriSP.startPosition!=null){ |
|
924 __IriSP.MyApiPlayer.update(__IriSP.startPosition); |
|
925 __IriSP.startPosition = null; |
|
926 } |
|
927 } |
|
928 else if (newstate == '-1'){ |
|
929 // une fois la video prete a lire la déplacer au bon timecode |
|
930 if(__IriSP.startPosition!=null){ |
|
931 __IriSP.MyApiPlayer.update(__IriSP.startPosition); |
|
932 __IriSP.startPosition = null; |
|
933 } |
|
934 } else if (newstate == '3'){ |
|
935 __IriSP.trace("__IriSP.stateMonitor","BUFFERING : "); |
|
936 //changePageUrlOffset(currentPosition); |
|
937 } |
|
938 |
|
939 } |
|
940 |
|
941 |
|
942 /* API VIMEO */ |
|
943 onVimeoPlayerReady= function (playerid){ |
|
944 |
|
945 var url = document.location.href; |
|
946 var time = __IriSP.retrieveTimeFragment(url); |
|
947 __IriSP.player = document.getElementById(__IriSP.config.player.attributes.id); |
|
948 __IriSP.startPosition = time; |
|
949 |
|
950 __IriSP.MyApiPlayer.ready(__IriSP.player); |
|
951 |
|
952 __IriSP.MyApiPlayer.seek(time); |
|
953 __IriSP.MyApiPlayer.play(); |
|
954 |
|
955 |
|
956 __IriSP.YouTubeAddListeners(); |
|
957 __IriSP.trace("onYouTubePlayerReady=",time); |
|
958 //__IriSP.MyApiPlayer.ready(playerid); |
|
959 } |
|
960 __IriSP.VimeoAddListeners = function () { |
|
961 if (__IriSP.player) { |
|
962 __IriSP.trace("__IriSP.addListeners","ADD Listener "); |
|
963 __IriSP.player.addEventListener("onStateChange", "__IriSP.YouTubeStateMonitor"); |
|
964 setTimeout("__IriSP.YouTubePositionListener()",100); |
|
965 __IriSP.player.addModelListener("VOLUME", "__IriSP.volumeListener"); |
|
966 //__IriSP.player.addModelListener('STATE', '__IriSP.stateMonitor'); |
|
967 } else { |
|
968 __IriSP.setTimeout("__IriSP.YouTubePositionListener()",100); |
|
969 } |
|
970 } |
|
971 __IriSP.VimeoPositionListener = function() { |
|
972 |
|
973 __IriSP.currentPosition = __IriSP.player.getCurrentTime(); |
|
974 //__IriSP.trace("__IriSP.YouTubePositionListener",__IriSP.currentPosition); |
|
975 //__IriSP.trace("__IriSP.currentPosition",__IriSP.currentPosition); |
|
976 |
|
977 __IriSP.MyLdt.checkTime(__IriSP.currentPosition); |
|
978 __IriSP.jQuery("#slider-range-min").slider("value",__IriSP.currentPosition); |
|
979 __IriSP.jQuery("#amount").val(__IriSP.currentPosition+" s"); |
|
980 // afficher annotation |
|
981 __IriSP.MyLdt.checkTime(__IriSP.currentPosition); |
|
982 |
|
983 |
|
984 setTimeout("__IriSP.YouTubePositionListener()",10); |
|
985 } |
|
986 __IriSP.VimeoStateMonitor = function (obj) { |
|
987 __IriSP.player.addModelListener('__IriSP.YouTubeStateMonitor ', newstate); |
|
988 //alert(newstate+" "+obj.newstate); |
|
989 if(newstate == '2') |
|
990 { |
|
991 __IriSP.trace("__IriSP.stateMonitor","PAUSE"); |
|
992 __IriSP.MyApiPlayer.changePageUrlOffset(__IriSP.currentPosition); |
|
993 |
|
994 }else if (newstate == '1'){ |
|
995 // une fois la video prete a lire la déplacer au bon timecode |
|
996 if(__IriSP.startPosition!=null){ |
|
997 __IriSP.MyApiPlayer.update(__IriSP.startPosition); |
|
998 __IriSP.startPosition = null; |
|
999 } |
|
1000 } |
|
1001 else if (newstate == '-1'){ |
|
1002 // une fois la video prete a lire la déplacer au bon timecode |
|
1003 if(__IriSP.startPosition!=null){ |
|
1004 __IriSP.MyApiPlayer.update(__IriSP.startPosition); |
|
1005 __IriSP.startPosition = null; |
|
1006 } |
|
1007 } else if (newstate == '3'){ |
|
1008 __IriSP.trace("__IriSP.stateMonitor","BUFFERING : "); |
|
1009 //changePageUrlOffset(currentPosition); |
|
1010 } |
|
1011 |
|
1012 } |
|
1013 |
|
1014 |
|
1015 /* API JW PLAYER */ |
|
1016 __IriSP.playerReady = function (thePlayer) { |
|
1017 |
|
1018 //__IriSP.trace("__IriSP.playerReady","PLAYER READY !!!!!!!!!!!!"); |
|
1019 __IriSP.player = window.document[thePlayer.id]; |
|
1020 //__IriSP.trace("__IriSP.playerReady","API CALL "+__IriSP.player); |
|
1021 __IriSP.MyApiPlayer.ready(__IriSP.player); |
|
1022 //__IriSP.trace("__IriSP.playerReady","API CALL END "); |
|
1023 |
|
1024 var url = document.location.href; |
|
1025 var time = __IriSP.retrieveTimeFragment(url); |
|
1026 //__IriSP.trace("__IriSP.playerReady"," "+url+" "+time ); |
|
1027 __IriSP.startPosition = time; |
|
1028 //__IriSP.trace("__IriSP.playerReady"," LISTENER LAUCHER"); |
|
1029 __IriSP.addListeners(); |
|
1030 //__IriSP.trace("__IriSP.playerReady"," LISTENER END"); |
|
1031 |
|
1032 } |
|
1033 __IriSP.addListeners = function () { |
|
1034 if (__IriSP.player) { |
|
1035 __IriSP.trace("__IriSP.addListeners","ADD Listener "); |
|
1036 __IriSP.player.addModelListener("TIME", "__IriSP.positionListener"); |
|
1037 __IriSP.player.addControllerListener("VOLUME", "__IriSP.volumeListener"); |
|
1038 __IriSP.player.addModelListener('STATE', '__IriSP.stateMonitor'); |
|
1039 } else { |
|
1040 __IriSP.setTimeout("__IriSP.addListeners()",100); |
|
1041 } |
|
1042 |
|
1043 // et changer les boutons |
|
1044 } |
|
1045 __IriSP.stateMonitor = function (obj) { |
|
1046 |
|
1047 |
|
1048 |
|
1049 if(obj.newstate == 'PAUSED') |
|
1050 { |
|
1051 __IriSP.trace("__IriSP.stateMonitor","PAUSE"); |
|
1052 __IriSP.MyApiPlayer.changePageUrlOffset(__IriSP.currentPosition); |
|
1053 __IriSP.jQuery(".ui-icon-play").css("background-position","0px -160px"); |
|
1054 |
|
1055 } else if (obj.newstate == 'PLAYING'){ |
|
1056 // une fois la video prete a lire la déplacer au bon timecode |
|
1057 if(__IriSP.startPosition!=null){ |
|
1058 __IriSP.MyApiPlayer.update(__IriSP.startPosition); |
|
1059 __IriSP.startPosition = null; |
|
1060 } |
|
1061 __IriSP.jQuery(".ui-icon-play").css("background-position","-16px -160px"); |
|
1062 } else if (obj.newstate == 'BUFFERING'){ |
|
1063 __IriSP.trace("__IriSP.stateMonitor","BUFFERING : "); |
|
1064 //changePageUrlOffset(currentPosition); |
|
1065 } |
|
1066 |
|
1067 } |
|
1068 __IriSP.positionListener = function(obj) { |
|
1069 //__IriSP.trace("__IriSP.positionListener",obj.position); |
|
1070 __IriSP.currentPosition = obj.position; |
|
1071 var tmp = document.getElementById("posit"); |
|
1072 if (tmp) { tmp.innerHTML = "position: " + __IriSP.currentPosition; } |
|
1073 __IriSP.jQuery("#slider-range-min").slider("value", obj.position); |
|
1074 __IriSP.jQuery("#amount").val(obj.position+" s"); |
|
1075 // afficher annotation |
|
1076 __IriSP.MyLdt.checkTime(__IriSP.currentPosition); |
|
1077 |
|
1078 |
|
1079 } |
|
1080 __IriSP.volumeListener = function (obj) { |
|
1081 __IriSP.currentVolume = obj.percentage; |
|
1082 var tmp = document.getElementById("vol"); |
|
1083 if (tmp) { tmp.innerHTML = "volume: " + __IriSP.currentVolume; } |
|
1084 } |
|
1085 |
|
1086 |
|
1087 |
|
1088 |
|
1089 /* UTIL */ |
|
1090 // code from http://stackoverflow.com/questions/822452/strip-html-from-text-javascript |
|
1091 __IriSP.stripHtml = function(s){ |
|
1092 return s.replace(/\\&/g, '&').replace(/\\</g, '<').replace(/\\>/g, '>').replace(/\\t/g, ' ').replace(/\\n/g, '<br />').replace(/'/g, ''').replace(/"/g, '"'); |
|
1093 } |
|
1094 // conversion de couleur Decimal vers HexaDecimal || 000 si fff |
|
1095 __IriSP.DEC_HEXA_COLOR = function (dec){ |
|
1096 var hexa='0123456789ABCDEF',hex=''; |
|
1097 var tmp; |
|
1098 while (dec>15){ |
|
1099 tmp = dec-(Math.floor(dec/16))*16; |
|
1100 hex = hexa.charAt(tmp)+hex; |
|
1101 dec = Math.floor(dec/16); |
|
1102 } |
|
1103 hex = hexa.charAt(dec)+hex; |
|
1104 if (hex == "FFCC00"){ hex="";/* by default color of Ldt annotation */ } |
|
1105 return(hex); |
|
1106 } |
|
1107 |
|
1108 |
|
1109 |
|
1110 /* CLASS Ligne (annotationType) */ |
|
1111 |
|
1112 __IriSP.LDTligne = null; |
|
1113 __IriSP.Ligne = function (id,title,description,duration){ |
|
1114 this.id = id; |
|
1115 this.title = title; |
|
1116 this.description = description; |
|
1117 // |
|
1118 this.annotations = new Array(); |
|
1119 this.duration = duration; |
|
1120 this.annotationOldRead=""; |
|
1121 __IriSP.LDTligne = this; |
|
1122 __IriSP.trace("__IriSP.Ligne","CREATE "+__IriSP.LDTligne); |
|
1123 } |
|
1124 __IriSP.Ligne.prototype.addAnnotation = function (id,begin,end,media,title,description,color,tags){ |
|
1125 var myAnnotation = new __IriSP.Annotation(id,begin,end,media,title,description,color,tags,this.duration); |
|
1126 this.annotations.push(myAnnotation); |
|
1127 //__IriSP.trace("__IriSP.Ligne.prototype.addAnnotation ","add annotation "+title); |
|
1128 } |
|
1129 __IriSP.Ligne.prototype.onClickLigneAnnotation = function(id){ |
|
1130 //changePageUrlOffset(currentPosition); |
|
1131 //player.sendEvent('SEEK', this.start); |
|
1132 //__IriSP.trace("SEEK",this.start); |
|
1133 } |
|
1134 __IriSP.Ligne.prototype.searchLigneAnnotation = function(id){ |
|
1135 /*for (){ |
|
1136 }*/ |
|
1137 } |
|
1138 __IriSP.Ligne.prototype.listAnnotations = function(){ |
|
1139 |
|
1140 } |
|
1141 __IriSP.Ligne.prototype.nextAnnotation = function (){ |
|
1142 var annotationCibleNumber = this.numAnnotation(this.annotationOldRead)+1; |
|
1143 var annotationCible = this.annotations[annotationCibleNumber]; |
|
1144 |
|
1145 if(annotationCibleNumber<this.annotations.length-1){ |
|
1146 annotationCible.begin |
|
1147 __IriSP.player .sendEvent('SEEK', annotationCible.begin/1000); |
|
1148 __IriSP.trace("LIGNE ","| next = "+annotationCibleNumber+" - "+this.annotations.length+" | seek :"+annotationCible.begin/1000); |
|
1149 }else{ |
|
1150 __IriSP.player .sendEvent('SEEK', this.annotations[0].begin/1000); |
|
1151 } |
|
1152 |
|
1153 |
|
1154 } |
|
1155 __IriSP.Ligne.prototype.numAnnotation = function (annotationCible){ |
|
1156 for (var i=0; i < this.annotations.length; ++i){ |
|
1157 if(annotationCible == this.annotations[i]){ |
|
1158 return i; |
|
1159 } |
|
1160 } |
|
1161 } |
|
1162 __IriSP.Ligne.prototype.checkTime = function(time){ |
|
1163 var annotationTempo = -1; |
|
1164 //__IriSP.trace("__IriSP.Ligne.prototype.checkTimeLigne",time); |
|
1165 //__IriSP.trace("__IriSP.Ligne.prototype.checkTimeLigne",this.annotations.length); |
|
1166 |
|
1167 for (var i=0; i < this.annotations.length; ++i){ |
|
1168 annotationTempo = this.annotations[i]; |
|
1169 if (time>annotationTempo.begin/1000 && time<annotationTempo.end/1000){ |
|
1170 |
|
1171 // different form the previous |
|
1172 if(annotationTempo!=this.annotationOldRead){ |
|
1173 this.annotationOldRead = annotationTempo; |
|
1174 //__IriSP.trace("Check : ","annotation ici : "+i+" title "+annotationTempo.title); |
|
1175 //__IriSP.jQuery('#Ldt-ShowAnnotation').slideUp(); |
|
1176 //http://api.jquery.com/delay/ -> 1.4 |
|
1177 //__IriSP.jQuery("#Ldt-SaTitle").delay(100).text(annotationTempo.title); |
|
1178 //__IriSP.jQuery("#Ldt-SaDescription").delay(100).text(annotationTempo.description); |
|
1179 //__IriSP.jQuery('#Ldt-ShowAnnotation').delay(100).slideDown(); |
|
1180 //__IriSP.trace("__IriSP.Ligne.prototype.checkTimeLigne",annotationTempo.title+" "+annotationTempo.description ); |
|
1181 __IriSP.jQuery("#Ldt-SaTitle").text(annotationTempo.title); |
|
1182 __IriSP.jQuery("#Ldt-SaDescription").text(annotationTempo.description); |
|
1183 __IriSP.jQuery("#Ldt-SaKeywordText").html("Mots clefs : "+annotationTempo.htmlTags); |
|
1184 |
|
1185 //__IriSP.jQuery('#Ldt-ShowAnnotation').slideDown(); |
|
1186 var startPourcent = annotationTempo.timeToPourcent((annotationTempo.begin*1+(annotationTempo.end*1-annotationTempo.begin*1)/2),annotationTempo.duration*1); |
|
1187 __IriSP.jQuery("#Ldt-Show-Arrow").animate({left:startPourcent+'%'},1000); |
|
1188 __IriSP.jQuery("#"+annotationTempo.id).animate({alpha:'100%'},1000); |
|
1189 //alert(startPourcent); |
|
1190 var tempolinkurl = __IriSP.ignoreTimeFragment(window.location.href)+"#t="+(this.annotations[i].begin/1000); |
|
1191 } |
|
1192 break; |
|
1193 }else{ |
|
1194 annotationTempo=-1; |
|
1195 } |
|
1196 |
|
1197 } |
|
1198 // si il y en a pas : retractation du volet |
|
1199 if( annotationTempo == -1){ |
|
1200 if(annotationTempo!=this.annotationOldRead){ |
|
1201 __IriSP.trace("Check : ","pas d'annotation ici "); |
|
1202 __IriSP.jQuery("#Ldt-SaTitle").text(""); |
|
1203 __IriSP.jQuery("#Ldt-SaDescription").text(""); |
|
1204 __IriSP.jQuery("#Ldt-SaKeywordText").html(""); |
|
1205 __IriSP.jQuery('#Ldt-ShowAnnotation').slideUp(); |
|
1206 if(this.annotationOldRead){ |
|
1207 __IriSP.jQuery("#"+this.annotationOldRead.id).animate({alpha:'70%'},1000); |
|
1208 } |
|
1209 //__IriSP.jQuery("#Ldt-Show-Arrow").animate({left:'0%'},1000); |
|
1210 this.annotationOldRead = annotationTempo; |
|
1211 } |
|
1212 } |
|
1213 __IriSP.trace("__IriSP.Ligne.prototype.checkTimeLigne",annotationTempo); |
|
1214 } |
|
1215 |
|
1216 |
|
1217 /* CLASS Annotation */ |
|
1218 |
|
1219 __IriSP.Annotation = function (){ |
|
1220 var id = null; |
|
1221 var begin = null; |
|
1222 var end = null; |
|
1223 var media = null; |
|
1224 var description = null; |
|
1225 var title = null; |
|
1226 var color = null; |
|
1227 var tags = null; |
|
1228 __IriSP.trace("annotation ","réussi") |
|
1229 } |
|
1230 __IriSP.Annotation = function(id,begin,end,media,title,description,color,tags,duration){ |
|
1231 this.id = id; |
|
1232 this.begin = begin; |
|
1233 this.end = end; |
|
1234 this.media = media; |
|
1235 this.description = description; |
|
1236 this.title = title; |
|
1237 this.color = color; |
|
1238 this.tags = tags; |
|
1239 this.htmlTags = ""; |
|
1240 this.duration = duration; |
|
1241 // draw it |
|
1242 this.draw(); |
|
1243 this.drawTags(); |
|
1244 // |
|
1245 __IriSP.trace("Annotation created : ",id); |
|
1246 } |
|
1247 __IriSP.Annotation.prototype.draw = function(){ |
|
1248 //alert (this.duration); |
|
1249 var startPourcent = this.timeToPourcent(this.begin,this.duration); // temps du media |
|
1250 var endPourcent = this.timeToPourcent(this.end,this.duration)-startPourcent; |
|
1251 var titleForDiv = this.title.substr(0,55); |
|
1252 |
|
1253 __IriSP.jQueryAnnotationTemplate = "<div title='"+__IriSP.stripHtml(titleForDiv)+"' id='"+this.id+"' class='ui-slider-range ui-slider-range-min ui-widget-header iri-chapter' width='100%' style=\"left:"+startPourcent+"%; width:"+endPourcent+"%; padding-top:15px; border-left:solid 1px #aaaaaa; border-right:solid 1px #aaaaaa; background:#"+__IriSP.DEC_HEXA_COLOR(this.color)+";\" onClick=\"__IriSP.MyApiPlayer.seek('"+Math.round(this.begin/1000)+"');__IriSP.jQuery('#Ldt-ShowAnnotation').slideDown();\" ></div> "; |
|
1254 //alert(this.color+" : "+DEC_HEXA_COLOR(this.color)); |
|
1255 |
|
1256 __IriSP.jQuerytoolTipTemplate = "<div class='Ldt-tooltip'>" |
|
1257 +"<div class='title'>"+__IriSP.stripHtml(this.title)+"</div>" |
|
1258 +"<div class='time'>"+this.begin+" : "+this.end+"</div>" |
|
1259 +"<div class='description'>"+__IriSP.stripHtml(this.description)+"</div>" |
|
1260 +"</div>"; |
|
1261 |
|
1262 |
|
1263 __IriSP.jQuery("<div>"+__IriSP.jQueryAnnotationTemplate+"</div>").appendTo("#Ldt-Annotations"); |
|
1264 // TOOLTIP BUG ! |
|
1265 |
|
1266 __IriSP.jQuery("#"+this.id).tooltip({ effect: 'slide'}); |
|
1267 |
|
1268 |
|
1269 __IriSP.jQuery("#"+this.id).fadeTo(0,0.3); |
|
1270 __IriSP.jQuery("#"+this.id).mouseover(function() { |
|
1271 __IriSP.jQuery("#"+this.id).animate({opacity: 0.6}, 5) |
|
1272 }).mouseout(function(){ |
|
1273 __IriSP.jQuery("#"+this.id).animate({opacity: 0.3}, 5) |
|
1274 }); |
|
1275 __IriSP.trace("__IriSP.Annotation.prototype.draw","ADD ANOTATION : "+this.begin+" "+this.end+" "+__IriSP.stripHtml(this.title)+" | "+startPourcent+" | "+endPourcent+" | duration = "+this.duration); |
|
1276 |
|
1277 } |
|
1278 __IriSP.Annotation.prototype.drawTags = function(){ |
|
1279 var KeywordPattern = '<a href=\"\"> '+' </a>'; |
|
1280 |
|
1281 //__IriSP.trace(" !? Tags : ",this.tags); |
|
1282 |
|
1283 if (this.tags!=undefined){ |
|
1284 for (var i = 0; i < this.tags.length; ++i){ |
|
1285 |
|
1286 //this.htmlTags += '<span onclick=\"ShowTag('+this.tags[i]['id-ref']+');\" > '+MyTags.getTitle(this.tags[i]['id-ref'])+' </span>'+" , "; |
|
1287 this.htmlTags += '<span> '+__IriSP.MyTags.getTitle(this.tags[i]['id-ref'])+' </span>'+" , "; |
|
1288 |
|
1289 } |
|
1290 } |
|
1291 } |
|
1292 __IriSP.Annotation.prototype.tootTipAnnotation = function() { |
|
1293 // 1 chercher le div correspondant |
|
1294 // 2 y mettre les information |
|
1295 return this.color + ' ' + this.type + ' apple'; |
|
1296 } |
|
1297 __IriSP.Annotation.prototype.onRollOverAnnotation = function (){ |
|
1298 this.tootTip(); |
|
1299 } |
|
1300 __IriSP.Annotation.prototype.timeToPourcent = function(time,timetotal){ |
|
1301 return (parseInt(Math.round(time/timetotal*100))); |
|
1302 } |
|
1303 |
|
1304 |
|
1305 /* CLASS Tags */ |
|
1306 |
|
1307 __IriSP.Tags = function(object){ |
|
1308 this.myTags = object; |
|
1309 this.htmlTags = null; |
|
1310 this.weigthMax = 0; |
|
1311 //this.mySegments = new array(); |
|
1312 } |
|
1313 __IriSP.Tags.prototype.addAnnotation = function (annotation){ |
|
1314 for (var i = 0; i < this.myTags.length; ++i){ |
|
1315 this.myTags[i].mySegments = new Array(); |
|
1316 if (annotation.tags!=null){ |
|
1317 for (var j = 0; j < annotation.tags.length; ++j){ |
|
1318 if (this.myTags[i]['id'] == annotation.tags[j]['id-ref']){ |
|
1319 this.myTags[i].mySegments.push([annotation.begin,annotation.end,annotation.id]); |
|
1320 var weigthTempo = this.myTags[i].mySegments.length |
|
1321 var tempo = this.myTags[i].mySegments[weigthTempo-1]; |
|
1322 //__IriSP.trace ("__IriSP.Tags.prototype.addAnnotation "," "+this.myTags[i]['meta']['dc:title']+" "+this.myTags[i]['id']+" : "+tempo[0]+" - "+tempo[1]); |
|
1323 |
|
1324 if (this.weigthMax < weigthTempo ){ |
|
1325 this.weigthMax = weigthTempo; |
|
1326 } |
|
1327 } |
|
1328 } |
|
1329 } |
|
1330 } |
|
1331 } |
|
1332 __IriSP.Tags.prototype.getTitle = function (id){ |
|
1333 for (var i = 0; i < this.myTags.length; ++i){ |
|
1334 if(this.myTags[i]['id']==id){ |
|
1335 return(this.myTags[i]['meta']['dc:title']); |
|
1336 } |
|
1337 } |
|
1338 |
|
1339 } |
|
1340 __IriSP.Tags.prototype.draw = function (){ |
|
1341 |
|
1342 __IriSP.trace("__IriSP.Tags.prototype.draw"," !!! WELL START " ); |
|
1343 for (var i = 0; i < this.myTags.length; ++i){ |
|
1344 __IriSP.trace("__IriSP.Tags.prototype.draw"," ADD Tags : "+this.myTags[i]['id']); |
|
1345 if(this.myTags[i]['id']!=null){ |
|
1346 this.htmlTags += '<span onclick=\"MyTags.show( \''+this.myTags[i]['id'] |
|
1347 +'\');\" style=\"font-size:' +((this.myTags[i].mySegments.length/this.weigthMax*10)+8) |
|
1348 +'px;\" alt=\"'+this.myTags[i].mySegments.length |
|
1349 +'\"> '+this.myTags[i]['meta']['dc:title']+' </span>'+' , '; |
|
1350 } |
|
1351 } |
|
1352 |
|
1353 __IriSP.jQuery('#Ldt-Tags').html(this.htmlTags); |
|
1354 __IriSP.trace("__IriSP.Tags.prototype.draw"," !!!! END WMAX= "+this.weigthMax ); |
|
1355 |
|
1356 } |
|
1357 __IriSP.Tags.prototype.show = function (id){ |
|
1358 |
|
1359 var timeStartOffsetA = 100000000000000000000; |
|
1360 var timeStartOffsetB = 100000000000000000000; |
|
1361 var timeEndOffsetA = 0; |
|
1362 var timeEndOffsetB = 0; |
|
1363 var timeStartID; |
|
1364 var timeEndID; |
|
1365 var WidthPourCent; |
|
1366 var leftPourCent; |
|
1367 var timeStartOffset; |
|
1368 |
|
1369 // case 1 : seul segment |
|
1370 // case 2 : 2 ou X segments |
|
1371 |
|
1372 |
|
1373 for (var i = 0; i < this.myTags.length; ++i){ |
|
1374 if (this.myTags[i]['id']==id){ |
|
1375 __IriSP.trace("######### TAG DRAWing : "," END" ); |
|
1376 |
|
1377 for (var j = 0; j < this.myTags[i].mySegments.length; ++j){ |
|
1378 if(timeStartOffset> this.myTags[i].mySegments[j][0]){ |
|
1379 timeStartOffsetA = this.myTags[i].mySegments[j][0]; |
|
1380 timeStartOffsetB = this.myTags[i].mySegments[j][1]; |
|
1381 timeStartID = this.myTags[i].mySegments[j][2] |
|
1382 } |
|
1383 if(timeStartOffset> this.myTags[i].mySegments[j][0]){ |
|
1384 timeEndOffsetA = this.myTags[i].mySegments[j][0]; |
|
1385 timeEndOffsetB = this.myTags[i].mySegments[j][1]; |
|
1386 timeEndID = this.myTags[i].mySegments[j][2] |
|
1387 } |
|
1388 } |
|
1389 |
|
1390 } |
|
1391 } |
|
1392 |
|
1393 // ------------------------------------------------- |
|
1394 // |
|
1395 // ------------------------------------------------- |
|
1396 |
|
1397 leftPourCent = __IriSP.timeToPourcent((timeStartOffsetA*1+(timeStartOffsetB-timeStartOffsetA)/2),__IriSP.MyLdt.duration); |
|
1398 WidthPourCent = __IriSP.timeToPourcent((timeEndOffsetA*1+(timeEndOffsetB-timeEndOffsetA)/2),__IriSP.MyLdt.duration)-leftPourCent; |
|
1399 //WidthPourCent = timeToPourcent((timeEndOffsetA*1+(timeEndOffsetB-timeEndOffsetA)/2),MyLdt.duration)-startPourcent; |
|
1400 __IriSP.jQuery("#Ldt-Show-Tags").css('left',leftPourCent+'%'); |
|
1401 __IriSP.jQuery("#Ldt-Show-Tags").css('width',WidthPourCent+'%'); |
|
1402 // like arrow script |
|
1403 |
|
1404 |
|
1405 |
|
1406 } |
|
1407 |
|
1408 |
|
1409 /* CLASS TRACE */ |
|
1410 |
|
1411 __IriSP.traceNum=0; |
|
1412 __IriSP.trace = function(msg,value){ |
|
1413 |
|
1414 if(__IriSP.config.gui.debug===true){ |
|
1415 __IriSP.traceNum += 1; |
|
1416 __IriSP.jQuery("<div>"+__IriSP.traceNum+" - "+msg+" : "+value+"</div>").appendTo("#Ldt-output"); |
|
1417 } |
|
1418 |
|
1419 } |
|
1420 |
|
1421 |
|
1422 |
|
1423 |
|
1424 |
|
1425 |