Froogaloop获取事件功能的参考

时间:2015-11-03 11:33:09

标签: javascript jquery vimeo-api vimeo-player froogaloop

我正在使用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>
&#13;
&#13;
&#13;

我希望稍后能够向事件添加指令。 说,我想添加提醒(&#39; 123&#39;)以暂停&#39;事件:

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文档中找到任何有用的信息。

非常感谢任何帮助!

1 个答案:

答案 0 :(得分:0)

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

有用的链接:

Return duration from a function

Further explanation of callback method

Method: seekTo, which does not have a return value

&#13;
&#13;
$(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');
    }
});
&#13;
<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>
&#13;
&#13;
&#13;