client/player/index-player6.html
changeset 50 1ecfe4720da7
parent 49 af3778eab5e8
child 51 2d6866072851
equal deleted inserted replaced
49:af3778eab5e8 50:1ecfe4720da7
     1  <!DOCTYPE HTML PUBLIC  "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
       
     2 <html>
       
     3 <head>
       
     4 <!-- <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />-->
       
     5 	<title>	Augmented Media Player	v 0.06  | with JWplayer</title>
       
     6 
       
     7 	<!-- 
       
     8 	- bouton play pause / 
       
     9 	- bouton next / before
       
    10 	- bouton son 
       
    11 	- cliquer sur annotation affiche le contenu 
       
    12 	- quand sur ségment afficher l'annotation correspondante pendant x seconde 
       
    13 	- controleur 
       
    14 
       
    15 
       
    16 	# custom CSS citizen : 
       
    17 	- EEEEEE très clair
       
    18 	- 8d8d8d Gris clair
       
    19 	- 393939 Gris Fonçés
       
    20 	- 11100F presque noir
       
    21 
       
    22 	--> 
       
    23 
       
    24 <!-- ***************************************************************** -->
       
    25 <!-- EXTERNAL JAVASCRIPT / JQUERY -->
       
    26 <script type="text/javascript" src="js/jquery-1.4.2.js"></script>
       
    27 <script type="text/javascript" src="js/ui/jquery.ui.core.js"></script>
       
    28 <script type="text/javascript" src="js/ui/jquery.ui.widget.js"></script>
       
    29 <script type="text/javascript" src="js/ui/jquery.ui.mouse.js"></script>
       
    30 <script type="text/javascript" src="js/ui/jquery.ui.slider.js"></script>
       
    31 <script type="text/javascript" src="js/ui/jquery.ui.button.js"></script>
       
    32 <script type="text/javascript" src="js/jquery.tools.min.js"></script> 
       
    33 <!-- <script type="text/javascript" src="js/transBG.jquery.plugin.js"></script> -->
       
    34 <script type="text/javascript" src="js/swfobject.js"></script>
       
    35 <!-- INITIALISE JQUERY WITH NO CONFLICT VERSION -->
       
    36 <script>
       
    37     var $jIRI = jQuery.noConflict();
       
    38 </script>
       
    39    
       
    40 <!-- ***************************************************************** -->
       
    41 <!-- CSS QUERY --> 
       
    42 <link type="text/css" href="css/jq-css/themes/base/jquery.ui.all.css" rel="stylesheet" />
       
    43 <link type="text/css" href="css/jq-css/demos.css" rel="stylesheet" />
       
    44 
       
    45 <!-- ***************************************************************** -->
       
    46 <!--  Slider CSS NEEDED Range  -->
       
    47 <style type="text/css">
       
    48 		#demo-frame > div.demo { padding: 5px !important; };
       
    49 </style>
       
    50 
       
    51 <!-- ***************************************************************** -->
       
    52 <!-- CSS CUSTOM  --> 
       
    53 <style type="text/css">
       
    54 		.iri-chapter{
       
    55 			padding-top:10px;
       
    56 			padding-bottom:5px;
       
    57 			border-left:solid 1px #aaaaaa;
       
    58 			border-right:solid 1px #aaaaaa;'
       
    59 		}
       
    60 		
       
    61 		.tooltip {
       
    62 			display:none;
       
    63 			background:transparent url(css/jq-css/tooltip/white_arrow.png);
       
    64 			font-size:12px;
       
    65 			height:100px;
       
    66 			width:180px;
       
    67 			padding:10px;
       
    68 			padding-left:15px;
       
    69 			padding-right:15px;
       
    70 			color:#000;	
       
    71 		}
       
    72 		
       
    73 		#Annotations{
       
    74 			padding-left:5px;
       
    75 			width:470px;
       
    76 			float:left;
       
    77 		}
       
    78 		#ldtSaTitle{
       
    79 			padding-top:2px;
       
    80 			padding-bottom:5px;
       
    81 			font-size:18px;
       
    82 			color:#FFF;	
       
    83 			height:22p;
       
    84 		}
       
    85 		#ldtSaDescription{
       
    86 			font-size:12px;	
       
    87 			color:#FFF;	
       
    88 		}
       
    89 		#ShowAnnotation{
       
    90 			position:absolute;
       
    91 			z-index: 999;
       
    92 			padding:5px;
       
    93 			background:url(css/custom/images/transBlack.png);
       
    94 		}
       
    95 		
       
    96 		#ldtPlaceHolder{
       
    97 			position:absolue;
       
    98 			float:none;
       
    99 		}
       
   100 		.ldtControl1{
       
   101 			width:70px;
       
   102 			float:left;
       
   103 		}
       
   104 		.ldtControl2{
       
   105 			padding-left:10px;
       
   106 			width:70px;
       
   107 			float:left;
       
   108 		}
       
   109 </style>
       
   110 
       
   111 <!-- INTERFACE : SLIDER ( CONTROL BAR ) | BUTTON ()   --> 
       
   112 <script type="text/javascript">
       
   113 
       
   114 	function createInterface (width,height,duration){
       
   115 		$jIRI(function() {
       
   116 		
       
   117 			$jIRI("#Annotations").width(width-(78*2));
       
   118 			$jIRI("#ShowAnnotation").width(width-10);
       
   119 			$jIRI("#controlerLdt").width(width);
       
   120 			$jIRI("#Ldtplayer1").attr("z-index","100");
       
   121 			
       
   122 			 $jIRI("#ShowAnnotation").click(function () { 
       
   123 				 $jIRI(this).slideUp(); 
       
   124 			});
       
   125 
       
   126 			var LdtpPlayerY = $jIRI("#ldtPlaceHolder").attr("top");
       
   127 			var LdtpPlayerX = $jIRI("#ldtPlaceHolder").attr("left");
       
   128 			
       
   129 			//alert(LdtpPlayerY+" | "+LdtpPlayerX);
       
   130 			<!--PB possible sur IE 7 et 6   pour show annotation -->
       
   131 			//$jIRI("#ShowAnnotation").attr("position","absolute");
       
   132 			/*$jIRI("#ShowAnnotation").attr("top",0);
       
   133 			$jIRI("#ShowAnnotation").attr("left",0);*/
       
   134 			
       
   135 			//$jIRI("#slider-range-min").roll
       
   136 			$jIRI("#slider-range-min").slider({ //range: "min",
       
   137 				value: 0,
       
   138 				min: 1,
       
   139 				max: duration/1000,//1:54:52.66 = 3600+3240+
       
   140 				step: 0.1,
       
   141 				slide: function(event, ui) {
       
   142 					
       
   143 					//$jIRI("#amount").val(ui.value+" s");
       
   144 					player.sendEvent('SEEK', ui.value)
       
   145 					//player.sendEvent('PAUSE')
       
   146 				}
       
   147 			});
       
   148 			$jIRI("#amount").val($jIRI("#slider-range-min").slider("value")+" s");
       
   149 			
       
   150 			$jIRI(".ldtControl1 button:first").button({
       
   151 				icons: {
       
   152 					primary: 'ui-icon-play'
       
   153 				},
       
   154 				text: false
       
   155 			}).next().button({
       
   156 				icons: {
       
   157 					primary: 'ui-icon-seek-next'
       
   158 				},
       
   159 				 text: false
       
   160 			});
       
   161 			
       
   162 			$jIRI(".ldtControl2 button:first").button({
       
   163 				icons: {
       
   164 					primary: 'ui-icon-newwin'//,
       
   165 					//secondary: 'ui-icon-volume-off'
       
   166 				},
       
   167 				text: false
       
   168 			}).next().button({
       
   169 				icons: {
       
   170 					primary: 'ui-icon-volume-on'
       
   171 				},
       
   172 				 text: false
       
   173 			});
       
   174 		
       
   175 		});	
       
   176 	}
       
   177 </script>
       
   178 
       
   179 <!-- CREER JW PLAYER  creation + listener --> 
       
   180 <script type="text/javascript">
       
   181 
       
   182 	var currentPosition = 0; 
       
   183 	var currentVolume   = 50; 
       
   184 	var player 			= null;
       
   185 	
       
   186 	function playerReady(thePlayer) {
       
   187 		//alert("ready");
       
   188 		player = window.document[thePlayer.id];
       
   189 		addListeners();	
       
   190 	}
       
   191 
       
   192 	function addListeners() {
       
   193 		if (player) { 
       
   194 			player.addModelListener("TIME", "positionListener");
       
   195 			player.addControllerListener("VOLUME", "volumeListener");
       
   196 			player.addPlayPauseListener("PLAY", "state");
       
   197 		} else {
       
   198 			setTimeout("addListeners()",100);
       
   199 		}
       
   200 
       
   201 		// et changer les boutons
       
   202 	}
       
   203 	
       
   204 	//function 
       
   205 
       
   206 	function addPlayPauseListener(obj) { 
       
   207 		if(obj){
       
   208 			$jIRI(".control1 button:first").button({
       
   209 				icons: {
       
   210 					primary: 'ui-icon-pause'
       
   211 				},
       
   212 				text: false
       
   213 			});
       
   214 		}else{
       
   215 			$jIRI(".control1 button:first").button({
       
   216 				icons: {
       
   217 					primary: 'ui-icon-play'
       
   218 				},
       
   219 				text: false
       
   220 			});
       
   221 		}
       
   222 	}
       
   223 	
       
   224 	function positionListener(obj) { 
       
   225 		currentPosition = obj.position; 
       
   226 		var tmp = document.getElementById("posit");
       
   227 		if (tmp) { tmp.innerHTML = "position: " + currentPosition; }
       
   228 		$jIRI("#slider-range-min").slider("value", obj.position);
       
   229 		$jIRI("#amount").val(obj.position+" s");
       
   230 		// afficher annotation 
       
   231 		
       
   232 		MyLdt.checkTime(currentPosition);
       
   233 	}
       
   234 
       
   235 	function volumeListener(obj) { 
       
   236 		currentVolume = obj.percentage; 
       
   237 		var tmp = document.getElementById("vol");
       
   238 		if (tmp) { tmp.innerHTML = "volume: " + currentVolume; }
       
   239 	}
       
   240 
       
   241 	function createPlayer(width,height,url) {
       
   242 	
       
   243 		myUrlFragment = url.split("/");
       
   244 		//
       
   245 		file = myUrlFragment[myUrlFragment.length-3]+"/"+myUrlFragment[myUrlFragment.length-2]+"/"+myUrlFragment[myUrlFragment.length-1];
       
   246 		indexofff = url.lastIndexOf(file);
       
   247 		streamer = url.substr(0,indexofff);
       
   248 		alert(url+"="+streamer+" - "+file);
       
   249 		
       
   250 		var flashvars = {
       
   251 			streamer:streamer,
       
   252 			file:file, 
       
   253 			//live:"true",
       
   254 			autostart:"true",
       
   255 			controlbar:"none"
       
   256 		}
       
   257 
       
   258 		var params = {
       
   259 			allowfullscreen:"true", 
       
   260 			allowscriptaccess:"always",
       
   261 			wmode:"transparent"
       
   262 		}
       
   263 
       
   264 		var attributes = {
       
   265 			id:"Ldtplayer1",  
       
   266 			name:"Ldtplayer1"
       
   267 		}
       
   268 
       
   269 		swfobject.embedSWF("swf/player.swf", "ldtPlaceHolder", width, height, "9.0.115", false, flashvars, params, attributes);
       
   270 	}
       
   271 	
       
   272 
       
   273 
       
   274 
       
   275 </script>
       
   276 
       
   277 <!-- LOAD JSON AND PARSE IT -->
       
   278 <script type="text/javascript">
       
   279 	
       
   280 
       
   281 	var MyLdt;
       
   282 	var Durration;
       
   283 	var playerLdtWidth;
       
   284 	var playerLdtHeight;
       
   285 	
       
   286 	function loadJson (width,height,urlJson){
       
   287 		
       
   288 		playerLdtWidth=width;
       
   289 		playerLdtHeight=height;
       
   290 		
       
   291 		$jIRI.ajax({
       
   292 					  dataType: 'jsonp',
       
   293 					  url:urlJson,
       
   294 					  success: function(json){
       
   295 						
       
   296 						//alert("success !");
       
   297 					
       
   298 						
       
   299 					}
       
   300 					,error: function(data){
       
   301 						  alert("ERROR : "+data);
       
   302 					}		
       
   303 				  });	
       
   304 	}
       
   305 
       
   306 	function callbackLdts(json){
       
   307 		/* START PARSING ----------------------- */
       
   308 		/* metas , medias , annotation-types , annotations , lists , tags , views */
       
   309 		/* # fonction avec 1 seul  media et 1 seul annotation type  code a cleaner */
       
   310 		/* # créer le player 				   */
       
   311 		//$jIRI.each(json.medias, function(i,item) {
       
   312 		//});
       
   313 		$jIRI("<div></div>").appendTo("#output");
       
   314 		MyMedia = new  Media(json.medias[0].id,json.medias[0].url,json.medias[0]["dc:duration"],json.medias[0]['dc:title'],json.medias[0]['dc:description']);
       
   315 		MyMedia.createPlayer(playerLdtWidth,playerLdtHeight);
       
   316 
       
   317 		/* # créer lignes 				   */
       
   318 		/*$jIRI.each(json['annotation-types'], function(i,item) {
       
   319 		});*/	
       
   320 		MyLdt = new Ligne (json['annotation-types'][0].id,json['annotation-types'][0]['dc:title'],json['annotation-types'][0]['dc:description'],json.medias[0]["dc:duration"]);
       
   321 		//alert("duration : "+json.medias[0]["dc:duration"]);
       
   322 		
       
   323 		/* # créer les annotations 				   */
       
   324 		$jIRI.each(json.annotations, function(i,item) {
       
   325 
       
   326 			MyLdt.addAnnotation(
       
   327 						item.id,
       
   328 						item.begin,
       
   329 						item.end,
       
   330 						item.media,
       
   331 						item.content.title,
       
   332 						item.content.description,
       
   333 						item.content.color);
       
   334 		
       
   335 		});	
       
   336 		$jIRI.each(json.lists, function(i,item) {
       
   337 			trace("lists","");
       
   338 		});		
       
   339 		$jIRI.each(json.tags, function(i,item) {
       
   340 			trace("tags","");
       
   341 		});	
       
   342 		$jIRI.each(json.views, function(i,item) {
       
   343 			trace("views","");
       
   344 		});	
       
   345 		/* END PARSING ----------------------- */
       
   346 		
       
   347 	}
       
   348 	
       
   349 	function trace (msg,value){
       
   350 		$jIRI("<div>"+msg+" : "+value+"</div>").appendTo("#output");
       
   351 	}
       
   352 
       
   353 </script>
       
   354 
       
   355 <!-- INIT player LDT  -->
       
   356 <script type="text/javascript">
       
   357 
       
   358 	function playerLdt (width,height,file,divId){
       
   359 	
       
   360 		//$jIRI("#playerLdt").append("<div id=\"div1\">hello</div>");
       
   361 		
       
   362 		
       
   363 			$jIRI("#"+divId).append("<div id=\"ldtShow\">\n	<div id=\"ShowAnnotation\" class=\"demo\" >\n			<div id=\"ldtSaTitle\"></div>\n			<div id=\"ldtSaDescription\"></div>\n		</div>		<div id=\"ldtPlaceHolder\">\n			<a href=\"http://www.adobe.com/go/getflashplayer\">Get flash</a> to see this player	\n		</div>\n	</div>\n	<div id=\"controlerLdt\" class=\"demo\">\n		<div class=\"ldtControl1\" >\n			<button id=\"ldtCtrlPlay\" onclick=\"player.sendEvent('PLAY')\">Play</button>\n			<button id=\"ldtCtrlNext\" onclick=\"player.sendEvent('SEEK', currentPosition+10)\">next</button>\n		</div>\n		<div id=\"Annotations\" class=\"ui-slider\">\n			<div id=\"slider-range-min\"></div>\n		</div>\n		<div class=\"ldtControl2\">\n			<button id=\"ldtCtrlScreen\" onclick=\"player.fullscreen('true')\">Enlarge</button>\n			<button id=\"ldtCtrlSound\" onclick=\"player.sendEvent('MUTE')\">Sound</button>\n		</div>\n	</div>");
       
   364 			loadJson(width,height,file);
       
   365 	}
       
   366 	
       
   367 	
       
   368 	
       
   369 </script>
       
   370 
       
   371 <!-- API player -->
       
   372 <script type="text/javascript">
       
   373 
       
   374 	function APIplayer (){
       
   375 
       
   376 	}
       
   377 	
       
   378 </script>
       
   379 
       
   380 <!-- Class Media -->
       
   381 <script type="text/javascript">
       
   382 	/*
       
   383 		"http://advene.liris.cnrs.fr/ns/frame_of_reference/ms":"o=0",
       
   384 		"id":"kia_closeup",
       
   385 		"url":"D:/Thibaut/Outils_techno/IRI-LignesDeTemps/media/video/kia_closeup_BQ.flv",
       
   386 		"dc:creator":"tcavalie",
       
   387 		"dc:created":"2010-05-04T00:00:00",
       
   388 		"dc:contributor":"tcavalie",
       
   389 		"dc:modified":"2010-05-04T00:00:00",
       
   390 		"dc:creator.contents":"Abbas Kiarostami",
       
   391 		"dc:created.contents":"1990",
       
   392 		"dc:title":"Close Up is a very very long title",
       
   393 		"dc:description":"Analyse de Close Up",
       
   394 		"dc:duration":"689266"
       
   395 	*/
       
   396 	function Media (id,url,duration,title,description){
       
   397 		this.id 		 = id;
       
   398 		this.url 		 = url;
       
   399 		this.title 		 = title;
       
   400 		this.description = description;
       
   401 		this.duration 	 = duration;
       
   402 
       
   403 		this.lignes = new Array();
       
   404 		this.updatePlayer = updatePlayerMedia;
       
   405 		this.getDuration = getMediaDuration;
       
   406 		this.createPlayer = createPlayerMedia;
       
   407 		
       
   408 		trace("Media ID :",id);
       
   409 		trace("Media URL :",this.url);
       
   410 		trace("- content : color",url);
       
   411 		trace("- content : audio",title);
       
   412 	}
       
   413 	function createPlayerMedia(width,height){
       
   414 		createPlayer(width,height,this.url,this.duration);
       
   415 		createInterface(width,height,this.duration);
       
   416 	}
       
   417 	function updatePlayerMedia(){
       
   418 		
       
   419 	}
       
   420 	function getMediaDuration(){
       
   421 		return (this.duration);
       
   422 	}
       
   423 	function getMediaTitle(){
       
   424 		return (this.title);
       
   425 	}
       
   426 	
       
   427 </script>
       
   428 
       
   429 <!-- Class Ligne (annotationType) -->
       
   430 <script type="text/javascript">
       
   431 	/*
       
   432 		"id":"dp_1",
       
   433 		"dc:creator":"tcavalie",
       
   434 		"dc:created":"2010-04-04T19:09:44",
       
   435 		"dc:contributor":"perso",
       
   436 		"dc:modified":"15/2/2008",
       
   437 		"dc:title":"dqsdkljfh qklsdhf very very very long",
       
   438 		"dc:description":"sdfg sdfg sdfg sdfg"
       
   439 	*/
       
   440 	function Ligne (){
       
   441 		this.id 			= id;
       
   442 		this.title 			= title;
       
   443 		this.description 	= description;
       
   444 		this.annotations 	= new Array();
       
   445 		this.addAnnotation  = addAnnotationligne;
       
   446 		this.clickAnnotation= onClickLigneAnnotation;
       
   447 		this.checkTime 		= checkTimeLigne;
       
   448 	}
       
   449 	
       
   450 	function Ligne (id,title,description,duration){
       
   451 		this.id 		 = id;
       
   452 		this.title 		 = title;
       
   453 		this.description = description;
       
   454 		//
       
   455 		this.annotations = new Array();
       
   456 		this.addAnnotation = addLigneAnnotation;
       
   457 		this.checkTime 	= checkTimeLigne;
       
   458 		this.duration = duration;
       
   459 		trace("LIGNE  ","créer ");
       
   460 	}
       
   461 	
       
   462 	function addLigneAnnotation(id,begin,end,media,title,description,color){
       
   463 		var myAnnotation = new Annotation(id,begin,end,media,title,description,color,this.duration);
       
   464 		this.annotations.push(myAnnotation);
       
   465 		trace("LIGNE  ","add annotation ");
       
   466 	}
       
   467 	
       
   468 	function onClickLigneAnnotation(id){
       
   469 		player.sendEvent('SEEK', this.start);
       
   470 	}
       
   471 	
       
   472 	function searchLigneAnnotation(id){
       
   473 		/*for (){
       
   474 		}*/
       
   475 	}
       
   476 	
       
   477 	function listAnnotations(){
       
   478 	
       
   479 	}
       
   480 	
       
   481 	function checkTimeLigne(time){
       
   482 		var annotationTempo;
       
   483 		for (var i=0; i < this.annotations.length; ++i){
       
   484 			var annotationTempo = this.annotations[i];
       
   485 			//trace("check... ",time+" = "+annotationTempo.begin+" -- "+annotationTempo.end);
       
   486 			//if (time>annotationTempo.begin){
       
   487 			if (time>annotationTempo.begin/1000 && time<annotationTempo.end/1000){
       
   488 				//trace("check ",annotationTempo.begin+" "+annotationTempo.end +" "+annotationTempo.title);
       
   489 				$jIRI("#ldtSaTitle").text(annotationTempo.title);
       
   490 				$jIRI("#ldtSaDescription").text(annotationTempo.description);
       
   491 				break;
       
   492 			} 
       
   493 		}
       
   494 	}
       
   495 	
       
   496 </script>
       
   497 
       
   498 <!-- CLASSE Annotation -->
       
   499 <script type="text/javascript">
       
   500 	/*
       
   501 		"begin":"767",
       
   502 		"end":"785",
       
   503 		"id":"dp_1_sp_3",
       
   504 		"media":"kia_closeup",
       
   505 		"content": {
       
   506 						"mimetype":"application/x-ldt-structured",
       
   507 						"title":"mon titre",
       
   508 						"description":"ma description en &lt;b&gt;gras&lt;/b&gt; .",
       
   509 						"color":"16763904",
       
   510 						"audio":{"src":"","mimetype":"audio/mp3","href":""}
       
   511 					},
       
   512 		"meta":
       
   513 				{
       
   514 					"id-ref":"dp_1",
       
   515 					"dc:creator":"tcavalie",
       
   516 					"dc:created":"2010-04-04T19:09:44",
       
   517 					"dc:contributor":"perso",
       
   518 					"dc:modified":"9/10/2007"
       
   519 				}
       
   520 	*/
       
   521 	
       
   522 	function Annotation (){
       
   523 		this.id 			= null;
       
   524 		this.begin 			= null;
       
   525 		this.end 			= null;
       
   526 		this.media 			= null;
       
   527 		this.description	= null;
       
   528 		this.title 			= null;
       
   529 		this.color 			= null;
       
   530 		this.onRollOver 	= onRollOverAnnotation;
       
   531 		this.onClick 		= onClickAnnotation;
       
   532 		this.toolTip 		= rollOverAnnotation;
       
   533 		this.draw 			= drawAnnotation;
       
   534 		trace("annotation ","réussi")
       
   535 	}
       
   536 	
       
   537 	function Annotation (id,begin,end,media,title,description,color,duration){
       
   538 		this.id 			= id;
       
   539 		this.begin 			= begin;
       
   540 		this.end 			= end;
       
   541 		this.media 			= media;
       
   542 		this.description 	= description;
       
   543 		this.title 			= title;
       
   544 		this.color 			= title;
       
   545 		this.duration		= duration;
       
   546 		//
       
   547 		this.onRollOver 	= onRollOverAnnotation;
       
   548 		//this.onClick 		= onClickAnnotation;
       
   549 		this.toolTip 		= tootTipAnnotation;
       
   550 		this.draw 			= drawAnnotation;
       
   551 		//this.show 			= showAnnotationNotice;
       
   552 		// draw it 
       
   553 		this.draw();
       
   554 		
       
   555 		//
       
   556 		trace("Annotation created : ",id);
       
   557 	}
       
   558 	
       
   559 	function drawAnnotation (){
       
   560 		//alert (this.duration);
       
   561 		startPourcent = timeToPourcent(this.begin,this.duration); // temps du média 
       
   562 		endPourcent = timeToPourcent(this.end,this.duration)-startPourcent;
       
   563 				
       
   564 		$AnnotationTemplate = "<div title='"+this.title+"' 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;' onclick=\"player.sendEvent('SEEK', '"+Math.round(this.begin/1000)+"');$jIRI('#ShowAnnotation').slideDown().delay(5000).slideUp();\"  ></div> ";
       
   565 		
       
   566 
       
   567 		
       
   568 		$toolTipTemplate = "<div class='tooltip'>"
       
   569 							+"<div class='title'>"+this.title+"</div>"
       
   570 							+"<div class='time'>"+this.begin+" : "+this.end+"</div>"
       
   571 							+"<div class='description'>"+this.description+"</div>"
       
   572 							+"</div>";
       
   573 		
       
   574 		
       
   575 		$jIRI("<div>"+$AnnotationTemplate+"</div>").appendTo("#Annotations");
       
   576 		$jIRI("#"+this.id).tooltip({ effect: 'slide'});
       
   577 
       
   578 		trace(" ### ","ADD ANOTATION : "+this.begin+" "+this.end+" "+this.title+" | "+startPourcent+" | "+endPourcent+" | duration = "+this.duration);
       
   579 	}
       
   580 	
       
   581 	function tootTipAnnotation() {
       
   582 		// 1 chercher le div correspondant
       
   583 		// 2 y mettre les information
       
   584 		return this.color + ' ' + this.type + ' apple';
       
   585 	}
       
   586 	
       
   587 	function onRollOverAnnotation(){
       
   588 		this.tootTip();
       
   589 	}
       
   590 		
       
   591 	function timeToPourcent(time,timetotal){
       
   592 		return (parseInt(Math.round(time/timetotal*100)));
       
   593 	}
       
   594 		
       
   595 	<!-- ***************************************************************** -->
       
   596 	<!-- Class tracess -->
       
   597 	
       
   598 	function Tracer (){
       
   599 		
       
   600 	}
       
   601 	
       
   602 	function addTrace(){
       
   603 		
       
   604 	}
       
   605 	
       
   606 	
       
   607 	
       
   608 </script>
       
   609 
       
   610 
       
   611 </head>
       
   612 
       
   613 
       
   614 <!-- createPlayer -->
       
   615 
       
   616 <body >
       
   617 
       
   618 
       
   619 
       
   620 
       
   621 
       
   622 <div id="playerLdt"></div>
       
   623 <script  type="text/javascript">
       
   624 	//playerLdt(550,310, "js/cinelabModel_Peter.js","playerLdt");
       
   625 	playerLdt(550,310, "http://dev.prototype-w.com/wu.mu/cinelabModel_Peter.js","playerLdt");
       
   626 	//playerLdt(550,310, "http://dev.prototype-w.com/wu.mu/cinelabModelB.js","playerLdt");
       
   627 </script>
       
   628 
       
   629 
       
   630 <br/><br/><br/><br/><br/>
       
   631 	
       
   632 	<br/>
       
   633 	<!-- DEBUG  TESTS ET AUTRES -->
       
   634 	<div id="output" class="demo"></div>
       
   635 
       
   636 </body>
       
   637 </html>