Synchronising Content

There may be an instance where you want to synchronise your own code to the video compositors notion of time. There's a mechanism to do this called regsiterMediaSourceListener. It allows you to attach a series of callbacks to a MediaSource on the timeline.

var playlist = {
    "tracks":[
        [{id:"video1", start:0, duration:10, src:"video.mp4"}]
    ]
}

var canvas = document.getElementById('canvas');
var videoCompositor = new VideoCompositor(canvas);
videoCompositor.playlist = playlist;

//the listener object can have as many as it need of the following listeners
var listener = {
    render : function(mediaSource, renderParameters){
        /* This function is called everytime a frame from the media source is rendered
         * 
         * mediaSource is the MediaSource being rendered
         * renderParameters is a number of parameters which affect the currently rendered item.
         * by default renderParameters has the following properties:
         * renderParameters.duration    - how long the media source is rendered for
         * renderParameters.progress   - a normalised value representing the progress through the playback of the MediaSource
         */
        //calculate the time in seconds through playing this MediaSource
        var time = renderParameters.duration * renderParameters.progress
    },
    
    play: function(mediaSource){
        //called anytime play is called on the MediaSource
    },
    pause : function(mediaSource){
        //called anytime a pause is called on the MediaSource
    },
    seek : function(mediaSource, seekTime){
        //seekTime is relative to the position on the timeline of the MediaSource being listened to.
    },

    load : function(mediaSource){
        //called when this MediaSource is triggered to load by the internal scheduling system.
    },


}

videoCompositor.registerMediaSourceListener('video1', listener);
videoCompositor.play();