VideoContext

var canvasElement = document.getElementById("canvas");
var ctx = new VideoContext(canvasElement, function(){console.error("Sorry, your browser dosen\'t support WebGL");});
var videoNode = ctx.video("video.mp4");
videoNode.connect(ctx.destination);
videoNode.start(0);
videoNode.stop(10);
ctx.play();

var canvasElement = document.getElementById("canvas");
var ctx = new VideoContext(canvasElement);
var videoNode = ctx.video("video.mp4");
videoNode.connect(ctx.destination);
videoNode.start(0);
videoNode.stop(10);
ctx.play();
setTimeout(function(){console.log(ctx.currentTime);},1000); //should print roughly 1.0

var canvasElement = document.getElementById("canvas");
var ctx = new VideoContext(canvasElement);
var videoNode = ctx.video("video.mp4");
videoNode.connect(ctx.destination);
videoNode.start(0);
videoNode.stop(20);
ctx.currentTime = 10; // seek 10 seconds in
ctx.play();

var canvasElement = document.getElementById("canvas");
var ctx = new VideoContext(canvasElement);
var videoNode = ctx.video("video.mp4");
videoNode.start(0);
videoNode.stop(10);
videoNode.connect(ctx.destination);

var canvasElement = document.getElementById("canvas");
var ctx = new VideoContext(canvasElement);
console.log(ctx.duration); //prints 0

var videoNode = ctx.video("video.mp4");
videoNode.connect(ctx.destination);
videoNode.start(0);
videoNode.stop(10);

console.log(ctx.duration); //prints 10

ctx.play();

var canvasElement = document.getElementById("canvas");
var ctx = new VideoContext(canvasElement);
var videoNode = ctx.video("video.mp4");
videoNode.start(0);
videoNode.stop(10);
videoNode.connect(ctx.destination);
ctx.playbackRate = 2;
ctx.play(); // Double playback rate means this will finish playing in 5 seconds.

var canvasElement = document.getElementById("canvas");
var ctx = new VideoContext(canvasElement);

//A simple compositing node definition which just renders all the inputs to the output buffer.
var combineDefinition = {
    vertexShader : "\
        attribute vec2 a_position;\
        attribute vec2 a_texCoord;\
        varying vec2 v_texCoord;\
        void main() {\
            gl_Position = vec4(vec2(2.0,2.0)*vec2(1.0, 1.0), 0.0, 1.0);\
            v_texCoord = a_texCoord;\
        }",
    fragmentShader : "\
        precision mediump float;\
        uniform sampler2D u_image;\
        uniform float a;\
        varying vec2 v_texCoord;\
        varying float v_progress;\
        void main(){\
            vec4 color = texture2D(u_image, v_texCoord);\
            gl_FragColor = color;\
        }",
    properties:{
        "a":{type:"uniform", value:0.0},
    },
    inputs:["u_image"]
};
//Create the node, passing in the definition.
var trackNode = videoCtx.compositor(combineDefinition);

//create two videos which will play at back to back
var videoNode1 = ctx.video("video1.mp4");
videoNode1.play(0);
videoNode1.stop(10);
var videoNode2 = ctx.video("video2.mp4");
videoNode2.play(10);
videoNode2.stop(20);

//Connect the nodes to the combine node. This will give a single connection representing the two videos which can
//be connected to other effects such as LUTs, chromakeyers, etc.
videoNode1.connect(trackNode);
videoNode2.connect(trackNode);

//Don't do anything exciting, just connect it to the output.
trackNode.connect(ctx.destination);

var canvasElement = document.getElementById("canvas");
var ctx = new VideoContext(canvasElement);
var imageNode = ctx.image("image.png");

var canvasElement = document.getElementById("canvas");
var imageElement = document.getElementById("image");
var ctx = new VideoContext(canvasElement);
var imageNode = ctx.image(imageElement);

