Skip to main content
Make sure you’ve completed the installation steps before proceeding.

​
Compress your first video

Follow these steps to compress a video file using Video Compressor.
1

Start the application

Launch Video Compressor from your terminal:
npm start
An Electron window will open with the Video Compressor interface.
2

Select a video file

Click the file input button to open your system’s file picker. Select any video file you want to compress.
The application accepts all common video formats supported by FFmpeg (MP4, AVI, MOV, MKV, etc.).
3

Compress the video

Click the Compress Video button to start the compression process.The application will:
  • Copy your video to a temporary location
  • Process it with FFmpeg using optimized settings (1000k bitrate)
  • Display real-time progress updates
  • Save the compressed version to the videooutputs directory
// From renderer.js - compression configuration
ffmpeg(tempPath)
  .outputOptions('-b:v 1000k')
  .on('progress', (progress) => {
    const percent = Math.round(progress.percent);
    progressBar.style.width = percent + '%';
  })
  .on('end', () => {
    output.innerText = 'Compression complete!';
  })
  .save(path.join('videooutputs', 'compressed_' + file.name));
4

Find your compressed video

Once compression completes, your video will be saved in the videooutputs directory with a compressed_ prefix.For example, if your original file was vacation.mp4, the compressed file will be compressed_vacation.mp4.
Click the View Compressed Videos link in the application to see all your compressed videos and play them directly in the app.

​
Monitor compression progress

The application includes a progress bar that updates in real-time during compression:
  • The progress bar displays the percentage completed
  • FFmpeg reports progress events throughout the compression process
  • When complete, you’ll see a “Compression complete!” message
// From renderer.js:34-37 - progress tracking
.on('progress', (progress) => {
  const percent = Math.round(progress.percent);
  progressBar.style.width = percent + '%';
  console.log('Compression progress:', percent + '%');
})

​
View compressed videos

After compressing videos, you can view them directly in the application:
  1. Click the View Compressed Videos link
  2. The app reads all MP4 files from the videooutputs directory
  3. Videos are displayed with built-in playback controls
// From renderer.js:57-80 - viewing functionality
document.getElementById('view-videos-tab').addEventListener('click', async () => {
  const videoOutputsPath = path.join(__dirname, 'videooutputs');
  const files = await fs.promises.readdir(videoOutputsPath);
  
  files.forEach(file => {
    if (file.endsWith('.mp4')) {
      const videoElement = document.createElement('video');
      videoElement.src = path.join(videoOutputsPath, file);
      videoElement.controls = true;
      videoContainer.appendChild(videoElement);
    }
  });
});

​
Troubleshooting

If you see “Please select a video file”, make sure you’ve clicked the file input and selected a valid video file before clicking the Compress button.
Check that the videooutputs directory exists in your project root. Create it if missing:
mkdir videooutputs
The progress bar feature is currently work in progress. The compression will still complete successfully, but progress updates may not display correctly.

​
Next steps

Video compression

Learn about compression settings and customization

Progress tracking

Understand how progress monitoring works

Configuration

Customize compression settings and output options

Troubleshooting

Common issues and solutions

Build docs developers (and LLMs) love

Get started for freeTalk to us