More Frequent Time Updates from Vimeo Player or HTML5 Video/Audio Player

Question

I'm in the process of coding a web app that adds guitar fretboard diagrams and tabs in sync with Videos from Vimeo. My problem would also be applicable to the HTML5 Video/Audio player as it sends time updates only a few times per second as well.

Basically a cursor moves along and is over top the currently played note. Currently everything is working great except the Vimeo API only listens for the updated time about four times a second with the playProgress event listener which leads to jerky cursor movement that is running at four frames or so a second. I need about 30 frames a second for smooth movement.

Any ideas for 30 time updates a second? I'm pushing the current time to the annotations object then calling two methods, drawDiagrams and drawTabs which handle all the drawing to the HTML5 canvas element.

jQuery(function() {
    var iframe = jQuery('#vimeoplayer')[0];
    var player = $f(iframe);
    var status = jQuery('.status');

    // When the player is ready, add listener for playProgress
    player.addEvent('ready', function(){       
        player.addEvent('playProgress', onPlayProgress);
    });
    // Call the API when a button is pressed
    jQuery('button').bind('click', function(){
        player.api(jQuery(this).text().toLowerCase());
    });
    function onPlayProgress(data, id){
        status.text(data.seconds + 's played' + data.duration);
        annotations.currentTime = data.seconds;
        annotations.videoDuration = data.duration;
        annotations.drawDiagrams();
        annotations.drawTabs();
    }
});

score 0 · Answer 1 · edited May 23 '17 at 12:12

This actually follows the spec outlined for HTMLMediaElement's. You can read more about that here, Setting the granularity of the HTML5 audio event 'timeupdate'.

Your best bet–currently–would be to setup your own timer and check the current time (getCurrentTime()) yourself in order to try to obtain a more accurate time, more often. Although, this could lead to performance problems on certain systems/devices.

Your question actually struck up a conversation regarding our Vimeo Player API, and we're exploring adding buffering events that you could listen to. The only issue with that currently is the inconsistencies in those events across the various browser manufacturers. We'll be reevaluating those again and see what we can do.

I hope this helps. Please let me know if you have any other questions regarding this.

More Frequent Time Updates from Vimeo Player or HTML5 Video/Audio Player

1 Answers1