javascript - 使用 Javascript 在 vi​​meo.com 上与 Vimeo 播放器交互

Question

我已经成功地使用Froogaloop库来监控各个站点上的嵌入式 Vimeo 视频播放器（对于我的 Chrome 扩展程序的一个功能）。

我想在 vimeo.com 本身上做同样的事情，但是 vimeo.com 页面上的视频播放器没有嵌入 iframe 中，所以 Froogaloop 无法与它们交互。

谁能告诉我如何获取当前播放时间并为 vimeo.com 上的（非iframed ）视频连接播放/暂停事件侦听器？

Answer 1

经过一些进一步的研究，我想出了以下基本解决方案：

// 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之类的东西来处理。