# 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)

```bash
brew install ffmpeg
```

## Step 2: Run Optimization Script (1MB Target)

Once FFmpeg is installed, run:

```bash
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:

```bash
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:

```bash
# 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"`