Hello,
I am building an app which requires the video to be cropped, and that cropped video needs to be output as a brand new video. So for example, we might have a video with some dimensions (for example 1600x800), and then the user will crop some area (let’s say the top right corner) with some dimensions (let’s say 300x200). This means that the result should be a 300x200 video, which shows the top right corner of the source video.
I am unsure about how to do this with Shotstack. Here’s what I tried:
- Cropping - I tried specifying
crop on source video asset, but that only removes the video segment around the source video. The video still has the same size and the cropped area is still where it was before.
- Resizing and offsetting - I set the size to the output to be the size of the cropped area (300x200 in my example). I also set the fit of the clip to
none. This successfully produced a video with desired dimensions, but the viewport of the video was wrong. I then tried to use the offset to move the clip so that it would fall right into the viewport, but I realized that offset is relative to the new viewport (which in this case was 300x200), and it cannot be more than 1 (or less than -1). Therefore, I could only move my asset by maximum of 300 pixels in this example, but I would need to move it by more than than (given the fact that the original asset is 1600x800).
What is the correct way to achieve this?
Thank you for your help.
We have gone ahead and increased the validation limit to 10 on both the x and y axis.
That should solve the problem for you, otherwise I don’t think there is a workaround. You will still need to work out the maths for this based on the source asset and the output size.
Let us know how you go with those settings, I think you might only need a value of 2-3 but if you get stuck again let us know.
Hey @lucas.spielberg
Thank you so much, that worked! Any reason why the limit is 10 and not infinity?
Also, for anyone wondering, here’s how I compute the offsets:
moveLeftPx = cropLeft * originalWidthPx
moveTopPx = cropTop * originalHeightPx
offsetX = -moveLeftPx / croppedWidthPx
offsetY = moveTopPx / croppedHeightPx
Where:
originalWidthPx and originalHeightPx are dimensions of original video (1600x800 in my original example),
croppedWidthPx and croppedHeightPx are dimensions of the new, cropped video (300x200 in my original example),
cropLeft and cropTop are top and left properties of the crop on the video asset.
In order for this to work, the fit of the clip must be set to none and the position must be topLeft.
1 Like
Awesome, thanks for the code snippet and calculations.
Why 10 - mainly to not confuse users too much. It was orignally set to 1 and -1 as we thought that lets you move an asset completely off screen and you wouldn’t need anything other value.
The thinking was that if we allow any number, a user might think the value is pixels, we wanted to be clear it is a relative amount based on screen width.
10 is an arbitrary number that should allow enough movement for use cases like yours but should still not be confused with pixels.
It’s easy to change if needed as the back end accepts any number so we just update the validation.