JSFiddle - React, Tailwind, and code Playground

by Chris

HTML

<video id="myVideo" src="http://www.w3schools.com/html/mov_bbb.mp4" controls></video>
<img id="myOverlayImage" src="https://i.ytimg.com/vi/i9sSdBjdyfI/hq720.jpg" style="display:none">

JavaScript

function overlayImage(videoElement, overlayImage) {
  // Create a canvas element.
  const canvas = document.createElement('canvas');
  canvas.width = videoElement.videoWidth;
  canvas.height = videoElement.videoHeight;

  // Get the video element's current frame.
  const videoFrame = videoElement.currentTime;

  // Draw the video element's current frame onto the canvas element.
  const canvasContext = canvas.getContext('2d');
  canvasContext.drawImage(videoElement, 0, 0, canvas.width, canvas.height);

  // Draw the overlay image onto the canvas element.
  canvasContext.drawImage(overlayImage, 0, 0, canvas.width, canvas.height);

  // Set the video element's poster attribute to the canvas element.
  videoElement.poster = canvas.toDataURL();
}

const videoElement = document.querySelector('#myVideo');
const overlayImageElement = document.querySelector('#myOverlayImage');

overlayImage(videoElement, overlayImageElement);