136 lines
3.2 KiB
Markdown
136 lines
3.2 KiB
Markdown
# 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"`
|
|
|