使用 jQuery 加载多个 Vimeo 视频并检测事件

Question

好吧，我完全被困住了。我真的希望有人有使用 Vimeo 的 Froogaloop 加载 Vimeo 视频的经验API。

我似乎无法捕捉到“准备好”事件。

Froogaloop：

<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>

我的脚本：

$.getJSON('http://www.vimeo.com/api/oembed.json?url=' + encodeURIComponent('http://vimeo.com/27027307') + '&width=300&callback=?', function(data){
    $('#video-container').html(data.html); //puts an iframe embed from vimeo's json
    $('#video-container iframe').ready(function(){
        player = document.querySelectorAll('iframe')[0];
        $f(player).addEvent('ready', function(id){
            console.log('success');
        });

    });
});

视频加载良好。这是我在控制台中收到的消息：

Uncaught TypeError: Cannot read property 'ready' of undefined

我需要使用事件侦听器来检测暂停等。我看到 这篇文章，但不幸的是，主要区别是我通过 JSON 动态加载。另外，Vimeo 有一个 Froogaloop 的工作示例，但没有使用 jQuery。

提前致谢！！！

Answer 1

编辑（2014年8月）：我最近写了一个jQuery Vimeo插件，它基本上解决了这个问题要优雅得多。但如果您进行硬编码，解决方案如下：

加载 Vimeo 视频时，您必须在 URL 中包含查询字符串 &api=1。这允许您进行 API 事件调用。如果您要加载多个视频，Vimeo 还需要一个 &player_id=SOME_ID，它需要与其加载的 iframe 上的 id 相匹配（或者在我的情况下，使用 jQuery 将其添加到JSON 加载后的 iframe，因为我是动态创建的。）

我为此浪费了半天时间。这是我的最终代码，如果它对尝试动态加载 Vimeo 视频的其他人有帮助的话。

使用 Vimeo 的 Froogaloop 框架

<script src="http://a.vimeocdn.com/js/froogaloop2.min.js"></script>

我的 js

var videoData = [
{
    'title':'The Farm',
    'id':'farmvideo',
    'videoURL':'http://vimeo.com/27027307'
}];

$.getJSON('http://www.vimeo.com/api/oembed.json?url=' + encodeURIComponent(videoData[0]['videoURL']) + '&api=1&player_id='+ videoData[0]['id'] +'&width=300&callback=?', function(data){
    $('#video-container').html(data.html); //puts an iframe embed from vimeo's json
    $('#video-container iframe').load(function(){
        player = document.querySelectorAll('iframe')[0];
        $('#video-container iframe').attr('id', videoData[0]['id']);
        $f(player).addEvent('ready', function(id){
            var vimeoVideo = $f(id);
            console.log('success');
        });
    });
});

Answer 2

尝试使用 load 事件而不是 iframe 的 Ready 事件。

你的第三行是：

$('#video-container iframe').load(function(){

Answer 3

我已经“分叉”了您的示例并创建了一个版本，该版本显示使用 froogaloop api 播放/暂停多个视频的 vimeo。因此，如果您开始播放一个视频，所有其他视频都会停止播放： http://jsfiddle.net/nerdess/ D5fD4/3/