Estaba tratando de recortar videos con cropper.js, pero por lo que entiendo es imposible y solo funciona para fotos. He buscado en todas partes recursos para hacerlo, pero no pude encontrar nada. Si no sabe de lo que estoy hablando, me gustaría algo como esto https://codesandbox.io/s/react-easy-crop-for-videos-lfhme pero usa JavaScript en lugar de React. La razón por la que no quiero cambiar a un marco de frontend es porque estoy usando Django para mi backend, y no me siento cómodo cambiando a API y usando React o Vue, ya que estoy muy avanzado en mi proyecto. También quiero evitar el uso de una arquitectura híbrida si es posible. Si alguien conoce alguna biblioteca o repositorio que pueda consultar, eso podría ayudarme, sería muy apreciado.

En caso de que pueda usar videos en cropper.js, aquí está mi código fuente.

 // 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' }); }); });