Video files can be large due to the amount of data they contain. Luckily there are various ways you can compress a video.
This demo adjusts resolution, frames per second (fps) and a compression factor. One way to compress video is to use desktop editing software or a command line tool like ffmpeg.
Instead, this online demo lets you upload a file, adjust settings via a form and generate a compressed video.
This online demo compresses video using three techniques:
First, you can adjust the resolution. By making the video smaller you reduce the video file size.
The video will be smaller when viewed but can stretch to fill the screen. If you have a large video and will watch it on a mobile, this makes a lot of sense.
Second, you can reduce the framerate. Videos use a sequence of still images, displayed very fast, to create the illusion of motion. By removing some of these frames, so that the eye won't notice, you can reduce the file size.
Finally, there is a compression setting. The more compression you use the smaller the output file size. Compression does reduce the visual quality by a small degree.
This demo is created using the Shotstack video editing API. The front-end interface is built using an HTML form with Bootstrap and a simple jQuery script.
The jQuery script takes the settings and sends them to an Express Node.js application. The Node.js application POSTs the video settings and file URL to the Shotstack API. The Shotstack API resizes and modifies the file to generate a compressed video.
You can download the open source code for the project from GitHub.
curl --request POST 'https://api.shotstack.io/v1/render' \
--header 'x-api-key: YOUR_API_KEY' \
--data-raw '{
"timeline": {
"tracks": [
{
"clips": [
{
"asset": {
"type": "video",
"src": "https://shotstack-assets.s3.amazonaws.com/footage/beach-overhead.mp4"
},
"start": 0,
"length": "auto"
}
]
}
]
},
"output": {
"format": "mp4",
"size": {
"width": 1280,
"height": 720
}
}
}'