<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Video on Canvas</title>
  <style>
    section {
      float: left;
    }
  </style>
  <script>
    let canvas, video;
    function initiate() {
      let element = document.getElementById("canvas");
      canvas = element.getContext("2d");
      video = document.getElementById("media");

      canvas.translate(483, 0);
      canvas.scale(-1, 1);
      video.requestVideoFrameCallback(processFrames);
    }
    function processFrames() {
      canvas.drawImage(video, 0, 0);
      video.requestVideoFrameCallback(processFrames);
    }
    window.addEventListener("DOMContentLoaded", initiate);
  </script>
</head>
<body>
  <section>
    <video id="media" width="483" height="272" autoplay muted>
      <source src="trailer.mp4" type="video/mp4">
      <source src="trailer.webm" type="video/webm">
    </video>
  </section>
  <section>
    <canvas id="canvas" width="483" height="272"></canvas>
  </section>
</body>
</html>