Interact with Vimeo player on vimeo.com using Javascript

Question

I have successfully used the Froogaloop library to monitor embedded Vimeo video players on various sites (for a feature of my Chrome extension).

I'd like to do the same thing on vimeo.com itself, but the video players on vimeo.com pages are not embedded within iframes, so Froogaloop isn't able to interface with them.

Can anybody tell me how to get the current playing time and wire up play/pause event listeners for a (non-iframed) video on vimeo.com?

Answer 1

After some further research I came up with the following basic solution:

// 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
}

This may not work for HTML5-mode videos on vimeo.com (untested).

It also does not work when a vimeo.com page replaces the existing player with another one via DOM manipulation. I believe those situations could be handled by something like a MutationObserver.