Below is some straightforward code I've implemented for managing cuepoints. You can find the code snippet in this gist (https://gist.github.com/uniqueuser/91023f8899321240d34c)
/*
// defining cuepoint methods
var cuepointMethods = {
"1": function(){},
"2.82": function(){},
"3.31": function(){}
};
// initialize with <video> element and an array of cuepoint times => [1, 2.82, 3.31]
var cp = new CuePoints(document.querySelector('#video'), Object.keys(cuepointMethods));
// trigger cue event
cp.on('cue', function(cue){
// perform action based on the cue
// here, we associate each cue with a specific method
cuepointMethods[cue]();
});
*/
window.CuePoints = function(video, cuepoints){
this.video = video;
this.cuepoints = cuepoints;
video.addEventListener('play', this._onPlayVideo.bind(this));
if(!video.paused) this._onPlayVideo();
};
// using BackboneEvents mixin: https://www.npmjs.com/package/backbone-events-standalone
CuePoints.prototype = BackboneEvents.mixin({});
CuePoints.prototype._onPlayVideo = function(){
this._prevTime = this.video.currentTime;
// initiate animation frame
this._onFrame();
};
CuePoints.prototype._onFrame = function(){
// only trigger cue events when the video is playing. May not be suitable for all scenarios...
if(this.video.paused) return;
this.cuepoints.forEach(function(cuepoint){
if(cuepoint >= this._prevTime && cuepoint < this.video.currentTime){
this.trigger('cue', cuepoint);
}
}.bind(this));
this._prevTime = this.video.currentTime;
requestAnimationFrame(this._onFrame.bind(this));
};