CrossPlatform Cuepoint Event for HTML5 Video - iphone

Question

Edittted to ad clarity
I am looking to create an HTML5 Video playback that triggers events at specific regularly timed cue-points. For example, I'd like an event to fire every second during video playback that checks the contents of a textbox (i.e. at second1 textbox contained; at second2 textbox contained). The 'tricky' part is that I need it to work across all major platforms/browsers, and that includes IPhones and IPads.
IPhones particularly seem to be a problem in that no matter the player, the setting, the hack I've tried - when a video starts playing, the browser goes to the background and the video is played in a full-screen container (Quicktime?). When the video stops playing and control is back with the browser, I see that the cuepoint events fired, but that's of no use if the textbox is unreachable during video playback!
I am very familiar with FlowPlayer and have already done a bunch of work to ensure it works for playback across most relevant platforms; the cuepoint feature of its API seems to be exactly what we need BUT there's a warning/restriction specific to it:
Be aware that cuepoints are subject to device restrictions regarding the HTML5 video API. On devices which do not support inline video
because they delegate playback to a system component (e.g. QuickTime
on iPhone) the effect of cuepoints is next to none in real world
setups
Has anyone worked with Flowplayer cuepoints OR alternate tech on iPhones/iPads? Obviously, if I can maintain one code base that would be preferrable to having multiple platform-specific versions.

Answer 1

Here is a simple controller for the video element which tracks the timeupdate event fired by the video element to trigger callback functions at the specified timecodes.
It allows you to attach multiple callbacks for the same timecode.
The timeupdate event is fired at different rates on different devices, because of this there is a limitation in that cuepoints can only be attached at integer values so at 5 seconds not 5.5, you can potentially remove this but then there is a risk that the cuepoints will not be triggered
/**
* Function which allows you to register cuepoints to trigger callbacks
* at specific timecodes
* #param {HTMLElement} video_el The video element you want to track
*/
var VideoController = function(video_el){
/**
* The video element this controller is for
* #type {HTMLElement}
*/
this.element = video_el; //
/**
* Object containing all the cuepoints
* #type {Object}
*/
this.cuepoints = {};
/**
* The last processed_timecode so we dont fire events more than once
* #type {Number}
*/
this.processed_timecode = undefined;
/**
* Allows you to trigger a callback at a specific timecode
* #param {Number} timecode The timecode you want to trigger your callback
* #param {Function} callback Your callback function
*/
this.addCuepoint = function(timecode, callback){
//
timecode = Math.floor(timecode);
//
if(this.cuepoints[timecode] === undefined){
this.cuepoints[timecode] = [];
}
this.cuepoints[timecode].push(callback);
return this;
}
/**
* Internal method to track the videos current timecode and to trigger
* the cuepoints when neccesary
* #param {[type]} e A timeupdate event from the video
*/
this.timeupdate = function(e){
var timecode = Math.floor(e.target.currentTime);
// check to see if there is a callback registered for this timecode
if(this.cuepoints.hasOwnProperty(timecode) && this.cuepoints[timecode] !== undefined && this.processed_timecode !== timecode){
//if there is it loops through the array of callbacks and triggers them
for(var i = 0,l=this.cuepoints[timecode].length;i<l;i++){
this.cuepoints[timecode][i]();
}
}
//updates the processed_timecode so we do not fire these callbacks again
this.processed_timecode = timecode;
}.bind(this);
// add addEventListener to the video element to track the video timecode
this.element.addEventListener('timeupdate', this.timeupdate);
return this;
}
var video = document.getElementById('myVideoElement');
var video_controller = new VideoController(video);
video_controller.addCuepoint(2,function(){
console.log('do something at 2 seconds');
});
video_controller.addCuepoint(2,function(){
console.log('do something else at 2 seconds');
});

Answer 2

I've adapted #Irfan 's answer above to use requestAnimationFrame instead of relying on the timeupdate event.
This will allow for a more granular triggering of events on a half second etc, just adjust the .tofixed(1) as appropriate.
This will not likely help you with the iPhones web video restrictions, but for other use cases it should be helpful to anyone else who needs precise triggering or events based on video time.
// Request Animation Frame Shim
// Source: https://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function( callback ){
window.setTimeout(callback, 1000 / 60);
};
})();
var VideoController = function(video_el){
this.element = video_el;
this.cuepoints = {};
this.processed_timecode = undefined;
var self = this;
this.addCuepoint = function(timecode, callback){
var timecode = timecode.toFixed(1);
if(this.cuepoints[timecode] === undefined){
this.cuepoints[timecode] = [];
}
this.cuepoints[timecode].push(callback);
return this;
}
this.rafUpdate = function(timestamp){
var timecode = video_el.currentTime.toFixed(1);
if(!video_el.duration){
requestAnimFrame(self.rafUpdate);
}else if( timecode < video_el.duration ){
requestAnimFrame(self.rafUpdate);
}
if( self.cuepoints.hasOwnProperty(timecode) && self.cuepoints[timecode] !== undefined && self.processed_timecode !== timecode ){
for(var i = 0,l=self.cuepoints[timecode].length;i<l;i++){
self.cuepoints[timecode][i]();
}
}
self.processed_timecode = timecode;
}
requestAnimFrame( this.rafUpdate ); // keeps better time than video.timeupdate
return this;
}
var video = document.getElementById('myvideo');
globalVars['video'] = video;
var video_controller = new VideoController(globalVars['video']);
video_controller.addCuepoint(10.2,function(){
endframe.play();
});