如何在页面加载后延迟5秒自动执行snap视频截图函数？

Got it, let's get this auto-screenshot feature working for you. Here are two straightforward approaches depending on exactly when you want the delay to start:

Option 1: Trigger 5 Seconds After the Entire Page Loads #

This ensures all page resources (including your video) are fully loaded before starting the 5-second countdown—perfect if you want to wait for everything to be ready:

Add this to your existing <script> block:

// Wait for the entire page to finish loading
window.addEventListener('load', function() {
  // Delay 5 seconds, then run the snap function
  setTimeout(function() {
    snap();
  }, 5000); // 5000ms = 5 seconds
});

// Fill in the complete snap function (since your original code was cut off)
function snap() {
  const video = document.querySelector('video');
  const canvas = document.querySelector('canvas');
  const context = canvas.getContext('2d');
  
  // Grab video dimensions and aspect ratio
  const ratio = video.videoWidth / video.videoHeight;
  const w = video.videoWidth;
  const h = video.videoHeight;
  
  // Set canvas size to match the video
  canvas.width = w;
  canvas.height = h;
  
  // Draw the current video frame onto the canvas
  context.drawImage(video, 0, 0, w, h);
  
  // Optional: Auto-download the screenshot (uncomment if needed)
  // const downloadLink = document.createElement('a');
  // downloadLink.download = 'video-screenshot.png';
  // downloadLink.href = canvas.toDataURL('image/png');
  // downloadLink.click();
}

Option 2: Trigger 5 Seconds After Video Metadata is Loaded #

If you want the countdown to start as soon as the video's dimensions are available (instead of waiting for the whole page), hook into the video's loadedmetadata event:

const video = document.querySelector('video');
const canvas = document.querySelector('canvas');
const context = canvas.getContext('2d');

video.addEventListener('loadedmetadata', function(){
  // Start 5-second delay once video metadata is ready
  setTimeout(snap, 5000);
});

function snap() {
  const ratio = video.videoWidth / video.videoHeight;
  const w = video.videoWidth;
  const h = video.videoHeight;
  
  canvas.width = w;
  canvas.height = h;
  context.drawImage(video, 0, 0, w, h);
  
  // Optional auto-download code here (same as above)
}

Quick Notes: #

• setTimeout() is the core of the delay—its second parameter is always the wait time in milliseconds.
• I completed the snap() function to ensure it actually captures the video frame to the canvas (your original code was cut off mid-implementation).
• The optional download code will automatically save the screenshot as a PNG if you uncomment those lines.

内容的提问来源于stack exchange，提问作者user9736469