# 🎬 Simple Video Editor

A lightweight, web-based video editor with an intuitive interface for basic video editing tasks. Built with Flask and FFmpeg, it allows you to trim, crop, scale, rotate, and convert videos to H.264 MP4 format with interactive visual controls.

## ✨ Features

### Video Input/Output
- **📹 Video Upload**: Drag and drop or browse to upload videos (supports MP4, AVI, MOV, MKV, WMV, FLV, WebM)
- **🎯 H.264 Export**: All videos are exported as H.264 MP4 with optimized settings
- **💾 Smart Filenames**: Downloads preserve original filename with "_processed" suffix and unique timestamp
- **📊 Video Info**: Displays resolution, duration, codec details

### Editing Features

#### ⏱️ Trim Video
- **Visual Time Selection**: Play video and click buttons to set trim points at current playback position
- **Live Time Display**: Shows current video position in real-time (MM:SS.ms format)
- **Manual Input**: Fine-tune start/end times with precise second inputs

#### ✂️ Crop Video
- **Interactive Canvas Selection**: Click and draw directly on video to select crop area
- **Visual Feedback**: Semi-transparent overlay shows what will be removed
- **Real-time Dimensions**: Displays actual video pixel dimensions while dragging
- **Manual Input**: Enter exact crop position (X/Y) and dimensions
- **Automatic Adjustment**: Ensures even dimensions for H.264 compatibility

#### 📐 Output Scale
- **Percentage-based Scaling**: Scale from 10% to 100% in 5% increments
- **Preset Options**: Quick buttons for 100%, 75%, 50%, 25%
- **Smart Cropping**: Scale applies to cropped area (if crop selected) or original video
- **Live Preview**: Shows final output resolution with even dimensions

#### 💾 Compression Quality
- **CRF Control**: Adjust H.264 quality from CRF 18 (best) to 32 (smallest)
- **Smart Presets**: Best Quality, High, Balanced, Low, Smallest File
- **Visual Feedback**: Shows quality label and CRF value in real-time
- **File Size Control**: Balance between quality and file size

#### ⚡ Quick Actions
- **🔇 Mute Audio**: Remove audio track completely
- **🔄 Rotate**: Rotate video 90°, 180°, 270° or back to original
- **Visual State**: Buttons show active state and rotation amount

### User Experience
- **🖥️ Centered Video Preview**: Large, centered video display for easier editing
- **📱 Responsive Design**: Clean, modern gradient interface
- **🎨 Visual Feedback**: Button states, loading indicators, error messages
- **🔄 Reset Controls**: Start over or process another video with clean state
- **💡 Helpful Hints**: Contextual tips explain how each feature works

## 🚀 Quick Start

### Option 1: Run on Windows (Local)

#### Prerequisites
- Python 3.11 or higher
- FFmpeg installed and available in PATH

#### Installation Steps

