D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
lwthatcher
Full window
Github gist
canvas-video
Built with
blockbuilder.org
<!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="https://www.bigbuckbunny.org/" target="_blank">Big Buck Bunny</a>.</p> <video id="video" width="320" height="240" controls> <source src="https://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>
https://d3js.org/d3.v4.min.js