Is there any way to crop videos in JavaScript with a crop box, without using React or Vue?

Question

I was trying to crop videos with cropper.js, but from what I understand that it is impossible and only works for photos. I've looked everywhere for resources to do such, but I couldn't find anything. If you don't know what I am talking about I would like something like this https://codesandbox.io/s/react-easy-crop-for-videos-lfhme but uses JavaScript instead of React. The reason I don't want to switch to a frontend framework is because I am using Django for my backend, and am not comfortable with switching to APIs, and using React or Vue, since I am really far into my project. I also want to avoid using a hybrid architecture if possible. If anyone knows of any libraries or repositories I can check out that might help me that would be much appreciated.

Just in case I can use videos in cropper.js here is my source code.

    // file-box is the id of the div element that will store our cropping file preview
    const filebox = document.getElementById('file-box')
        // crop-btn is the id of button that will trigger the event of change original file with cropped file.
    const crop_btn = document.getElementById('crop-btn')
    // id_file is the id of the input tag where we will upload the file
    const input = document.getElementById('id_file')

    // When user uploads the file this event will get triggered
    input.addEventListener('change', ()=>{
      // Getting file file object from the input variable
      const img_data = input.files[0]
      // createObjectURL() static method creates a DOMString containing a URL representing the object given in the parameter.
      // The new object URL represents the specified File object or Blob object.
      const url = URL.createObjectURL(img_data)

      // Creating a file tag inside filebox which will hold the cropping view file(uploaded file) to it using the url created before.
      filebox.innerHTML = `<img src="${url}" id="file" style="width:100%;">`
      // Storing that cropping view file in a variable
      const file = document.getElementById('file')

      // Displaying the file box
      document.getElementById('file-box').style.display = 'block'
      // Displaying the Crop buttton
      document.getElementById('crop-btn').style.display = 'block'
      // Hiding the Post button
      document.getElementById('confirm-btn').style.display = 'none'

      // Creating a croper object with the cropping view file
      // The new Cropper() method will do all the magic and diplay the cropping view and adding cropping functionality on the website
      // For more settings, check out their official documentation at https://github.com/fengyuanchen/cropperjs
      const cropper = new Cropper(file, {
      autoCropArea: 1,
      aspectRatio: 1/1,
      viewMode: 1,
      scalable: false,
      zoomable: false,
      movable: false,
      minCropBoxWidth: 200,
      minCropBoxHeight: 200,
      })

      // When crop button is clicked this event will get triggered
      crop_btn.addEventListener('click', ()=>{
        // This method coverts the selected cropped file on the cropper canvas into a blob object
        cropper.getCroppedCanvas().toBlob((blob)=>{

          // Gets the original file data
          let fileInputElement = document.getElementById('id_file');
          // Make a new cropped file file using that blob object, file_data.name will make the new file name same as original file
          let file = new File([blob], img_data.name,{type:"file/*", lastModified:new Date().getTime()});
          // Create a new container
          let container = new DataTransfer();
          // Add the cropped file file to the container
          container.items.add(file);
          // Replace the original file file with the new cropped file file
          fileInputElement.files = container.files;

          // Hide the cropper box
          document.getElementById('file-box').style.display = 'none'
          // Hide the crop button
          document.getElementById('crop-btn').style.display = 'none'
          // Display the Post button
          document.getElementById('confirm-btn').style.display = 'block'

          });
        });
    });

Answer 1

You didn't explain your use case in much detail, but if you just want to crop videos with a few known aspect ratio options, you can do this pretty easily do this with vanilla HTML, CSS, and JavaScript.

HTML:

<div class="crop-container aspect-ratio-16x9">
   <video id="the-video" autoplay>
       <source src="https://vid.ly/5u4h3e?content=video" type="video/mp4">
   </video>
</div>

CSS:

.crop-container {
    overflow:hidden;
    display:flex;
    align-items: center;
    justify-content: center;
    height: 0;
    position: relative;
}

.crop-container video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 100%;
}

.aspect-ratio-16x9 {
  padding-top: calc(9 / 16 * 100%);
}

.aspect-ratio-4x3 {
  padding-top: calc(3 / 4 * 100%);
}

The aspect ratio is always the height divided by the width * 100%.

And then you can apply the the classes however you want, for example:

function switchAspectRatio(ratio) {
  const el = document.querySelector('.crop-container');
  
  // Remove any previous aspect ratios
  for (let i = el.classList.length - 1; i >= 0; i--) {
      const className = el.classList[i];
      if (className.startsWith('aspect-ratio-')) {
          el.classList.remove(className);
      }
  }
  
  // Add the new one
  el.classList.add(`aspect-ratio-${ratio}`);
}

Here's an example fiddle.