JSFiddle - React, Tailwind, and code Playground

by abdul quadir

HTML

<script  src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

  <div id="theater">
    <video id="video" src="http://upload.wikimedia.org/wikipedia/commons/7/79/Big_Buck_Bunny_small.ogv" controls="false"></video>
    <canvas id="canvas" width="100" height="100"></canvas>
    
      <canvas id="canvas2" width="100" height="100"></canvas>
       <canvas id="canvas3" width="100" height="100"></canvas>
    <label>
      <br />Try to play me :)</label>
    <br />
  </div>

JavaScript

$(function() {
  var canvas = document.getElementById('canvas');
      var canvas2 = document.getElementById('canvas2');
    var canvas3 = document.getElementById('canvas3');
  var ctx = canvas.getContext('2d');
    var ctx2 = canvas2.getContext('2d');
     var ctx3 = canvas3.getContext('2d');
  var video = document.getElementById('video');

  video.addEventListener('play', function() {
    var $this = this; //cache
    (function loop() {
      if (!$this.paused && !$this.ended) {
       ctx.drawImage($this, 0,0);
           ctx2.drawImage($this, -100,0);
          ctx3.drawImage($this, -200,0);
        setTimeout(loop, 1000 / 30); // drawing at 30fps
      }
    })();
  }, 0);
});