Skip to content

Instantly share code, notes, and snippets.

@sydlawrence

sydlawrence/video 2 canvas

Created October 5, 2011 21:49
Show Gist options
  • Save sydlawrence/1265843 to your computer and use it in GitHub Desktop.
Save sydlawrence/1265843 to your computer and use it in GitHub Desktop.
Download ZIP
video to canvas
Raw
video 2 canvas
<html>
<body>
<script>
var video = document.createElement( 'video' );
video.autoplay = true;
video.addEventListener( 'loadedmetadata', function ( event ) {
video.loop = true;
var scale = 0.2;
var width = video.videoWidth * scale;
var height = video.videoHeight * scale;
var items_total = ( window.innerWidth * window.innerHeight ) / ( width * height );
for ( var i = 0; i < items_total - 1; i ++ ) {
var canvas = document.createElement( 'canvas' );
canvas.width = width;
canvas.height = height;
canvas.context = canvas.getContext( '2d' );
canvas.context.scale( scale, scale );
document.body.appendChild( canvas );
}
setInterval( function () {
var child = document.body.insertBefore( document.body.lastChild, document.body.children[ 1 ] ); // children[ 0 ] == <script>
child.context.drawImage( video, 0, 0 );
}, 1000 / 30 );
}, false );
video.src = 'http://syddev.com/jquery.videoBG/assets/christmas_snow.mp4';
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment