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

Question

好的,我完全卡住了.我真的希望有人可能有使用Vimeo的Froogaloop API加载Vimeo视频的经验.

我似乎无法抓住"准备好"的事件.

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视频时,您必须将查询字符串包含&api=1在URL中.这允许您进行API事件调用.Vimeo的也需要&player_id=SOME_ID,如果你打算拥有多个视频的加载,这就需要在ID上它的加载的iframe(或在我的情况下,使用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(){