JSFiddle - React, Tailwind, and code Playground

by graphettion

HTML

<canvas id="c"></canvas>
<video id="v" controls muted autoplay width="480">
  <source src="https://download.blender.org/durian/trailer/sintel_trailer-720p.ogv">
  <source src="https://download.blender.org/durian/trailer/sintel_trailer-720p.mp4" type="video/mp4">
</video>

CSS

body {
  background: black;
}

#c {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

#v {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -180px 0 0 -240px;
}

JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const v = document.getElementById('v');
  const canvas = document.getElementById('c');
  const context = canvas.getContext('2d');

  let cw = Math.floor(canvas.clientWidth / 100);
  let ch = Math.floor(canvas.clientHeight / 100);
  canvas.width = cw;
  canvas.height = ch;

  v.addEventListener('play', function() {
    draw(this, context, cw, ch);
  }, false);

}, 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);
}