Resize a video
You can resize a video in the browser using convertMedia()
function from the @remotion/webcodecs
package.
💼 Important License Disclaimer
🚧 Unstable API
Simple Example​
Scale a video down to 480ptsx
import {convertMedia } from '@remotion/webcodecs';awaitconvertMedia ({src : 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',container : 'mp4',resize : {mode : 'max-height',maxHeight : 480,},});
Resize modes​
For the resize
value, you can specify the following modes:
max-height
​
Scale a video down to 480ptsx
import {ResizeOperation } from '@remotion/webcodecs';constresize :ResizeOperation = {mode : 'max-height',maxHeight : 480,};
Scales a video down so it is at most maxHeight
pixels tall.
max-width
​
Scale a video down to 640 pixels widetsx
import {ResizeOperation } from '@remotion/webcodecs';constresize :ResizeOperation = {mode : 'max-width',maxWidth : 640,};
Scales a video down so it is at most maxWidth
pixels wide.
width
​
Scale a video to 640 pixels widetsx
import {ResizeOperation } from '@remotion/webcodecs';constresize :ResizeOperation = {mode : 'width',width : 640,};
Scales a video to exactly width
pixels wide.
height
​
Scale a video to 480 pixels talltsx
import {ResizeOperation } from '@remotion/webcodecs';constresize :ResizeOperation = {mode : 'height',height : 480,};
Scales a video to exactly height
pixels tall.
max-height-width
​
Scale a video down to 480px height or 640 pixels widthtsx
import {ResizeOperation } from '@remotion/webcodecs';constresize :ResizeOperation = {mode : 'max-height-width',maxHeight : 480,maxWidth : 640,};
Scales a video down so it is at most maxHeight
pixels tall or maxWidth
pixels wide.
The video will be scaled down to the biggest size that fits both constraints.
scale
​
Scale a video to 50%tsx
import {ResizeOperation } from '@remotion/webcodecs';constresize :ResizeOperation = {mode : 'scale',scale : 0.5,};
Scales a video by a factor of scale
. Factor must be greater than 0
.
Order of operations​
If you apply both a rotate
and a resize
operation, the rotate
operation will be applied first.