视频播放时javascript增量setInteval计数器

问题描述

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:

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();
    }

推荐答案

这篇关于视频播放时javascript增量setInteval计数器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！