<div class="container">
  <div class="column">
    <video id="SourceVideo" src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" loop crossorigin="Anonymous"></video>
  </div>
  <div class="column">
    <div class="canvas">
       <canvas id="Canvas" class="video"></canvas>
    </div>
  </div>
</div>

<button id="StartButton">Start</button>
    
.container {
  display: flex;
  width: 400px;
  
  .column {
    max-width: 100%;
    flex: 0 0 400px;
  }
  
  video, canvas {
    max-width: 100%;
  }
  
  canvas {
    border: 1px solid #ccc;
  }
}

.video-container {
  width: 400px;
}
View Compiled
var startButton;
var canvas;
var context;
var video;
var canPlay;

function init() {
  startButton = document.getElementById('StartButton');
  canvas = document.getElementById('Canvas');
  context = canvas.getContext('2d');
  video = document.getElementById('SourceVideo');
  
  video.muted = true;

  video.addEventListener('canplay', function () {
    // Set the canvas the same width and height of the video
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    
    canPlay = true;
  });
  
  startButton.addEventListener('click', function () {
    if (!canPlay) return;
    // Play video
    video.play();
    
    drawFrame(video);
  });
}

function drawFrame(video) {
  context.drawImage(video, 0, 0);
}

window.addEventListener('load', init);
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.