Unreliability of API addCuePoint and player.on('cuepoint'... methods

[casevanarkel]

Has anyone else experienced unreliability while leveraging the API addCuePoint and player.on('cuepoint'... methods? On our site we frequently, although with randomness, see the method player.on('cuepoint'... not fire at all for our users, which then causes subsequent cue points to not be added. For a bit more context, we're using Angular v1.5.5.

Expected Behavior

Leveraging the API addCuePoint and player.on('cuepoint'... methods with and Angular v1.5.5 framework as such:

videoCtrl = this;

var video = document.querySelector('#video');
var player = new Vimeo.Player(video);
var time = 5.256;
var state = 0;

this.getTime = function(){
      return time;
}

this.setState = function(state){
     this.state = state;
}

player.on('cuepoint', function(data) {
   $scope.$apply(function(){
        if ("nextState" in data.data)       
             videoCtrl.setState(data.data.nextState);  
   });
});

player.addCuePoint( videoCtrl.getTime() , {nextState: 1});

Should always result in the code within the player.on('cuepoint'... to run.

Actual Behavior

Inconsistently, but typically with slow internet connection, player.on('cuepoint')... doesn't fire at all.

Sorry, no demo to show yet for proprietary reasons--just posting this to see if anyone else has seen the same thing.

Thanks for your help!

Case

[fisherinnovation]

Thanks for the report.

To help narrow down which side of the API this issue may be created from, can you verify your cuepoints are being added by calling getCuepoints (https://github.com/vimeo/player.js#getcuepoints-promisearray-unsupportederrorerror) and seeing if they are reported back?

[casevanarkel]

Sorry for the delay, we've been trying to capture the data and replicate the issue and now we are able to replicate it often (~30% of the time), but not 100% of the time. Here's the code we're working with:

// event listener for cue points
                  player.on('cuepoint', function(data) {
                      $scope.$apply(function(){
                          if ("nextState" in data.data)
                              videoCtrl.setStates(data.data.nextState);
                      });
                      console.log("Cuepoint Fired", data);
                    }); 

// printing all added cue points and currentTime every two seconds
                this.dumpCuepoints = function(){
                    player.getCuePoints().then(function(cuepoints){
                        console.log("All Cuepoints", cuepoints);
                    })
                    player.getCurrentTime().then(function(seconds){
                        console.log("CurrentTime", seconds);
                    })
                }

   // showing all added cue points every two seconds          
$interval(function(){
                    videoCtrl.dumpCuepoints();
                }, 2000);

// adding cue point
player.addCuePoint( 4.469, {nextState:'mmStatic'});

This snippet of code above dumps all the cue points we add (this.dumpCuepoints), and the code that listens to the cue point event when it's fired (player.on). Below in the images you'll see that the console logs show that we add the cue point, but it is never fired even though the video has continued playing and our currentTime is past when the cue point was supposed to fire:

Console log part 1

Console log part 2

In addition to this issue, here are some other questions we have related to cue points:

1. Is there a limit to the number of cue points that can be set (i.e. we currently set over 30 cue points in an 8 min video)?
2. Is there a limit to the precision of the time for the cue point (i.e. all cue points are assign 3 significant digits, for example 4.469 seconds)?
3. Minimum recommended time between cue points (sometimes we fire cue points less than 4 seconds apart)?

We see on occasion cue points not being fired for users and we want to ensure we're following best practices for the API.

Any help here would be greatly appreciated.

[casevanarkel]

Think this might be why our cue points sometimes don't fire? Here's a log to reference:

Log screenshot

You'll see we set a cue point to fire at 4.469, but the timeupdate fires only at 4.458 and 4.738 (.28) difference, which is greater than the .250 ms max range to detect a cue point in your API. This means our cue points sometimes fall out of the allotted range because timeupdate may take up to .3ms between calls.

We see this especially happen when our web page is being throttled in some way by the browser (the tab with the video is inactive, or the video is not in the active desktop for Mac OS).

Any help or confirmation would be appreciated.

[CalebKester]

I've noticed the same issue that it seems like it's being throttled. Here are my cuepoints and if I set playbackspeed to .75x it will hit every single one. But if I speed it up to 2x it skips about every other or every third.