public
Last active

HTML5 Video Preview Drawing

  • Download Gist
gistfile1.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62
<!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>

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.