FFMPEG Video Editor for Web

Video Options

Video Filesize: ???
Video Width: ???
Video Height: ???

Edit Options

Crop the video to the specified region.
Crop Left:
Crop Right:
Crop Top:
Crop Bottom:
Scale the video to the specified width and height. (Note: FFMPEG cannot handle odd values.)
Width:
Height:
Lock Aspect Ratio:
Trim the video to the specified start and end. Timestamps are in format HH:MM:SS.MILLISEC.
Pad the video to the specified width and height with specified color. (Note: FFMPEG cannot handle odd values.)
New Width:
New Height:
Padding Color:

Trancoding Options

Select Edit:
FFMPEG Command: 
ffmpeg -i video.mp4 -filter:v crop=1090:748:340:72 output.mp4

About

How to Use: Choose a video, then pick a type of Edit from the Transcoding Options. Hit Apply Edit and the edited video will show in the video player. If you like it, hit Save Edited Video, or hit Restore Original Video to start over.

Feedback: Please leave any comments / issues on the github discussion page.

This video editor runs completely inside your browser on any file that you choose. It does not upload anything. It runs FFMPEG compiled to WebAssembly. Unfortunately it's a little slow on larger files, so you can also just copy the FFMPEG command or use the reference below to run FFMPEG locally.

I could never find a simple video editor that just worked and did what I needed it to so I often resorted to using FFMPEG, even for professional usage. The drawback is it can be difficult to learn how to use, and it's also a command-line only tool. This adds a graphical interface, and teaches the corresponding commands (though it's not exhaustive by any means).

FFMPEG Reference

Crop

Crop out a smaller part of the video. X and Y refer to the top left corner of the video, and WIDTH and HEIGHT refer to the width and height of the cropped region.

ffmpeg -i video.mp4 -filter:v "crop={WIDTH}:{HEIGHT}:{X}:{Y}" output.mp4

Scale

Scales video to size. Does not work with odd numbers. More information.

ffmpeg -i input.avi -s 720x480 -c:a copy output.mkv

Trim

Change start and end time of video and re-encode video. Timestamps are in format of HH:MM:SS.MILLISECONDS. If re-encoding is not done, certain portions may be frozen or paused, because FFMPEG will only use nearest keyframe.

ffmpeg -i input.mp4 -ss 00:05:10 -to 00:15:30 output2.mp4

Ping-pong (boomerang)

Plays the video twice, but the second time is in reverse, making a perfect loop.

ffmpeg -i video.mp4 -filter_complex "[0:v]reverse,fifo[r];[0:v][r]concat=n=2:v=1[v]" -map "[v]" output.mp4

Loop

Loops the video without re-encoding, very fast. More information.

ffmpeg -stream_loop 3 -i video.mp4 -c copy output.mp4

Converting to mp4

Helpful for when you take a high quality screencapture or video and need to upload it to somewhere that has a filesize restriction since the filesize after converting to mp4 is a lot smaller.

ffmpeg -i video.mov -vcodec h264 -acodec mp2 output.mp4

If you get this error "ffmpeg (libx264) "height not divisible by 2*", then try using the following command:

ffmpeg -i video.mov -vcodec h264 -acodec mp2 -vf "pad=ceil(iw/2)*2:ceil(ih/2)*2" output.mp4

Speed up or slowing down video

"0.5" in the below example is multiplied by the presentation timestamps in order to change the playback speed of the video. Multiplying all the timestamps by 0.5 actually speeds up the video by 2x. If the playback rate is y, then the multiplier should be 1/y

ffmpeg -i input.mkv -filter:v "setpts=0.5*PTS" output.mkv

Add padding (letterboxing) to video

This command is used to pad the video with a solid color. In the below example, let's say that the original video is 400x500, but we want to add some padding to the top and bottom, such that the output video is 400x760 without scaling the original video. More information.

ffmpeg -i input.mp4 -vf "scale=(iw*sar)*min(400/(iw*sar)\,760/ih):ih*min(400/(iw*sar)\,760/ih), pad=400:760:(400-iw*min(400/iw\,760/ih))/2:(760-ih*min(400/iw\,760/ih))/2:color=black" output.mp4

Layout videos side-by-side

hstacks lays out videos horizontally, and vstack vertically.

ffmpeg -i left.mp4 -i right.mp4 -filter_complex hstack=inputs=2 output.mp4

Extracting frames

Various versions of extracting still images from video. %03d means filenames labeled like: frame_001.jpg, frame_002.jpg... and %d means frames labeled like: frame_1.jpg, frame_2.jpg.

Extract all frames

ffmpeg -i video.mpg $filename%03d.png

Extract every nth frame

ffmpeg -i img_0267.mov -vf "select=not(mod(n\,10))" -vsync vfr frames/$filename%03d.png

Extract first frames

ffmpeg -i in.mp4 -vf select="eq(n\,0)" -vsync 0 frames%d.png

Extract list of frames

ffmpeg -i in.mp4 -vf select="eq(n\,100)+eq(n\,184)+eq(n\,213)" -vsync 0 frames%d.jpg

Video metadata

Finding out video metadata uses ffprobe that comes packaged with ffmpeg.

Count number of frames

ffprobe -v error -select_streams v:0 -show_entries stream=n_frames of default=nokey=1:noprint_wrappers=1 img_0267.mov

Precise frame rate

ffprobe img_0267.mov -v 0 -select streams v _print format flat show_entries stream=r_frame_rate

Viewing keyframe info

ffprobe -loglevel error -select_streams v:0 -show_entries packet=pts_time,flags -of csv=print_section=0 bike.mp4 | awk -F ',' '/K/ {print $1}'

Rotate video (transpose)

ffmpeg -i input.mp4 -vf "transpose=1" output.mp4

Concatenate videos

ffmpeg -i out.mp4 -i out2.mp4 -filter_complex "[0:v][1:v]concat=n=2:v=1[v]" -map "[v]" concat.mp4

Adding/re-generating keyframes to a video

Keyint refers to how many frames should there be before a keyframe is generated.

ffmpeg -i input.mp4 -vcodec libx264 -x264-params keyint=10 -c:a copy out.mp4

Generating a test video

ffmpeg -f lavfi -i testsrc=size=1280x720 -t 4 -pix_fmt yuv420p testsrc.mp4

Creating a video from frames

Frames can be referenced using %03d (frame_001.jpg, frame_002.jpg, ...) or %d (frame_1.jpg, frame_2.jpg, ...).

ffmpeg -framerate 10 -i %03d.png -c:v libx264 -vf fps=10 -pix_fmt yuv420p out.mp4

On unix based systems, frames can also be enumerated using pattern glob (doesn't work on Windows).

ffmpeg -framerate 10 -pattern_type glob -i "*.jpg" -c:v libx264 -vf fps=10 -pix_fmt yuv420p out.mp4

The frames can also be scaled to a certain size, for instance if the dimensions are odd, they can be resized to be even (since FFMPEG doesn't like odd dimensions).

ffmpeg -framerate 10 -i %03d.png -c:v libx264 -vf scale=900x900,fps=10 -pix_fmt yuv420p out.mp4

Creating a slideshow video from frames

ffmpeg -framerate 10 -loop 1 -pattern_type glob -i "*.jpg" -c:v libx264 -pix_fmt yuv420p out.mp4

Creating a gif from frames (with imagemagick)

Not an FFMPEG command, but this uses imagemagick, a similar program for images. Delay is the time delay between frames specified in milliseconds. loop is the number of times to loop the gif, 0 meaning loop forever.

convert -delay 50 photo_306_* -loop 0 photo_306.gif