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

我有以下代码来检测用户是否空闲.在页面加载时,计时器将运行,如果用户空闲了特定的秒数,则计时器将暂停,如果用户处于活动状态,则计时器将恢复.我也有检测视频是否正在播放的代码,如果视频正在播放,计时器应该运行,如果视频停止/暂停,超时将运行并检测用户是否仍处于活动状态
问题是,即使正在播放视频,计时器也会暂停,并开始空闲.我想要的是当视频播放时,计时器应该计时到递增.
以下是我的代码:

选择 | 换行 | 行号
  1.     function setPlayingVideoToTrue(){playing_video = true;}
  2.  
  3.     function setPlayingVideoToFalse(){playing_video = false;}
  4.  
  5.     // check if a video iframe exists
  6.     var iframe_videos = $('body').find('iframe');
  7.  
  8.     if(iframe_videos.length > 0){
  9.     // create ready events for every iframe
  10.     iframe_videos.each(function(index){
  11.         // add a temporary id for the iframe
  12.         // append additional parameters to the end of the iframe's src
  13.         var temporary_player_id = 'iframe_player_'+ index;
  14.         var new_iframe_src = $(this).attr('src') +'?api=1&player_id='+ temporary_player_id;
  15.         $(this).attr('id', temporary_player_id);
  16.         $(this).attr('src', new_iframe_src);
  17.  
  18.         // add event listener for ready
  19.         $f(this).addEvent('ready', iframe_ready);
  20.     });
  21.  
  22.     // when a player is ready, add event listeners for play, pause, finish, and playProgress
  23.     function iframe_ready(player_id) {
  24.         $f(player_id).addEvent('play', setPlayingVideoToTrue);
  25.         $f(player_id).addEvent('playProgress', setPlayingVideoToTrue);
  26.         $f(player_id).addEvent('pause', setPlayingVideoToFalse);
  27.         $f(player_id).addEvent('finish', setPlayingVideoToFalse);
  28.     }
  29.     }
  30.  
  31.  
  32.     function start_idle_timer(){
  33.     var timer = 0;
  34.  
  35.     function increment_duration()
  36.     {    
  37.         if(isPaused === false)
  38.         {
  39.             timer++;
  40.         }
  41.  
  42.         // increment timer if video is playing
  43.         if(playing_video === true){
  44.             clearTimeout(idleTimer);
  45.             isPaused = false;
  46.         }
  47.  
  48.  
  49.         if(playing_video === false && isPaused === false){
  50.  
  51.             // stop timer if the user is idle for 3 minutes
  52.             var idleTimer = setTimeout(function(){
  53.                 // console.log('idle');
  54.                 clearInterval(check_time);
  55.                 isPaused = true;
  56.  
  57.                 // a modal will apper to inform that user is on idle state
  58.                 $('#linkage').trigger('click');
  59.  
  60.                 var modal_timer = 0;
  61.                 // timer for modal idle timer
  62.                 continue_modal_timer = setInterval(function(){
  63.                     modal_timer++;
  64.  
  65.                     inactivity_timer = modal_timer;
  66.                     if(modal_timer == 60)
  67.                     {
  68.                         clearInterval(continue_modal_timer);
  69.                         clearTimeout(idleTimer);    
  70.                     }
  71.                 }, 1000)    
  72.             }, 10000);
  73.         }
  74.  
  75.         // bind to all elements on DOM possible events indicating the user is active
  76.         $('*').bind('mousemove click mouseup mousedown keydown keypress keyup submit change mouseenter scroll resize dblclick', function () {
  77.                clearTimeout(idleTimer);
  78.             isPaused = false;
  79.         });
  80.     }
  81.  
  82.     // initialize the interval
  83.     check_time = setInterval(increment_duration, 1000); 
  84.     }
  85.  
  86.     // check if start_timer is present from the loading page to record the time duration of the user
  87.     if($('.start_timer').length > 0){    
  88.     start_idle_timer();
  89.     }

标签: Javascript

添加新评论