title: Monitor youtube video playback time
body: <p>I have a youtube video in an iframe on a HTML page.
  I want to fire some event when the youtube video playback reaches 5 seconds.</p>
  
  <p>I am using <code>player.getCurrentTime()</code> method of youtube api.</p>
  
  <p>HTML code:</p>
  
  <pre><code>&lt;div&gt;&lt;iframe id="frameID" width="640" height="390" frameborder="0" title="YouTube video player" type="text/html" src="http://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"&gt;&lt;/iframe&gt;&lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>var player;
  function onYouTubeIframeAPIReady() {
  player = new YT.Player('frameID', {
      events: {
          'onReady': onPlayerReady,
          'onStateChange': stateChange
      }
  });
  }
  var playedFirstTime=0; //to check if the video is played first time
  function stateChange(evt) {
  
           if (evt.data == YT.PlayerState.PLAYING &amp;&amp; playedFirstTime==0) {
               playedFirstTime=1
          timestampReached(); //if video is played first time then call the method.
      }
  
  };
  function timestampReached()
  {
  
     var myVar= setInterval(function(){   
     if(player.getCurrentTime()&gt;5)   //checking the current time after each second
     {
         alert("reached");
         clearInterval(myVar);
  
     }
  },1000);
  
  }
  
  function onPlayerReady(event) {
  
  //    timestampReached();
  }
  </code></pre>
  
  <p>Currently I am showing the alert box if video playback reaches 5 seconds.</p>
  
  <p>The above code is working correctly but the problem is, here, I am checking the current time after each second till 5 seconds (or even more if video is paused before 5 seconds). This is increasing the overhead. What I want is, some way which can call a callback method after specified time has elapsed and I don't need to check for the time continuously.</p>