TryIt Editor v2.0 - Canvas Images

Source Code: (back to article)

<!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>