使用Javascript与vimeo.com上的Vimeo播放器进行交互

时间:2013-01-21 19:09:28

标签: javascript video google-chrome-extension vimeo froogaloop

我已成功使用Froogaloop库监控各个网站上的嵌入式Vimeo视频播放器(针对my Chrome extension的功能)。

我想在vimeo.com上做同样的事情,但vimeo.com页面上的视频播放器并没有嵌入iframe中,因此Froogaloop无法与它们进行交互。

有人可以告诉我如何获取当前的播放时间,并为vimeo.com上的(非iframed)视频连接播放/暂停事件监听器吗?

1 个答案:

答案 0 :(得分:1)

经过一些further research我想出了以下基本解决方案:

// Once the vimeo.com player <object> is ready:

// find vimeo player(s)
var vimeoPagePlayers = document.querySelectorAll('object[type*=flash][data*=moogaloop]');
if (vimeoPagePlayers.length == 0) {
    return;
}

// attach event listeners to player(s)
for (var i = 0; i < vimeoPagePlayers.length; i++) {
    var player = vimeoPagePlayers[i];
    // sometimes .api_addEventListener is not available immediately after
    // the <object> element is created; we do not account for this here
    player.api_addEventListener('onProgress', 'onVimeoPageProgress');
    player.api_addEventListener('onPause', 'onVimeoPagePause');
}

function onVimeoPagePause() {
    // video has been paused or has completed
}

function onVimeoPageProgress(data) {
    // video is playing
    var seconds;
    if (typeof(data) == 'number') {
        // on vimeo.com homepage, data is a number (float)
        // equal to current video position in seconds
        seconds = data;
    }
    else {
        // on vimeo.com/* pages, data is a hash
        // of values { seconds, percent, duration }
        seconds = data.seconds;
    }

    // do something with seconds value
}

这可能不适用于vimeo.com上的HTML5模式视频(未经测试)。

当vimeo.com页面通过DOM操作将现有播放器替换为另一个播放器时,它也不起作用。我相信这些情况可以通过像MutationObserver这样的东西来处理。