archy-demo/neode-ui/OPTIMIZE_VIDEO_NOW.md

Quick Video Optimization Guide

Current Status

• Video File: public/assets/video/video-intro.mp4
• Current Size: ~18MB
• Target: Optimize to ~1MB for fast web loading

Step 1: Install FFmpeg (if not already installed)

brew install ffmpeg

Step 2: Run Optimization Script (1MB Target)

Once FFmpeg is installed, run:

cd neode-ui
./optimize-video-1mb.sh

This will:

• ✅ Create a backup of your original video
• ✅ Optimize using H.264 with CRF 30 (good quality, smaller file)
• ✅ Scale to 1280x720 (HD resolution)
• ✅ Reduce frame rate to 30fps
• ✅ Compress audio to 64kbps
• ✅ Add faststart flag for web streaming
• ✅ Target ~1MB file size
• ✅ Replace original with optimized version

Expected Results

• Original: ~18MB
• Optimized: ~1-2MB (90-95% reduction)
• Quality: Good quality (suitable for background video)
• Loading: 10-20x faster

Manual Command (Alternative - 1MB Target)

If you prefer to run manually:

cd neode-ui/public/assets/video

# Backup original
cp video-intro.mp4 video-intro-backup.mp4

# Optimize for ~1MB (CRF 30, 1280x720, 30fps)
ffmpeg -i video-intro.mp4 \
  -c:v libx264 \
  -preset slow \
  -crf 30 \
  -profile:v high \
  -level 4.0 \
  -pix_fmt yuv420p \
  -vf "scale=1280:720:force_original_aspect_ratio=decrease,pad=1280:720:(ow-iw)/2:(oh-ih)/2" \
  -r 30 \
  -c:a aac \
  -b:a 64k \
  -ar 44100 \
  -movflags +faststart \
  -threads 0 \
  video-intro-optimized.mp4

# Replace original
mv video-intro-optimized.mp4 video-intro.mp4

If Still Too Large, Use More Aggressive Settings:

# Even smaller (~500KB-1MB) - CRF 32, 854x480
ffmpeg -i video-intro.mp4 \
  -c:v libx264 \
  -preset slow \
  -crf 32 \
  -profile:v high \
  -level 4.0 \
  -pix_fmt yuv420p \
  -vf "scale=854:480:force_original_aspect_ratio=decrease,pad=854:480:(ow-iw)/2:(oh-ih)/2" \
  -r 24 \
  -c:a aac \
  -b:a 48k \
  -ar 44100 \
  -movflags +faststart \
  video-intro-small.mp4

After Optimization

1. Update cache version in code:

   • SplashScreen.vue: Change ?v=3 to ?v=4
   • OnboardingWrapper.vue: Change ?v=3 to ?v=4

2. Test the video:

   • Verify smooth playback
   • Check looping works correctly
   • Test on mobile devices

Quality Settings Explained (1MB Target)

• CRF 30: Good quality (recommended for 1MB target)

  • Good visual quality suitable for background video
  • ~1-2MB file size
  • Best balance for web

• CRF 28: Better quality

  • Higher quality, ~2-3MB file size
  • Use if 1MB is too aggressive

• CRF 32: Smaller file

  • Lower quality but still acceptable
  • ~500KB-1MB file size
  • Use if you need to hit 1MB exactly

Recommendation: Start with CRF 30, adjust based on results.

Troubleshooting

Script fails

• Ensure FFmpeg is installed: brew install ffmpeg
• Check file permissions: chmod +x optimize-video.sh
• Verify video file exists: ls -lh public/assets/video/video-intro.mp4

Quality not good enough

• Use CRF 15 instead of 18 (larger file, better quality)
• Use preset veryslow instead of slow (slower encoding, better compression)

File still too large

• Use CRF 20-23 (smaller file, slight quality trade-off)
• Reduce resolution if video is 4K: add -vf "scale=1920:1080"