Video Editor in the Browser: Trim Clips and Export MP4, WebM, or GIF
The most common video edit is also the least creative one. A recording runs for eleven minutes, and the only part worth keeping is the ninety seconds in which something actually happens. Editors built for multi-track timelines treat that job as a side feature buried behind a project setup screen, a signup form, and an export queue. A browser video editor treats it as the whole job: open a file, mark where it starts and where it ends, and take the result away as a video clip or an animated GIF.
This article describes how that workflow is implemented, which output format suits which destination, and which numbers decide whether a GIF weighs 400 KB or 6 MB. The reference implementation throughout is the Video Editor on this site, which runs entirely in the browser on the visitor's own machine.
What the tool does, in one paragraph
The editor accepts a single video file up to 100 MB — MP4, WebM, OGG, MOV, or AVI, in practice anything the browser can decode. The file is read as a local object URL and never leaves the device. The interface offers two tabs. The Edit tab exposes a preview player, a matching pair of trim sliders, and a target-format selector for the exported clip. The GIF tab turns the same selected range into an animated GIF with its own frame-rate, width, quality, and dithering controls. Both tabs write their output with browser APIs: a canvas capture stream combined with an audio graph for video, and a Web Worker running the gif.js encoder for GIFs.
Setting the trim range
Two sliders define the segment that survives. The start slider begins at zero; the end slider defaults to the full duration of the loaded file, so a visitor who only wants to drop the first few seconds has one control to move. The panel reports the resulting duration live, which prevents the classic mistake of exporting a clip that still contains the section it was meant to remove.
Recording the trimmed clip happens while the video plays rather than by seeking frame by frame. The player is attached to an audio graph, the canvas draws the current frame on each animation callback, and recording stops when playback reaches the end marker. This is why the exported clip lasts as long as the selected range and keeps its audio track. Approaches that seek to a new timestamp for every frame produce files whose duration is set by how fast the machine could seek, and they lose sound entirely, because a canvas capture stream carries video only.
Choosing an output format
The converter writes MP4 or WebM, and the right choice depends on where the file goes next rather than on any quality hierarchy.
| Format | Container and codec | Best for | Trade-off |
|---|---|---|---|
| MP4 | H.264 in MPEG-4 | Sending to another person, uploading to platforms, editing elsewhere | Largest at equal settings |
| WebM | VP8/VP9 in Matroska | Web pages, embedding in a site, modern browsers | Not accepted by older standalone players |
Both keep the original resolution unless the visitor deliberately chooses otherwise. None of them adds a watermark, and none of them re-uploads the file to a second machine for encoding.
Turning a segment into a GIF
GIF is a 1987 format with two hard constraints that shape every setting in the tab: 256 colours per frame and no inter-frame compression worth the name. Video codecs store a keyframe followed by differences; GIF stores every frame as an independent image. The result is a file that is larger and flatter than the video it came from, and the only defence is to choose the settings deliberately.
The GIF tab therefore exposes the four values that actually move the outcome:
- Width — the strongest lever. The encoder rescales the clip before quantising colours, and a smaller frame means the same 256 colours are spread over fewer pixels, which looks sharper rather than softer. The default is the smaller of 480 pixels and the source width.
- Frame rate — a slider from 1 to 30 fps, defaulting to 10. Dropping from 30 fps to 10 removes about two-thirds of the frames, and with them roughly two-thirds of the file size, with little perceptible loss for screen recordings and interface demos.
- Quality — three levels that map to the encoder's colour-quantisation effort. Higher quality spends more time choosing a palette for each frame.
- Dithering — an optional toggle. Dithering mixes pixels from the available palette to imitate colours the format cannot store. It helps photographic footage with smooth gradients and actively hurts flat interface captures, where it adds visible noise.
A live estimate sits underneath the controls. Past 300 frames or beyond 800 pixels wide the panel warns that the export will be slow and the file large, which is the moment to shorten the range instead of waiting for the encoder to finish.
| Destination | Width | Frame rate | Typical size for a 3-second clip |
|---|---|---|---|
| Chat and comment threads | 480 px | 12–15 fps | 300–900 KB |
| Blog post or documentation | 640 px | 12 fps | 500–900 KB |
| Full-width page element | 800 px | 15 fps | 1.5–2.5 MB |
| Anything longer than 8 seconds | ≥ 640 px | ≤ 15 fps | grows past 3 MB — consider WebM instead |
Two rules of thumb cover most requests. Keep the file under 2 MB for a web page and under 500 KB for a chat message. If a GIF exceeds either figure, reduce width first, then duration, then frame rate — in that order, because that is also the order of their effect on size.
Why the file-size limit is 100 MB
Free browser editors differ mostly in what they do with the file. Server-side tools advertise upload limits of 1 GB and beyond because the file travels to a machine with more memory than a laptop has, and they compensate with queues, watermarks, resolution caps on their free tier, or automatic deletion after a few hours.
A client-side editor has the opposite constraint and the opposite guarantee. The clip has to fit in the memory available to the tab, the encoding competes with everything else running on the device, and a ten-minute 1080p recording from a modern phone is routinely 1–3 GB. The 100 MB ceiling is a deliberate boundary: above it a browser tab is more likely to stall than to finish, and the honest response is to trim the source first or reach for a desktop application. Below it, nothing is uploaded, nothing waits in a queue, and no third party keeps a copy.
Privacy as a consequence of the architecture
Because decoding, trimming, and encoding all happen on the visitor's machine, the tool has no server-side copy to lose. There is no account, no upload progress bar, no retention window to read, and no policy change that can retroactively apply to a file already stored elsewhere. The same architecture explains two limitations worth stating plainly: the editor cannot run without a browser capable of the required media APIs, and it does not work offline in the sense of a desktop program — the page itself still has to load.
How to trim a clip and export it
- Drop a video file onto the drop zone, or click to choose one from the device. The player loads the file locally.
- Move the start and end sliders in the Edit tab until the duration readout shows the segment to keep.
- Select MP4 or WebM as the target format, then press Trim to cut the segment.
- Press Convert to write the clip in the chosen format, then use the download link that appears under the preview.
- For an animated GIF, switch to the GIF tab, set width, frame rate, quality, and dithering, press Convert to GIF, review the preview and the reported file size, and download it.
Both operations can be repeated on the same loaded file without choosing it again, which makes a sequence such as "cut the logo off the start, then make a GIF of the middle" a matter of two passes over the same source.
What a browser editor does not replace
Multi-track arrangement, keyframed motion, colour grading with scopes, and 6K or 8K finishing still belong to desktop software, and a two-hour project with hundreds of clips will exhaust a browser tab long before it exhausts a workstation. Articles that rank online editors by feature count tend to bury this distinction, which is why the free tiers of large browser suites limit exports to 480p or 1080p, apply watermarks, or cap project length. For the jobs this tool covers — shortening a recording, converting a segment into a shareable format, producing a looping GIF from a few seconds of footage — the browser is not a compromise. The file is already on the machine; the only thing missing was an interface.
Frequently Asked Questions
Is this video editor free, and does it add a watermark?
Yes, and no. The tool is free to use without an account, and exports carry no watermark, no branding, and no resolution cap. There is no paid tier to unlock, because there is no server-side processing being sold elsewhere.
Are my videos uploaded to a server?
No. The file is opened as a local object URL and processed by the browser's own media APIs. Trimming and encoding both run on the visitor's device, so the footage is never transmitted, stored, or queued.
Which video formats can I load?
MP4, WebM, OGG, MOV, and AVI are listed in the interface, and in practice any container the browser can decode will play. If a file refuses to open, the cause is usually an unusual codec inside a familiar container rather than the container itself.
Why is the maximum file size 100 MB?
Because the clip has to fit in the memory available to the browser tab. A ten-minute 1080p recording from a phone is often 1–3 GB, which is past the point where a client-side encoder finishes reliably. Trimming the source first, or using desktop software for very large files, is faster than waiting for a tab to stall.
Why does my exported GIF look grainy?
GIF stores at most 256 colours per frame, and video frames contain millions. The conversion has to approximate. Smaller widths hide this better than large ones, because the same palette covers fewer pixels. If the source has smooth gradients, turn dithering on; if it is a screen recording with flat colours, turn it off.
What frame rate should I use for a GIF?
Ten frames per second is a good default for interface recordings and slow movement. Between 12 and 15 fps suits most other content. Above 20 fps the file grows roughly in proportion to the frame count while the perceived improvement flattens out, which is rarely a good trade.
Why does the trimmed clip keep the audio while the GIF does not?
The video export records a canvas stream and an audio track taken from the player's audio graph, so both survive. The GIF format has no audio channel at all, so there is nothing for the encoder to carry over.
Can I edit two videos at once?
No. The editor works with one loaded file at a time, which keeps memory use predictable and the encoding path simple. Loading a second file replaces the first, and the settings stay as they are so a repeated trim or GIF export needs no reconfiguration.
Austin, TX · SO reputation 7994 · Badges: 0🥇35🥈37🥉 · SO member since 2009