Froogaloop get reference of event function

Question

I am using the example presented in https://developer.vimeo.com/player/js-api :

Javascript + HTML:

script.js:

 $(function() { var iframe = $('#player1')[0]; var player = $f(iframe); var status = $('.status'); // When the player is ready, add listeners for pause, finish, and playProgress player.addEvent('ready', function() { status.text('ready'); player.addEvent('pause', onPause); player.addEvent('finish', onFinish); player.addEvent('playProgress', onPlayProgress); }); // Call the API when a button is pressed $('button').bind('click', function() { player.api($(this).text().toLowerCase()); }); function onPause(id) { status.text('paused'); } function onFinish(id) { status.text('finished'); } function onPlayProgress(data, id) { status.text(data.seconds + 's played'); } }); 

 <script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script> <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script> <iframe id="player1" src="https://player.vimeo.com/video/76979871?api=1&player_id=player1" width="630" height="354" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <div> <button>Play</button> <button>Pause</button> <p>Status: <span class="status">&hellip;</span></p> </div> <script src="script.js"></script> 

I want to be able, at some later time, to add instructions to an event. Say, I want to add alert('123') to 'pause' event:

oldPauseEvent = player.get('pause'); //I made it up obviously..
player.addEvent('pause',newPuase);

function newPause(id){
    // do old stuff of 'pause' event. Namely onPause()
    oldPauseEvent();  
    // do new added stuff 
    alert('123');
}

I can't seem to be able to find where or how the events are stored in player . I couldn't find anything helpful in the API documentation in Viemo website.

Any help is very much appreciated!

Answer 1

Add an ID to the pause button. The Froogaloop api method getDuration() is returned as an alert.

Useful links:

Return duration from a function

Further explanation of callback method

Method: seekTo, which does not have a return value

 $(function() { var iframe = $('#player1')[0]; var player = $f(iframe); var status = $('.status'); // When the player is ready, add listeners for pause, finish, and playProgress player.addEvent('ready', function() { status.text('ready'); player.addEvent('pause', onPause); player.addEvent('finish', onFinish); player.addEvent('playProgress', onPlayProgress); }); // Call the API when a button is pressed $('button').bind('click', function() { player.api($(this).text().toLowerCase()); }); // On pause button click, call getDuration(). // Get Returned duration via _callback and alert it $('#pauseID').bind('click', function() { getDuration(function(duration) { alert('Video Duration: ' + duration); }); }); // Call the API when the pause button is pressed. // getDuration() is a froogaloop api method that has a return value. function getDuration(_callback) { player.api('getDuration', function(dur) { _callback(dur); }); } function onPause(id) { status.text('paused'); } function onFinish(id) { status.text('finished'); } function onPlayProgress(data, id) { status.text(data.seconds + 's played'); } }); 

 <script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script> <iframe id="player1" src="https://player.vimeo.com/video/76979871?api=1&player_id=player1" width="630" height="354" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <div> <button>Play</button> <button id='pauseID'>Pause</button> <p>Status: <span class="status">&hellip;</span></p> </div>