Vimeo API 触发事件答案

【问题标题】：Vimeo API Trigger EventVimeo API 触发事件
【发布时间】：2013-12-04 04:18:00
【问题描述】：

我们正在使用 Vimeo 托管公司培训视频，想知道是否有办法使用 API 在播放完成后触发事件？！.. 我们正在尝试在用户完全观看培训材料时进行记录.

欢迎提出任何建议。提前谢谢你。

【问题讨论】：

【解决方案1】：

我正在使用 Vimoe player.js

<script src="https://player.vimeo.com/api/player.js"></script>

下面是我还集成到网站上的代码，以了解有多少登录用户观看了完整的视频。

player.on('ended', function(){ 
   // Video Finished 
    // ajax call for custom event in WordPress
    $.ajax({
            url : '<?php echo admin_url("admin-ajax.php" ) ?>',
            data : {
                action: "create_update_user",
                user_id : "<?php echo $user->ID; ?>",
                post_id : "<?php echo get_the_ID(); ?>",
                status : 'complete' },
            dataType : "post",
            type: "post",
            success: function(response){
            }
     });

希望它有用，因为 player.js 比 froogaloop2.min.js 更有用

谢谢

【讨论】：

【解决方案2】：

我将它设置为我的服务器上的一个页面，它可以工作。视频播放器播放 3 秒后，出现 You just made my function run 字样。出现在标签内。

我已经包含了完整的页面代码——大部分 javascript 来自 Vimeo API 示例，您不需要它。

我遇到了一些问题 - 我无法让它在 Jquery 1.10.X 上运行 - 看起来这可能只适用于 jquery 1.7.2。

另请注意，一旦元素显示，它就会保持显示 - 所以如果你想让它在玩家倒带播放器时再次隐藏......你必须内置它，可能使用“else”语句.

最后，我只在 Chrome 中对此进行了测试，因此在投入生产之前请先咨询您当地的 Internet Exploder。

<html xmlns="http://www.w3.org/1999/xhtml">
<meta name="viewport" content="width = device-width, initial-scale = 1.0" />

<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>
</head>
<iframe id="player1" src="http://player.vimeo.com/video/27855315?api=1&player_id=player1" width="400" height="225" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

<p>Video status: <span class="status">...</span></p>
<p><button>Play</button> <button>Pause</button></p>
<h3 id="show"></h3><!-- thats where the message will show -->
<script>
jQuery(document).ready(function($) { // WordPress needs jquery like this...
var iframe = $('#player1')[0],
    player = $f(iframe),
    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');
    var time = data.seconds; //I added this var and the little if below...that's it.
    if (time > 3) {
    show.innerHTML = "You just made my function run."; }
}
// add an appropriate event listener


});
</script>
</html>

【讨论】：

【解决方案3】：

Vimeo 播放器会触发许多不同的 JavaScript 事件。完成是这些事件之一。你可以在这里找到更多信息：https://developer.vimeo.com/player/js-api#events

【讨论】：