7

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

我似乎无法捕捉到“就绪”事件。

弗罗加卢普:

<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。

提前致谢!!!

4

3 回答 3

23

编辑(2014 年 8 月):我最近写了一个jQuery Vimeo 插件,它基本上更优雅地解决了这个问题。但是解决方案,如果你是硬编码,下面是:

加载 Vimeo 视频时,您必须&api=1在 URL 中包含查询字符串。这允许您进行 API 事件调用。&player_id=SOME_ID如果您要加载多个视频,Vimeo 还需要一个,它需要与它加载的 iframe 上的 id 匹配(或者在我的情况下,在加载 JSON 后使用 jQuery 将其添加到 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');
        });
    });
});
于 2011-08-04T21:26:52.997 回答
9

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

您的第三行将是:

$('#video-container iframe').load(function(){
于 2011-08-03T23:56:12.240 回答
4

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

于 2012-07-24T22:42:12.880 回答