retrieve video thumbnail in javascript

index.tsx
// Create a video element
var video = document.createElement('video');
video.src = 'path/to/video.mp4';

// Wait for the video to load metadata
video.addEventListener('loadedmetadata', function() {
  // Set the canvas size to match the video dimensions
  var canvas = document.createElement('canvas');
  canvas.width = video.videoWidth;
  canvas.height = video.videoHeight;

  // Draw the first frame of the video onto the canvas
  var ctx = canvas.getContext('2d');
  ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

  // Retrieve the thumbnail data URL from the canvas
  var thumbnailUrl = canvas.toDataURL();

  // Use the thumbnailUrl as needed (e.g., set it as the source of an image element)
  var thumbnailImage = document.createElement('img');
  thumbnailImage.src = thumbnailUrl;

  // Append the thumbnail image to the document
  document.body.appendChild(thumbnailImage);
});

// Start loading the video
video.load();
938 chars
29 lines