n4n5

Introducing ffmpeg-cropper. Drag and drop your video and select the crop area. The tool will generate the ffmpeg filter for you (you can even play the video to check if the crop is correct).

Links:

• https://n4n5.dev/ffmpeg-cropper/
• https://github.com/Its-Just-Nans/ffmpeg-cropper

---

Most important part of the code are

• the drop zone

  <div
      ondrop="dropHandler(event);"
      ondragover="dragOverHandler(event, true);"
      ondragleave="dragOverHandler(event, false);"
  >

  The ondragover and ondragleave should call event.preventDefault(); to allow the drop

• the (video) file to src conversion

  const fileURL = window.URL.createObjectURL(file);
  video = document.createElement("video");
  video.src = fileURL;

  Note that createObjectURL can use a lot of memory, so don’t forget to revoke the URL when you don’t need it anymore with window.URL.revokeObjectURL(fileURL);