1. **Install FFmpeg**:
   - Download from [ffmpeg.org](https://ffmpeg.org/download.html)
   - Extract and add to your system PATH
   - Verify installation: `ffmpeg -version`

2. **Install Python Dependencies**:
   ```powershell
   pip install -r requirements.txt
   ```

3. **Run the Application**:
The editor provides features in logical order:

#### 1. Trim Video
- **Play the video** and pause at desired point
- Click **"⏮️ Set Start Here"** to mark the beginning
- Play to the end point and click **"⏭️ Set End Here"**
- Current video position shows in real-time above buttons
- Fine-tune with manual second inputs if needed

#### 2. Crop Video
- Click **"🎯 Click to Draw Crop Area"** button (under video info)
- **Click and drag** on the video to select the area to keep
- Purple rectangle shows selected area with pixel dimensions
- Darkened area shows what will be removed
- Release mouse to apply crop coordinates
- Or manually enter X/Y position and width/height values

#### 3. Output Scale
- Use slider to scale from 10% to 100%
- Click preset buttons for quick scaling (100%, 75%, 50%, 25%)
- Scale applies to cropped area, or full video if no crop
- Example: 200x400 crop at 50% = 100x200 output
- Dimensions automatically rounded to even numbers for H.264

#### 4. Compression Quality
- Adjust slider from CRF 18 (best quality) to 32 (smallest file)
- Default is CRF 23 (balanced)
- Lower CRF = larger files, better quality
- Higher CRF = smaller files, more compression
- Use presets: Best Quality, High, Balanced, Low, Smallest File

#### 5. Quick Actions
- **Mute Audio**: Click to remove audio track entirely
- **Rotate 90°**: Click repeatedly to rotate (90° → 180° → 270° → 0°)
- Buttons show active state when applied
2. **Open in Browser**:
   Navigate to `http://localhost:5000`

3. **Stop the Application**:
   ```bash
   docker-compose down
   ```

## 📖 Usage Guide

### Step 1: Upload Video
- Click the upload area or drag and drop a video file
- Supported formats: MP4, AVI, MOV, MKV, WMV, FLV, WebM
- Maximum file size: 500MB

### Step 2: Edit Video

#### Trim Video
- Set **Start Time** (in seconds) where the video should begin
- Set **End Time** (in seconds) where the video should end
- Leave at default values to keep the entire video

#### Change Resolution
- Click a preset button for common resolutions:
  - 4K (3840x2160)
  - 1080p (1920x1080)
  - 720p (1280x720)
  - 480p (854x480)
  - Original (no resize)
- Or enter custom width and height values

#### Crop Video (Optional)
- **X Position**: Horizontal starting point for crop (0 = left edge)
- **Y Position**: Vertical starting point for crop (0 = top edge)
- **Crop Width**: Width of the cropped area
- **Crop Height**: Height of the cropped area
- Leave eUser-adjustable (18-32, default 23)
  - Audio codec: AAC at 128kbps (unless muted)
  - Rotation: FFmpeg transpose filter
  - Even dimensions: Automatic rounding for H.264 compatibility
  - Fast start enabled for web streaming

### Frontend
- Pure HTML, CSS, and JavaScript (no frameworks)
- HTML5 Canvas for interactive crop selection
- Real-time video metadata display
- Responsive gradient design
- Drag-and-drop file upload
- Live updating scales and quality indicators
### Backend
- **Framework**: Flask 3.0
- **Video Processing**: FFmpeg with libx264 encoder
- **Encoding Settings**:
  - Video codec: H.264 (libx264)
  - Preset: medium (balance between speed and quality)
  - CRF: 23 (good quality)
  - Audio codec: AAC at 128kbps
  - Fast start enabled for web streaming

### Frontend
- Pure HTML, CSS, and JavaScript (no frameworks)
- Responsive design
- Drag-and-drop file upload
- Real-time video preview

## 📁 Project Structure

```
editor/
├── app.py                 # Flask backend application
The quality is now user-adjustable via the UI. Default backend settings in `app.py`:
```python
'-crf', str(quality),  # User-selected CRF (18-32)
'-preset', 'medium',  # ultrafast, superfast, veryfast, faster, fast, medium, slow, slower, veryslow
```

### Scaling and Dimensions
Scale is percentage-based and ensures H.264 compatibility:
```python
# Force even dimensions
scale_filter = f"scale=trunc(iw*{scale_percentage/100}/2)*2:trunc(ih*{scale_percentage/100}/2)*2"
├── docker-compose.yml   # Docker Compose configuration
├── .gitignore          # Git ignore rules
├── uploads/            # Temporary upload storage (auto-created)
└── outputs/            # Processed video storage (auto-created)
```

## 🔧 Configuration

### File Size Limit
- Odd dimensions error: The app now auto-rounds to even dimensions

### Crop selection not accurate
- The displayed dimensions while dragging show actual video pixels (not screen pixels)
- Canvas automatically scales between display size and actual video resolution
Edit in `app.py`:
```python
app.config['MAX_CONTENT_LENGTH'] = 500 * 1024 * 1024  # 500MB
```

### FFmpeg Encoding Quality
Edit in `app.py` (process_video function):
```python
'-crf', '23',  # Lower = better quality (18-28 recommended)
'-preset', 'medium',  # ultrafast, superfast, veryfast, faster, fast, medium, slow, slower, veryslow
```

### Port Configuration
- **Local**: Edit `app.py` - change `port=5000`
- **Docker**: Edit `docker-compose.yml` - change `"5000:5000"` to `"YOUR_PORT:5000"`

## 🐛 Troubleshooting

### "FFmpeg not found" error
- **Windows**: Ensure FFmpeg is installed and in your PATH
- **Docker**: Rebuild the container: `docker-compose up --build`

### Video processing fails
- Check video format is supported
- Ensure sufficient disk space
- Check FFmpeg console output in the terminal

### Upload fails
- Ve� Feature Workflow Examples

### Example 1: Create Social Media Clip
1. Upload full-length video
2. Play and set start/end to extract 15-second segment
3. Draw crop to make it vertical (9:16)
4. Scale to 50% for smaller file
5. Set quality to "High" (CRF 21)
6. Process and download

### Example 2: Fix Phone Video
1. Upload sideways phone video
2. Click "Rotate 90°" once or multiple times
3. Optionally crop edges
4. Keep scale at 100%
5. Set quality to "Balanced" (CRF 23)
6. Process and download

### Example 3: Create Silent GIF-style Video
1. Upload video
2. Trim to desired segment
3. Click "Mute Audio"
4. Scale to 25% for tiny file size
5. Set quality to "Low" (CRF 26)
6. Process for small, silent video

## 🎯 Design Philosophy

This editor prioritizes:
- **Simplicity**: No complex timeline or multi-track editing
- **Visual Feedback**: See exactly what you're doing with live previews
- **Speed**: Quick single-video processing without render queues
- **Accessibility**: No installation needed (web-based)
- **Self-hosting**: Run locally or deploy privately with Docker

## 📝 License

This project is provided as-is for personal and educational use.

## 🤝 Contributing

Feel free to fork, modify, and submit pull requests for improvements!
This project is provided as-is for personal and educational use.

## 🤝 Contributing

Feel free to fork, modify, and submit pull requests for improvements!

## 💡 Future Enhancements

- Add watermark support
- Audio volume adjustment
- Multiple video concatenation
- Filters and effects (brightness, contrast, saturation)
- Batch processing
- Progress bar for encoding
- Video rotation
- Subtitle support