Mike Johnston 587688e5f8
All checks were successful
Build Images and Deploy / Update-PROD-Stack (push) Successful in 1m34s
canvas based cropping
2026-02-09 17:00:37 -05:00
2026-02-09 16:52:27 -05:00
2026-02-09 17:00:37 -05:00
2026-02-09 16:52:27 -05:00
2026-02-09 16:52:27 -05:00
2026-02-09 16:52:27 -05:00
2026-02-09 16:52:27 -05:00
2026-02-09 16:54:38 -05:00
2026-02-09 16:52:27 -05:00
2026-02-09 16:52:27 -05:00

🎬 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, resize, and convert videos to H.264 MP4 format.

Features

  • 📹 Video Upload: Drag and drop or browse to upload videos (supports MP4, AVI, MOV, MKV, WMV, FLV, WebM)
  • ⏱️ Trim: Cut videos by specifying start and end times
  • ✂️ Crop: Crop videos by defining X/Y position and dimensions
  • 📐 Resize: Change output resolution with preset options (4K, 1080p, 720p, 480p) or custom dimensions
  • 🎯 H.264 Export: All videos are exported as H.264 MP4 with optimized settings
  • 🖥️ Intuitive UI: Clean, modern interface with real-time video preview

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

    python app.py
    
  4. Open in Browser: Navigate to http://localhost:5000

Option 2: Run with Docker

Prerequisites

  • Docker installed
  • Docker Compose installed

Steps

  1. Build and Run:

    docker-compose up --build
    
  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 empty to skip cropping

Step 3: Process and Download

  • Click "🎬 Process Video" to start encoding
  • Wait for processing to complete (time depends on video length and settings)
  • Click "⬇️ Download Video" to save the processed file

🛠️ Technical Details

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
├── templates/
│   └── index.html        # Frontend UI
├── requirements.txt      # Python dependencies
├── Dockerfile           # Docker image configuration
├── 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

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

  • Verify file size is under 500MB
  • Check file format is supported
  • Ensure uploads/ folder has write permissions

🔒 Security Considerations

Note: This application is designed for local or self-hosted use. For production deployment:

  1. Add authentication/authorization
  2. Implement rate limiting
  3. Validate and sanitize all inputs
  4. Add HTTPS support
  5. Configure proper CORS policies
  6. Implement file cleanup routines
  7. Add virus scanning for uploaded files

📝 License

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
Description
No description provided
Readme 296 KiB
Languages
HTML 85.9%
Python 13.2%
Dockerfile 0.9%