var canvasElement = document.getElementById("canvas");
var ctx = new VideoContext(canvasElement);
var videoNode = ctx.video("video.mp4");
videoNode.connect(ctx.destination);
videoNode.start(0);
videoNode.stop(20);
ctx.currentTime = 10; // seek 10 seconds in
ctx.play();
setTimeout(function(){ctx.pause();}, 1000); //pause playback after roughly one second.

var canvasElement = document.getElementById("canvas");
var ctx = new VideoContext(canvasElement);
var videoNode = ctx.video("video.mp4");
videoNode.connect(ctx.destination);
videoNode.start(0);
videoNode.stop(10);
ctx.play();

var canvasElement = document.getElementById("canvas");
var ctx = new VideoContext(canvasElement);
ctx.registerCallback("stalled", function(){console.log("Playback stalled");});
ctx.registerCallback("update", function(){console.log("new frame");});
ctx.registerCallback("ended", function(){console.log("Playback ended");});

var canvasElement = document.getElementById("canvas");
var ctx = new VideoContext(canvasElement);

//A simple cross-fade node definition which cross-fades between two videos based on the mix property.
var crossfadeDefinition = {
    vertexShader : "\
       attribute vec2 a_position;\
       attribute vec2 a_texCoord;\
       varying vec2 v_texCoord;\
       void main() {\
           gl_Position = vec4(vec2(2.0,2.0)*a_position-vec2(1.0, 1.0), 0.0, 1.0);\
           v_texCoord = a_texCoord;\
        }",
    fragmentShader : "\
        precision mediump float;\
        uniform sampler2D u_image_a;\
        uniform sampler2D u_image_b;\
        uniform float mix;\
        varying vec2 v_texCoord;\
        varying float v_mix;\
        void main(){\
            vec4 color_a = texture2D(u_image_a, v_texCoord);\
            vec4 color_b = texture2D(u_image_b, v_texCoord);\
            color_a[0] *= mix;\
            color_a[1] *= mix;\
            color_a[2] *= mix;\
            color_a[3] *= mix;\
            color_b[0] *= (1.0 - mix);\
            color_b[1] *= (1.0 - mix);\
            color_b[2] *= (1.0 - mix);\
            color_b[3] *= (1.0 - mix);\
            gl_FragColor = color_a + color_b;\
        }",
    properties:{
        "mix":{type:"uniform", value:0.0},
    },
    inputs:["u_image_a","u_image_b"]
};

//Create the node, passing in the definition.
var transitionNode = videoCtx.transition(crossfadeDefinition);

//create two videos which will overlap by two seconds
var videoNode1 = ctx.video("video1.mp4");
videoNode1.play(0);
videoNode1.stop(10);
var videoNode2 = ctx.video("video2.mp4");
videoNode2.play(8);
videoNode2.stop(18);

//Connect the nodes to the transistion node.
videoNode1.connect(transitionNode);
videoNode2.connect(transitionNode);

//Set-up a transition which happens at the crossover point of the playback of the two videos
transitionNode.transition(8,10,1.0,"mix");

//Connect the transition node to the output
transitionNode.connect(ctx.destination);

//start playback
ctx.play();

var canvasElement = document.getElementById("canvas");
var ctx = new VideoContext(canvasElement);

//the callback
var updateCallback = function(){console.log("new frame")};

//register the callback
ctx.registerCallback("update", updateCallback);
//then unregister it
ctx.unregisterCallback(updateCallback);

var canvasElement = document.getElementById("canvas");
var ctx = new VideoContext(canvasElement, undefined, {"manualUpdate" : true});

var previousTime;
function update(time){
    if (previousTime === undefined) previousTime = time;
    var dt = (time - previousTime)/1000;
    ctx.update(dt);
    previousTime = time;
    requestAnimationFrame(update);
}
update();

var canvasElement = document.getElementById("canvas");
var ctx = new VideoContext(canvasElement);
var videoNode = ctx.video("video.mp4");

var canvasElement = document.getElementById("canvas");
var videoElement = document.getElementById("video");
var ctx = new VideoContext(canvasElement);
var videoNode = ctx.video(videoElement);