Question

Basically m trying to build a service where users a charged based on minutes of video consumed. However user would not billed if the video is buffered

So i need to calculate number of seconds the video is played. The counter should increment only if the video is played and not paused/buffered/stopped. Say if a user watches 5 mins for 5 times than the total counter should display 25 mins.

Here is the my code.. but the problem is that eventlistner fires in quick succession and counter gets incremented not in unproportionately to the video play time

Have a look at online running code here http://guwahaticity.com/vimeotest.html

Here is the code of the same

            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>   
        <script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>   

 <script type="text/javascript">
    var counter = 0;
    jQuery(document).ready(function() {

        var playerID = document.querySelector('iframe');

        $f(playerID).addEvent('ready', ready);

        function ready(playerID) {
            Froogaloop(playerID).addEvent('playProgress', playProgress);

        }

        function playProgress() {
            counter = counter + 1;
            $(".playp").html(counter);
        }

    });
</script>


    <iframe class="vimeo" id="player1" src="http://player.vimeo.com/video/3718294?api=1&player_id=player1" width="500" height="281" frameborder="0"></iframe>

    <hr>
    This video has been played for <div class="playp"></div> 

Answer 1

Seems like the playProgress event is fired more than once a second. What about increasing the counter only if the last event was fired more than a second ago, like this:

var last = new Date(0);

function playProgress() {

   Date now = new Date();

   if(now.getTime() - last.getTime() >= 1000){
       counter = counter + 1;
       last = now;
       $(".playp").html(counter);
   }
}