<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>Video</h2>
<video controls id="videoCanvas" controls width="350" autoplay>
<source src="/build/videos/arcnet.io(7-sec).mp4" type="video/mp4">
</video>
<h2>Canvas draws the current video:</h2>
<canvas id="exampleCanvas" width="310" height="190" style="border:1px solid #d3d3d3;">
Your browser doesn't support the canvas tag.
</canvas>
<script>
var v = document.getElementById("videoCanvas");
var c = document.getElementById("exampleCanvas");
var ctx = c.getContext("2d");
var i;
v.addEventListener("play", function() {
i = window.setInterval(function() {
ctx.drawImage(v, 5, 5, 300, 180)
}, 10);
}, false);
v.addEventListener("pause", function() {
window.clearInterval(i);
}, false);
v.addEventListener("ended", function() {
clearInterval(i);
}, false);
</script>
</body>
</html>