src/js/LdtPlayer.js
branchpopcorn-port
changeset 55 a5440e1a18a8
parent 43 59a78986f19e
child 56 72180e18b021
equal deleted inserted replaced
54:bbcf7423f543 55:a5440e1a18a8
     1 /* 	
     1 /* 	
     2  *	Copyright 2010 Institut de recherche et d'innovation 
     2  *	Copyright 2010 Institut de recherche et d'innovation 
     3  *	contributor(s) : Samuel Huron 
     3  *	contributor(s) : Samuel Huron 
     4  *	Use Silvia Pfeiffer 's javascript mediafragment implementation
     4  *	Use Silvia Pfeiffer 's javascript mediafragment implementation
     5  *
     5  *
     6  *	contact@iri.centrepompidou.fr
     6  *	contact@iri.centrepompidou.fr
   168 				if ( $.browser.msie ) {
   168 				if ( $.browser.msie ) {
   169 					$( '.dynamic_css' ).clone().appendTo( 'head' );
   169 					$( '.dynamic_css' ).clone().appendTo( 'head' );
   170 				}
   170 				}
   171 				
   171 				
   172 				//__IriSP.trace("main","ready createMyHtml");
   172 				//__IriSP.trace("main","ready createMyHtml");
   173 				
       
   174 				IriSP.createPlayerChrome();
   173 				IriSP.createPlayerChrome();
   175 				
   174 				
   176 				/******* Load Metadata *******/
   175 				/******* Load Metadata *******/
   177 				IriSP.getMetadata();
   176 				IriSP.getMetadata();
   178 			
   177 			
   247 
   246 
   248 	//__IriSP.trace("__IriSP.APIplayer.prototype.APIpReady"," __IriSP.createInterface");
   247 	//__IriSP.trace("__IriSP.APIplayer.prototype.APIpReady"," __IriSP.createInterface");
   249 	IriSP.createInterface( this.width, this.height, this.duration );
   248 	IriSP.createInterface( this.width, this.height, this.duration );
   250 	//__IriSP.trace("__IriSP.APIplayer.prototype.APIpReady","END  __IriSP.createInterface");
   249 	//__IriSP.trace("__IriSP.APIplayer.prototype.APIpReady","END  __IriSP.createInterface");
   251 
   250 
       
   251   /*
   252 	// hashchange EVENT
   252 	// hashchange EVENT
   253 	if ( window.addEventListener ){
   253 	if ( window.addEventListener ){
   254 	
   254 	
   255 	// for firefox  hashchange EVENT
   255 	// for firefox  hashchange EVENT
   256 		window.addEventListener( "hashchange", function() {
   256 		window.addEventListener( "hashchange", function() {
   276 		  } else {
   276 		  } else {
   277 			IriSP.MyApiPlayer.hashchangeUpdate = null;
   277 			IriSP.MyApiPlayer.hashchangeUpdate = null;
   278 		  }
   278 		  }
   279 		}, false);
   279 		}, false);
   280 	}
   280 	}
   281 	
   281 	*/
   282 	// Search
   282 	// Search
   283 	//__IriSP.jQuery("#LdtSearchInput").change(function() {__IriSP.Search(this.value);});
   283 	//__IriSP.jQuery("#LdtSearchInput").change(function() {__IriSP.Search(this.value);});
   284 	//__IriSP.jQuery("#LdtSearchInput").live('change', function(event) {__IriSP.Search(this.value);}); 
   284 	//__IriSP.jQuery("#LdtSearchInput").live('change', function(event) {__IriSP.Search(this.value);}); 
   285 	IriSP.jQuery( "#LdtSearchInput" ).keydown( function() { IriSP.Search( this.value );} );
   285 	IriSP.jQuery( "#LdtSearchInput" ).keydown( function() { IriSP.Search( this.value );} );
   286 	IriSP.jQuery("#LdtSearchInput").keyup( function() { IriSP.Search( this.value );} );
   286 	IriSP.jQuery("#LdtSearchInput").keyup( function() { IriSP.Search( this.value );} );
   290 __IriSP.APIplayer.prototype.pause = function(){
   290 __IriSP.APIplayer.prototype.pause = function(){
   291 	this.hashchangeUpdate = true;
   291 	this.hashchangeUpdate = true;
   292 	IriSP.player.sendEvent( 'PAUSE' );
   292 	IriSP.player.sendEvent( 'PAUSE' );
   293 };
   293 };
   294 
   294 
   295 __IriSP.APIplayer.prototype.play  = function() {
   295 __IriSP.APIplayer.prototype.play  = function() {  
   296 	this.hashchangeUpdate = true;
   296 	this.hashchangeUpdate = true;  
   297 	//__IriSP.trace("__IriSP.config.player.type",__IriSP.config.player.type);
   297   var status = IriSP.player.media.paused;
   298 	if( IriSP.config.player.type=='jwplayer' ){
   298       
   299 	
   299   if ( status == true ){        
   300 		IriSP.player.sendEvent( 'PLAY' );
   300     IriSP.player.play();
   301 		
   301   } else {
   302 	} else if(IriSP.config.player.type == 'dailymotion' 
   302     IriSP.player.pause();
   303 			  || IriSP.config.player.type == 'youtube' ) {
   303   }
   304 			  
       
   305 		var status = IriSP.player.getPlayerState();
       
   306 		IriSP.trace( "__IriSP.APIplayer.prototype.play.status", status);
       
   307 		if ( status != 1 ){
       
   308 			IriSP.player.playVideo();
       
   309 		} else {
       
   310 			IriSP.player.pauseVideo();
       
   311 		}
       
   312 	}
       
   313 };
   304 };
   314 
   305 
   315 __IriSP.APIplayer.prototype.mute  = function() {
   306 __IriSP.APIplayer.prototype.mute  = function() {
   316 	IriSP.player.sendEvent( 'MUTE' );
   307 	IriSP.player.sendEvent( 'MUTE' );
   317 	
   308 	
   356 	
   347 	
   357 	if( time==0 ) { time=1; }
   348 	if( time==0 ) { time=1; }
   358 	
   349 	
   359 	IriSP.trace( "__IriSP.APIplayer.prototype.seek", time );
   350 	IriSP.trace( "__IriSP.APIplayer.prototype.seek", time );
   360 	
   351 	
   361 	if( IriSP.config.player.type=='jwplayer') {
   352 	IriSP.player.currentTime( time );	
   362 		//__IriSP.MyApiPlayer.play()
   353 	
   363 		IriSP.player.sendEvent( 'SEEK', time );
   354 	//this.changePageUrlOffset( time );
   364 	} else if( IriSP.config.player.type=='dailymotion'
       
   365 			|| IriSP.config.player.type=='youtube' ) {
       
   366 		IriSP.player.seekTo( time );
       
   367 	}
       
   368 	
       
   369 	this.changePageUrlOffset( time );
       
   370 };
   355 };
   371 
   356 
   372 __IriSP.APIplayer.prototype.update = function (time) {
   357 __IriSP.APIplayer.prototype.update = function (time) {
   373 	
   358 	
   374 	if( time != 0 ) {
   359 	if( time != 0 ) {
   429 IriSP.firstplay	 		= false;
   414 IriSP.firstplay	 		= false;
   430 
   415 
   431 
   416 
   432 
   417 
   433 IriSP.createPlayer = function ( url, streamerPath ) {
   418 IriSP.createPlayer = function ( url, streamerPath ) {
       
   419   IriSP.jQuery("#Ldt-PlaceHolder").html(""); // clear the message "you need flash to display this player
       
   420   
   434 	if( IriSP.config.player.type=='dailymotion' ) {
   421 	if( IriSP.config.player.type=='dailymotion' ) {
       
   422   
   435 		IriSP.config.player.src = IriSP.config.player.src+"&chromeless=1&enableApi=1";
   423 		IriSP.config.player.src = IriSP.config.player.src+"&chromeless=1&enableApi=1";
   436 	} else if ( IriSP.config.player.type=='youtube' ){
   424 	
   437 		IriSP.config.player.src = IriSP.config.player.src+"&enablejsapi=1&version=3";
   425   } else if ( IriSP.config.player.type=='youtube' ) {
   438 	}
   426 	
   439 	
   427     
   440 	IriSP.trace( "__IriSP.createPlayer", "start" );			
   428     templ = "width: {{width}}px; height: {{height}}px; margin-bottom: 5px;";
   441 	
   429     var str = Mustache.to_html(templ, {width: IriSP.config.gui.width, height: IriSP.config.gui.height});    
   442 	IriSP.myUrlFragment = url.split( streamerPath );	
   430 
   443 	
   431     // Popcorn.youtube wants us to specify the size of the player in the style attribute of its container div.
   444 	var configTemp = IriSP.jQuery.extend( true, {}, IriSP.config );
   432     IriSP.jQuery("#Ldt-PlaceHolder").attr("style", str);
   445 	configTemp.player.flashvars.autostart =	"true";
   433     
   446 	configTemp.player.flashvars.streamer =	streamerPath;
   434     IriSP.player = Popcorn.youtube( '#Ldt-PlaceHolder', IriSP.config.player.src, {"controls": 0} );    
   447 	configTemp.player.flashvars.file =	IriSP.myUrlFragment[1];
   435     
   448 	
   436 	} else if ( IriSP.config.player.type=='jwplayer' ) {
   449 	var flashvars 		  = configTemp.player.flashvars;
   437     
   450 	var params 			  = configTemp.player.params;
   438     // for some reason, a stream won't play when it's display: none;
   451 	var attributes 		  = configTemp.player.attributes;
   439     IriSP.jQuery("#Ldt-PlaceHolder").attr("style", "visibility: hidden;");
   452 	
   440     IriSP.player = Popcorn.jwplayer( '#Ldt-PlaceHolder', "", 
   453 	IriSP.trace(
   441                                      {file : "video/franceculture/franceculture_retourdudimanche20100620.flv", streamer: streamerPath, flashplayer : IriSP.config.player.src,
   454 				  "__IriSP.createPlayer",
   442                                      live: true, "controlbar.position" : "none", height: IriSP.config.gui.height, width: IriSP.config.gui.width, provider: "rtmp"} ); 
   455 				  "SWFOBJECT src:"+
   443     
   456 				  IriSP.config.player.src+
   444     /*
   457 				  " " +IriSP.config.gui.width+
   445     IriSP.player = Popcorn.jwplayer( '#Ldt-PlaceHolder', "", 
   458 				  " " +IriSP.config.gui.height
   446                                      {file : "/mdp/video.mp4", flashplayer : IriSP.config.player.src,
   459 				  );
   447                                      "controlbar.position" : "none", height: 300, width: 360, "duration" : 18} );
   460 	
   448     */                              
   461 	swfobject.embedSWF(
   449   }
   462 						IriSP.config.player.src,
   450  
   463 						"Ldt-PlaceHolder",
   451   IriSP.player.listen("timeupdate", IriSP.positionListener);
   464 						IriSP.config.gui.width,
   452   IriSP.player.listen("volumechange", IriSP.volumeListener);
   465 						IriSP.config.gui.height,
   453   IriSP.MyApiPlayer.ready();
   466 						"9.0.115", // FIXME : de-hardcode version ?
       
   467 						false,
       
   468 						flashvars,
       
   469 						params,
       
   470 						attributes
       
   471 					);
       
   472 	
       
   473 	// need a methode to 
       
   474 	// re execute if this swf call does'nt work 
       
   475 };
   454 };
   476 
   455 
   477 
   456 
   478 /* jw player api */
   457 /* jw player api */
   479 IriSP.playerReady  = function (thePlayer) {
   458 IriSP.playerReady  = function (thePlayer) {
   539 		//changePageUrlOffset(currentPosition);
   518 		//changePageUrlOffset(currentPosition);
   540 	}
   519 	}
   541 	
   520 	
   542 };
   521 };
   543 
   522 
   544 IriSP.positionListener = function(obj) { 
   523 IriSP.positionListener = function() {  	
   545 	//__IriSP.trace("__IriSP.positionListener",obj.position);
   524 	IriSP.currentPosition = IriSP.player.currentTime(); 
   546 	IriSP.currentPosition = obj.position; 
   525   
   547 	var tmp = document.getElementById( "posit" );
   526 	var tmp = document.getElementById( "posit" );
   548 	if (tmp) { tmp.innerHTML = "position: " + IriSP.currentPosition; }
   527 	if (tmp) { tmp.innerHTML = "position: " + IriSP.currentPosition; }
   549 	IriSP.jQuery( "#slider-range-min" ).slider( "value", obj.position);
   528 	IriSP.jQuery( "#slider-range-min" ).slider( "value", IriSP.currentPosition);
   550 	IriSP.jQuery( "#amount" ).val(obj.position+" s");
   529 	IriSP.jQuery( "#amount" ).val(IriSP.currentPosition+" s");
   551 	// display annotation 
   530 	// display annotation 
   552 	IriSP.MyLdt.checkTime( IriSP.currentPosition );
   531 	IriSP.MyLdt.checkTime( IriSP.currentPosition );
   553 	
   532 	
   554 };
   533 };
   555 
   534 
   556 IriSP.volumeListener   = function (obj) { 
   535 IriSP.volumeListener   = function (obj) { 
   557 	IriSP.currentVolume = obj.percentage; 
   536 	IriSP.currentVolume = obj.volume; 
   558 	var tmp = document.getElementById("vol");
   537 	var tmp = document.getElementById("vol");
   559 	if (tmp) { tmp.innerHTML = "volume: " + IriSP.currentVolume; }
   538 	if (tmp) { tmp.innerHTML = "volume: " + IriSP.currentVolume; }
   560 };
   539 };
   561 
   540 
   562 
   541 
   600 	// afficher annotation 
   579 	// afficher annotation 
   601 	/*__IriSP.MyLdt.checkTime(__IriSP.currentPosition);
   580 	/*__IriSP.MyLdt.checkTime(__IriSP.currentPosition);
   602 	*/
   581 	*/
   603 	
   582 	
   604 	setTimeout( "__IriSP.DailymotionPositionListener()", 10 );
   583 	setTimeout( "__IriSP.DailymotionPositionListener()", 10 );
   605 };
       
   606 
       
   607 /* youtube api 	*/
       
   608 onYouTubePlayerReady= function (playerid){
       
   609 
       
   610 	var url = document.location.href;
       
   611 	var time = IriSP.retrieveTimeFragment( url );
       
   612 	IriSP.player = document.getElementById( IriSP.config.player.attributes.id );
       
   613 	IriSP.startPosition = time;
       
   614 	
       
   615 	IriSP.MyApiPlayer.ready( IriSP.player );
       
   616 	
       
   617 	IriSP.MyApiPlayer.seek( time );
       
   618 	IriSP.MyApiPlayer.play();
       
   619 	
       
   620 	
       
   621 	IriSP.YouTubeAddListeners();	
       
   622 	IriSP.trace( "onYouTubePlayerReady=", time);
       
   623 	//__IriSP.MyApiPlayer.ready(playerid);
       
   624 };
       
   625 
       
   626 IriSP.YouTubeAddListeners = function () {
       
   627 	if ( IriSP.player ) { 
       
   628 		IriSP.trace( "__IriSP.addListeners", "ADD  Listener " );
       
   629 		IriSP.player.addEventListener( "onStateChange", "__IriSP.YouTubeStateMonitor" );
       
   630 		setTimeout( "__IriSP.YouTubePositionListener()", 100 );
       
   631 		
       
   632 		/* FIXME : works only with jwplayer */
       
   633 		IriSP.player.addModelListener( "VOLUME", "__IriSP.volumeListener" );
       
   634 		//__IriSP.player.addModelListener('STATE', '__IriSP.stateMonitor');
       
   635 	} else {
       
   636 	}
       
   637 };
       
   638 
       
   639 IriSP.YouTubePositionListener = function() { 
       
   640 	
       
   641 	IriSP.currentPosition = IriSP.player.getCurrentTime();
       
   642 	//__IriSP.trace("__IriSP.YouTubePositionListener",__IriSP.currentPosition);
       
   643 	//__IriSP.trace("__IriSP.currentPosition",__IriSP.currentPosition);
       
   644 	
       
   645 	IriSP.MyLdt.checkTime(IriSP.currentPosition);
       
   646 	IriSP.jQuery( "#slider-range-min" ).slider( "value", IriSP.currentPosition );
       
   647 	IriSP.jQuery( "#amount" ).val( IriSP.currentPosition+" s" );
       
   648 	// afficher annotation 
       
   649 	IriSP.MyLdt.checkTime( IriSP.currentPosition );
       
   650 	
       
   651 	
       
   652 	setTimeout( "__IriSP.YouTubePositionListener()", 10 );
       
   653 };
       
   654 
       
   655 IriSP.YouTubeStateMonitor = function (obj) { 
       
   656 	IriSP.player.addModelListener( '__IriSP.YouTubeStateMonitor ', newstate );
       
   657 	//alert(newstate+" "+obj.newstate);
       
   658 	 if(newstate == '2') {
       
   659 		IriSP.trace("__IriSP.stateMonitor","PAUSE");
       
   660 		IriSP.MyApiPlayer.changePageUrlOffset( IriSP.currentPosition );
       
   661 		
       
   662 	} else if (newstate == '1' || newstate == '1') {
       
   663 		// une fois la video prete a lire  la déplacer au bon timecode 
       
   664 		if( IriSP.startPosition!=null ) {
       
   665 			IriSP.MyApiPlayer.update( IriSP.startPosition );
       
   666 			IriSP.startPosition = null;
       
   667 		}
       
   668 	} else if (newstate == '3'){
       
   669 		IriSP.trace("__IriSP.stateMonitor","BUFFERING : ");
       
   670 		//changePageUrlOffset(currentPosition);
       
   671 	}
       
   672 	
       
   673 };
   584 };
   674 
   585 
   675 
   586 
   676 /* 	utils */
   587 /* 	utils */
   677 // code from http://stackoverflow.com/questions/822452/strip-html-from-text-javascript
   588 // code from http://stackoverflow.com/questions/822452/strip-html-from-text-javascript
   851 };
   762 };
   852 
   763 
   853 __IriSP.Ligne.prototype.nextAnnotation = function () {
   764 __IriSP.Ligne.prototype.nextAnnotation = function () {
   854 	
   765 	
   855 	var annotationCibleNumber = this.numAnnotation(this.annotationOldRead)+1;
   766 	var annotationCibleNumber = this.numAnnotation(this.annotationOldRead)+1;
   856 	var annotationCible = this.annotations[annotationCibleNumber];
   767 	var annotationCible = this.annotations[annotationCibleNumber];  
   857 
   768   
   858 	if( annotationCibleNumber<this.annotations.length-1 ){
   769 	if( annotationCibleNumber<this.annotations.length-1 ){
   859 		IriSP.player.sendEvent( 'SEEK', annotationCible.begin/1000 );
   770 		IriSP.player.currentTime(annotationCible.begin/1000);
   860 		IriSP.trace( "LIGNE  ", "| next = "+annotationCibleNumber+" - "+this.annotations.length+" | seek :"+annotationCible.begin/1000);
   771 		IriSP.trace( "LIGNE  ", "| next = "+annotationCibleNumber+" - "+this.annotations.length+" | seek :"+annotationCible.begin/1000);
   861 	} else {
   772 	} else {    
   862 		IriSP.player.sendEvent( 'SEEK', this.annotations[0].begin/1000);
   773 		IriSP.player.currentTime(this.annotations[0].begin/1000);
   863 	}
   774 	}
   864 		
   775 		
   865 };
   776 };
   866 
   777 
   867 __IriSP.Ligne.prototype.numAnnotation = function (annotationCible){
   778 __IriSP.Ligne.prototype.numAnnotation = function (annotationCible){
   870 			return i;
   781 			return i;
   871 		}
   782 		}
   872 	}
   783 	}
   873 };
   784 };
   874 
   785 
   875 __IriSP.Ligne.prototype.checkTime = function(time){
   786 __IriSP.Ligne.prototype.checkTime = function(time){	
   876 	
       
   877 	var annotationTempo = -1;
   787 	var annotationTempo = -1;
   878 	//__IriSP.trace("__IriSP.Ligne.prototype.checkTimeLigne",time);
   788 	//__IriSP.trace("__IriSP.Ligne.prototype.checkTimeLigne",time);
   879 	//__IriSP.trace("__IriSP.Ligne.prototype.checkTimeLigne",this.annotations.length);
   789 	//__IriSP.trace("__IriSP.Ligne.prototype.checkTimeLigne",this.annotations.length);
   880 	
   790 	
   881 	for (var i=0; i < this.annotations.length; ++i){
   791 	for (var i=0; i < this.annotations.length; ++i){