Skip to content

Instantly share code, notes, and snippets.

@dariuszparys

dariuszparys/gist:1729408

Created February 3, 2012 09:48
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save dariuszparys/1729408 to your computer and use it in GitHub Desktop.
Save dariuszparys/1729408 to your computer and use it in GitHub Desktop.
Download ZIP
HTML5 Video Preview Drawing
Raw
gistfile1.html
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Video Demo</title>
<script type="text/javascript">
var MAX_FRAMES = 9;
var PREVIEW_FACTOR = 6;
var currentFrame = 1;
document.addEventListener("DOMContentLoaded", createVideoPreview );
function createVideoPreview () {
var video = document.createElement("video");
video.onloadeddata = function() {
var start = video.seekable.start(0);
var end = video.seekable.end(0);
currentFrame = 1;
var even = ( end - start ) / (MAX_FRAMES + 1);
copyVideoFrameAt( video, even );
};
video.id = "player";
video.src = "media/elephants_dream.mp4";
video.controls = true;
video.play();
}
function copyVideoFrameAt (video, even) {
var time = even * currentFrame;
video.pause();
video.currentTime = time;
if( currentFrame > MAX_FRAMES ) {
video.currentTime = 0;
document.getElementById('video').appendChild(video);
video.play();
return;
}
setTimeout( function() {
var canvas = document.createElement("canvas");
canvas.width = video.videoWidth / PREVIEW_FACTOR;
canvas.height = video.videoHeight / PREVIEW_FACTOR;
var surface = canvas.getContext("2d");
surface.drawImage(video, 0, 0, canvas.width, canvas.height);
document.getElementById("videoPreview").appendChild(canvas);
currentFrame++;
copyVideoFrameAt(video, even);
}, 1000);
}
</script>
</head>
<body>
<h2>Preview</h2>
<div id="videoPreview">
</div>
<h2>Video</h2>
<div id="video"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment