A modern, web-based video converter built with Next.js and FFmpeg that allows you to convert videos between multiple formats with professional quality settings.
- Multiple Format Support: Convert between MP4, AVI, MOV, WMV, WebM, MKV, FLV, and M4V
- Quality Control: Choose from High, Medium, or Low quality settings
- Drag & Drop Interface: Intuitive file upload with visual feedback
- Real-time Progress: Monitor conversion progress with detailed status updates
- Professional UI: Beautiful, responsive design built with Radix UI and Tailwind CSS
- Client-side Processing: All conversions happen in your browser using WebAssembly
- Batch Processing: Convert multiple files simultaneously
- No Server Required: Complete client-side solution for privacy and speed
- Frontend: Next.js 15, React 19, TypeScript
- Styling: Tailwind CSS, Radix UI Components
- Video Processing: FFmpeg WebAssembly (@ffmpeg/ffmpeg)
- File Handling: React Dropzone, File API
- State Management: React Hooks
- Build Tool: Next.js with PostCSS and Autoprefixer
- Node.js 18+
- npm or yarn
-
Clone the repository
git clone https://github.com/yourusername/video-converter.git cd video-converter -
Install dependencies
npm install # or yarn install -
Run the development server
npm run dev # or yarn dev -
Open your browser Navigate to http://localhost:3000
- Upload Videos: Drag and drop video files or click to browse
- Configure Settings: Choose output format and quality level
- Start Conversion: Click "Start Conversion" to begin processing
- Download Results: Download your converted videos when ready
- MP4 (.mp4) - Most compatible format
- AVI (.avi) - High quality, larger files
- MOV (.mov) - Apple QuickTime format
- WMV (.wmv) - Windows Media format
- WebM (.webm) - Web optimized format
- MKV (.mkv) - Open source container
- FLV (.flv) - Flash video format
- M4V (.m4v) - iTunes compatible format
- High Quality: Best quality, larger file size (CRF 18, slow preset)
- Medium Quality: Balanced quality and size (CRF 23, medium preset)
- Low Quality: Smaller file size, lower quality (CRF 28, fast preset)
video-converter/
├── app/ # Next.js app directory
│ ├── globals.css # Global styles
│ ├── layout.tsx # Root layout component
│ └── page.tsx # Main video converter page
├── components/ # Reusable UI components
│ ├── ui/ # Radix UI components
│ └── theme-provider.tsx # Theme context provider
├── lib/ # Utility libraries
│ ├── utils.ts # Helper functions
│ └── video-converter.ts # FFmpeg video conversion logic
├── public/ # Static assets
├── styles/ # Additional styles
└── package.json # Dependencies and scripts
npm run dev # Start development server
npm run build # Build for production
npm run start # Start production server
npm run lint # Run ESLint- VideoConverter: Main page component with drag & drop interface
- VideoConverter Class: FFmpeg wrapper for video processing
- UI Components: Reusable Radix UI components with Tailwind styling
The application uses FFmpeg WebAssembly for professional-grade video conversion:
- Codec Support: H.264, VP9, AAC, MP3, Opus
- Optimization: Preset-based encoding for quality/speed balance
- Format Detection: Automatic input format recognition
- Error Handling: Graceful fallback with mock conversion for demo
- Mobile First: Optimized for all device sizes
- Dark/Light Theme: Automatic theme detection and switching
- Accessibility: ARIA labels and keyboard navigation support
- Performance: Optimized rendering with React best practices
- Connect Repository: Link your GitHub repository to Vercel
- Auto-deploy: Every push to main branch triggers deployment
- Environment Variables: Configure any necessary environment variables
- Custom Domain: Add your custom domain if desired
The application can be deployed to any platform that supports Next.js:
- Netlify: Use
next build && next export - AWS Amplify: Direct GitHub integration
- Docker: Build and deploy as container
We welcome contributions! Please see our contributing guidelines:
- Fork the repository
- Create a feature branch:
git checkout -b feature/amazing-feature - Commit your changes:
git commit -m 'Add amazing feature' - Push to the branch:
git push origin feature/amazing-feature - Open a Pull Request
- Follow TypeScript best practices
- Use conventional commit messages
- Ensure all tests pass
- Update documentation as needed
This project is licensed under the MIT License - see the LICENSE file for details.
- FFmpeg: For the powerful video processing capabilities
- Next.js Team: For the amazing React framework
- Radix UI: For accessible component primitives
- Tailwind CSS: For the utility-first CSS framework
- Issues: GitHub Issues
- Discussions: GitHub Discussions
- Email: your.email@example.com
- Audio Extraction: Convert videos to audio formats
- Video Editing: Basic trimming and cropping
- Batch Presets: Save and reuse conversion settings
- Cloud Storage: Direct upload to cloud services
- API Integration: RESTful API for programmatic access
- Mobile App: React Native companion app
Made with ❤️ by [Your Name]
Transform your videos with professional quality and ease.