2015-11-03 91 views
1

我使用https://developer.vimeo.com/player/js-api给出的例子的参考:Froogaloop获得事件函数

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>

我希望能够,在稍后的时间,为事件添加说明。 说,我要添加警报(“123”),以“暂停”事件:

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

我似乎无法能够找到地方或事件是如何存储在player。我在Viemo网站的API文档中找不到任何有用的信息。

任何帮助非常感谢!

回答

0

将ID添加到暂停按钮。 Froogaloop API方法getDuration()作为警报返回。

相关链接:

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>