Vimeo onFinish 事件的简单示例答案

【问题标题】：Simple example of Vimeo onFinish EventVimeo onFinish 事件的简单示例
【发布时间】：2012-01-16 07:02:26
【问题描述】：

我尝试了几个来自 vimeo 和其他网站的示例，用于在 iframe 嵌入 vimeo 视频停止播放时触发 JavaScript 事件。

我尝试的任何方法似乎都不起作用！

有没有人为 iframe vimeo 播放器提供最简单的 JavaScript onFinish 事件版本？

示例页面是www.armourylondon.co.uk/work.php - 单击视频缩略图会为 div 设置动画，然后使用 Ajax 加载到播放器中。我正在为 ajax 和动画使用原型/Scriptaculous 框架。

我已经包含了 froogaloop js，正如我所说，我已经从 Stack Overflow、vimeo 的 API 示例和其他网站中遵循了许多示例，但没有一个工作 - 至少不适合我！

我所需要的只是让某人在视频播放完毕后显示一个很好的旧 Hello World 警报 - 我可以从那里完成剩下的工作！我已经在这里坐了三个小时，试图获得一个简单的提醒来闪现，但可惜无济于事！

运行 thumbnail-to-vimeo 动画和加载的 Js 直接在文档的头部 - 注释 // Vimeo Auto close after finish 下的 ajax 更新程序的 onComplete 函数内的代码是我尝试过的最后一个版本那没有用。我一直将代码放在那里，因为 iframe 在 Dom 中不存在，直到 Ajax 更新程序将视频加载到单击缩略图时增长的 div 中。

【问题讨论】：

标签： javascript dom-events vimeo

【解决方案1】：

我最终使用了这段代码 - 今天早上 9 点左右让它工作了！

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

function ready(player_id) {
    // Keep a reference to Froogaloop for this player
    var container = document.getElementById(player_id).parentNode.parentNode;
    froogaloop = $f(player_id);
    froogaloop.addEvent('finish', function(data) {
      document.body.removeChild($('armoury_vid').parentNode);
    });
}

我将代码放入 Ajax.Updater 调用的 onComplete 回调中，这会将 vimeo 视频加载到页面中。

我相信这是因为我没有将 $(prototypecall) 包装在 Froogaloops 的 $f() 函数中 - 记错了！

上面的脚本是使用 Prototype 框架构建的 - 适应它以使用 jQuery 框架需要很少的工作 - 这取决于个人喜好 - 他们都做同样的事情，只是略有不同的语法！

【讨论】：

再缩短一点 -> $f($('armoury_vid')).addEvent('ready', function(player_id) { // Keep a reference to Froogaloop for this player var container = document.getElementById(player_id).parentNode.parentNode; froogaloop = $f(player_id); froogaloop.addEvent('finish', function(data) { document.body.removeChild($('armoury_vid').parentNode); $('address').show(); $('blurb').hide(); }); });