JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <video id="video" src="http://techslides.com/demos/sample-videos/small.ogv" controls></video>
    <canvas id="canvas"></canvas>
</div>

JavaScript

var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  var video = document.getElementById('video');

  video.addEventListener('play', function() {
    var $this = this;
    var cw = Math.floor(video.clientWidth / 5);
    var ch = Math.floor(video.clientHeight / 5);
    canvas.width = cw;
    canvas.height = ch;   
      
    (function render() {
      if (!$this.paused && !$this.ended) {
        ctx.drawImage($this,0,0,cw,ch)
        setTimeout(render, 1000 / 30);
      }
    })();
  });