🎬 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
   • Extract and add to your system PATH
   • Verify installation: ffmpeg -version

2. Install Python Dependencies:

   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:

   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:

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

app.config['MAX_CONTENT_LENGTH'] = 500 * 1024 * 1024  # 500MB

FFmpeg Encoding Quality

Edit in app.py (process_video function):

'-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<EFBFBD> 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