javascript increment setInteval counter while video is playing

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • lorwynz11
    New Member
    • Jun 2015
    • 1

    javascript increment setInteval counter while video is playing

    I have the following code that detect if user is idle or not. On page load, a timer will run and if the user is idle for a certain of seconds the timer will pause and resume if the user is active. And I have also codes that detect if video is playing, if the video is playing timer should run and if the video is stop/pause a timeout will run and detect if the user is still active

    The problem is even if video is playing, the timer paused and it will start to idle. What I want is when video is playing timer should countinue to increment.

    Heres my code:


    Code:
        function setPlayingVideoToTrue(){playing_video = true;}
    
        function setPlayingVideoToFalse(){playing_video = false;}
    
        // check if a video iframe exists
        var iframe_videos = $('body').find('iframe');
    
        if(iframe_videos.length > 0){
    	// create ready events for every iframe
    	iframe_videos.each(function(index){
    		// add a temporary id for the iframe
    		// append additional parameters to the end of the iframe's src
    		var temporary_player_id = 'iframe_player_'+ index;
    		var new_iframe_src = $(this).attr('src') +'?api=1&player_id='+ temporary_player_id;
    		$(this).attr('id', temporary_player_id);
    		$(this).attr('src', new_iframe_src);
    
    		// add event listener for ready
    		$f(this).addEvent('ready', iframe_ready);
    	});
    
    	// when a player is ready, add event listeners for play, pause, finish, and playProgress
    	function iframe_ready(player_id) {
    		$f(player_id).addEvent('play', setPlayingVideoToTrue);
    		$f(player_id).addEvent('playProgress', setPlayingVideoToTrue);
    		$f(player_id).addEvent('pause', setPlayingVideoToFalse);
    		$f(player_id).addEvent('finish', setPlayingVideoToFalse);
        }
        }
    
    
        function start_idle_timer(){
    	var timer = 0;
    	
    	function increment_duration()
    	{	
    		if(isPaused === false)
    		{
    			timer++;
    		}
    		
    		// increment timer if video is playing
    		if(playing_video === true){
    			clearTimeout(idleTimer);
    			isPaused = false;
    		}
    
    
    		if(playing_video === false && isPaused === false){
    
    			// stop timer if the user is idle for 3 minutes
    		    var idleTimer = setTimeout(function(){
    		    	// console.log('idle');
    		    	clearInterval(check_time);
    		    	isPaused = true;
    
    		    	// a modal will apper to inform that user is on idle state
    		    	$('#linkage').trigger('click');
    		    	
    		    	var modal_timer = 0;
    		    	// timer for modal idle timer
    		    	continue_modal_timer = setInterval(function(){
    		    		modal_timer++;
    
    		    		inactivity_timer = modal_timer;
    		    		if(modal_timer == 60)
    		    		{
    		    			clearInterval(continue_modal_timer);
    		    			clearTimeout(idleTimer);	
    		    		}
    		    	}, 1000)	
    			}, 10000);
    		}
    
    		// bind to all elements on DOM possible events indicating the user is active
    		$('*').bind('mousemove click mouseup mousedown keydown keypress keyup submit change mouseenter scroll resize dblclick', function () {
    		   	clearTimeout(idleTimer);
    		    isPaused = false;
    		});
    	}
    
    	// initialize the interval
    	check_time = setInterval(increment_duration, 1000); 
        }
    
        // check if start_timer is present from the loading page to record the time duration of the user
        if($('.start_timer').length > 0){	
    	start_idle_timer();
        }
    Last edited by Rabbit; Jun 23 '15, 11:10 PM. Reason: Please use [code] and [/code] tags when posting code or formatted data.
Working...