Skip to content

Instantly share code, notes, and snippets.

@lwthatcher

lwthatcher/.block

Last active October 26, 2016 19:49
Show Gist options
  • Save lwthatcher/8d217a6abbb14765f4a8e6f996615219 to your computer and use it in GitHub Desktop.
Save lwthatcher/8d217a6abbb14765f4a8e6f996615219 to your computer and use it in GitHub Desktop.
Download ZIP
canvas-video
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
</style>
</head>
<body>
<p>Video courtesy of <a href="http://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.</p>
<video id="video" width="320" height="240" controls>
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<canvas id="canvas" width="320" height="240"></canvas>
<script>
var v = document.getElementById('video');
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
v.addEventListener('timeupdate', function(){
draw(v,context,320,240);
},false);
function draw(v,c,w,h) {
if(v.paused || v.ended) return false;
c.drawImage(v,0,0,w,h);
// setTimeout(draw,20,v,c,w,h);
}
</script>
</body>
Raw
mov_bbb.mp4
This file has been truncated, but you can view the full file.
View raw
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment