How to Test Video Upload — Sample Videos and Code Examples

Video upload is one of the most complex file handling features to implement and test. This guide covers how to validate video files, test upload with sample MP4s from 1MB to 500MB, and handle server-side processing.

Sample video files for testing

Download from our MP4 collection:

• 1MB MP4 (480p, 4s) — quick upload tests
• 10MB MP4 (1080p, 10s) — standard test size
• 100MB MP4 (1080p, 2min) — stress test
• 4K MP4 (80MB) — high-resolution handling
• Portrait MP4 (1080×1920) — mobile video test

Client-side video validation

function validateVideo(file) {
  // Check MIME type
  const validTypes = ['video/mp4', 'video/webm', 'video/quicktime'];
  if (!validTypes.includes(file.type)) {
    return { valid: false, error: 'Invalid video format' };
  }

  // Check file size (max 500MB)
  const maxSize = 500 * 1024 * 1024;
  if (file.size > maxSize) {
    return { valid: false, error: 'File too large (max 500MB)' };
  }

  return { valid: true };
}

Extracting video metadata

function getVideoMetadata(file) {
  return new Promise((resolve) => {
    const video = document.createElement('video');
    video.preload = 'metadata';
    video.onloadedmetadata = () => {
      resolve({
        duration: video.duration,
        width: video.videoWidth,
        height: video.videoHeight,
      });
      URL.revokeObjectURL(video.src);
    };
    video.src = URL.createObjectURL(file);
  });
}

// Usage with sample file
const meta = await getVideoMetadata(file);
console.log(meta); // { duration: 10, width: 1920, height: 1080 }

Generating video thumbnails

function generateThumbnail(file, seekTime = 1) {
  return new Promise((resolve) => {
    const video = document.createElement('video');
    const canvas = document.createElement('canvas');
    video.src = URL.createObjectURL(file);
    video.currentTime = seekTime;
    video.onseeked = () => {
      canvas.width = video.videoWidth;
      canvas.height = video.videoHeight;
      canvas.getContext('2d').drawImage(video, 0, 0);
      resolve(canvas.toDataURL('image/jpeg'));
      URL.revokeObjectURL(video.src);
    };
  });
}

Testing different video formats

Test that your upload handler correctly identifies and processes different formats:

• MP4 (H.264) — universal support
• WebM (VP9) — open format, Chrome/Firefox
• MOV (QuickTime) — iPhone recordings
• AVI — legacy format compatibility

Server-side processing with FFmpeg

# Transcode uploaded video to web-friendly format
ffmpeg -i upload.mov -c:v libx264 -c:a aac -movflags +faststart output.mp4

# Generate thumbnail at 1 second
ffmpeg -i upload.mp4 -ss 1 -vframes 1 -q:v 2 thumbnail.jpg

# Get video info
ffprobe -v error -show_format -show_streams upload.mp4

Testing checklist

• Upload works for MP4, WebM, MOV
• Portrait/landscape detection works correctly
• Progress bar shows during upload
• Thumbnail generation succeeds
• Large files (100MB+) don't timeout
• Invalid files show clear error messages