Manipulating Video With canvas

We can create a visualization of your HTML5 video using canvas.

Explanation

1. Add video and canvas:
Add a button to trigger the drawing, as well as two canvas elements, one for a medium preview and one for a small.

snippet

<video id="origVideo" width="640" height="360">
    <source src="video.mp4" type="video/mp4" />
    <source src="video.ogv" type="video/ogg" /> Your device does not support HTML5 video.
</video>
<button title="Generate Preview" onclick="generatePreview();">Generate Preview</button>
<canvas id="previewMed"></canvas>
<canvas id="previewSm"></canvas>

2. Generate Preview:
create a function to generate the preview and set the JavaScript variables for our video and canvas elements:

snippet

<script>
function generatePreview() {
    var video = document.getElementById('origVideo');
    var canvas1 = document.getElementById('previewMed');
    var context1 = canvas1.getContext('2d');
    var canvas2 = document.getElementById('previewsSm');
    var context2 = canvas2.getContext('2d');

    Set Preview Dimensions:
        define the dimensions
    for each of the canvas drawings in the
    function:
    canvas1.width = 320;
    canvas1.height = 180;
    canvas2.width = 160;
    canvas2.height = 90;

    Add an Event Listener:
        add an event listener to trigger the canvas drawing upon video play:
        video.addEventListener('play', function() {
            drawVideo(this, context1, context2);
        }, false);

    close out the
    function:
    video.play();
}

//Draw Previews Lastly, add the function that draws each of the canvas previews:
function drawVideo(video, canvas1, canvas2) {
	if (video.paused || video.ended) return false;
	canvas1.drawImage(video, 0, 0, 320, 180);
	canvas2.drawImage(video, 0, 0, 160, 90);
	setTimeout(drawVideos, 25, video, canvas1, canvas2);
}
</script>

This function first checks to see if the video is playing.

if(video.paused || video.ended) return false;

If so, use drawImage with scaling to draw a canvas image that is half the size of the original video.

canvas1.drawImage(video,0,0,320,180);

And a second canvas that is half the size of previewMed:

canvas2.drawImage(video,0,0,160,90);

The scaling parameters in these examples are:

object.drawImage(source,x,y,width,height);

Where x and y represent the top left corner of the image on the target canvas, and width and height are the image's size on the target canvas.
Finally, tell drawPreviews to call itself every 25 milliseconds, which roughly equals 40 frames per second (1000ms/40fps = 25):

setTimeout(drawVideos,25,video,canvas1,canvas2);

snippet

<video id="origVideo" width="640" height="360">
    <source src="video.mp4" type="video/mp4" />
    <source src="video.ogv" type="video/ogg" /> Your device does not support HTML5 video.
</video>
<button title="Generate Preview" onclick="generatePreview();">Generate Preview</button>
<canvas id="previewMed"></canvas>
<canvas id="previewSm"></canvas>

snippet

<script>
function generatePreview() {
    var video = document.getElementById('origVideo');
    var canvas1 = document.getElementById('previewMed');
    var context1 = canvas1.getContext('2d');
    var canvas2 = document.getElementById('previewsSm');
    var context2 = canvas2.getContext('2d');
    canvas1.width = 320;
    canvas1.height = 180;
    canvas2.width = 160;
    canvas2.height = 90;
    video.addEventListener('play', function() {
        drawVideo(this, context1, context2);
    }, false);
    video.play();
}

function drawVideo(video, canvas1, canvas2) {
    if (video.paused || video.ended) return false;
    canvas1.drawImage(video, 0, 0, 320, 180);
    canvas2.drawImage(video, 0, 0, 160, 90);
    setTimeout(drawVideos, 25, video, canvas1, canvas2);
}
</script>

<audio src="audio.ogg"></audio>
<canvas width="512" height="100"></canvas>
<button title="Generate Waveform" onclick="genWave();">Generate Waveform</button>

snippet

<script>
function genWave() {
    var audio = document.getElementsByTagName("audio")[0];
    var canvas = document.getElementsByTagName("canvas")[0];
    var context = canvas.getContext('2d');
    audio.addEventListener("MozAudioAvailable", buildWave, false);

    function buildWave(event) {
        var channels = audio.mozChannels;
        var frameBufferLength = audio.mozFrameBufferLength;
        var fbData = event.frameBuffer;
        var stepInc = (frameBufferLength / channels) / canvas.width;
        var waveAmp = canvas.height / 2;
        canvas.width = canvas.width;
        context.beginPath();
        context.moveTo(0, waveAmp - fbData[0] * waveAmp);
        for (var i = 1; i < canvas.width; i++) {
            context.lineTo(i, waveAmp - fbData[i * stepInc] * waveAmp);
        }
        context.strokeStyle = "#fff";
        context.stroke();
    }
    audio.play();
}
</script>