Play() sub-second resolution?

[ttseng]

I'm using popcorn.js to create a custom video controller and am running into issues with the resolution of the play() function. You can test it out here:

http://spin360-staging.herokuapp.com/projects/2

The video is compiled of images at a 5 fps framerate. Each position on the slider is set to increment the video by 0.2 seconds. You can see that for particular times, the video is not advanced properly, missing frames of the video.

Another way to test this out is using the console; I created two functions to test the video playback:

function goToImage(image_number){
    $pop.play(image_number*0.2);
    console.log('time: ' + image_number*0.2);
    $pop.pause();
}

function goToTime(time){
    $pop.play(time);
    $pop.pause();
}

For an example of the issue, you can try goToImage(2) and then goToImage(3) to see that a frame has been skipped.

In the documentation I've seen of popcorn.js, play() is always used for full-integer increments. Are there any working examples using fractions of a second?

[rwaldron]

Unfortunately, the HTML5 Video specification is missing any notion of "frames". There is a timeupdate event, but it's specified as:

When the earliest possible position changes, then: if the current playback position is before the earliest possible position, the user agent must seek to the earliest possible position; otherwise, if the user agent has not fired a timeupdate event at the element in the past 15 to 250ms and is not still running event handlers for such an event, then the user agent must queue a task to fire a simple event named timeupdate at the element.

The best we can do to fake higher resolution "timeupdate" with a requestAnimationFrame loop—but there is no way to sync to specific frames by specific frame rates.

This is a total bummer :(