| --- |
| tags: |
| - video |
| - video-editing |
| - image-editing |
| - gif |
| - browser |
| - offline |
| - no-install |
| --- |
| |
| # Pocket Tools |
|
|
| Three self-contained editors, each a **single HTML file**. Download one, double-click it, drop your files on the page. No install, no upload, no account, so your media never leaves the machine. |
|
|
| | Chapter | File | For | |
| | --- | --- | --- | |
| | [1. Pocket Video Trimmer](#1-pocket-video-trimmer) | `Pocket_Video_Trimmer_vX.X.html` | Cutting, cropping, resizing, storyboards | |
| | [2. Pocket Video Joiner](#2-pocket-video-joiner) | `Pocket_Video_Combiner_vX.X.html` | Joining clips, side-by-side comparisons, notes | |
| | [3. Pocket Image Editor](#3-pocket-image-editor) | `Pocket_Image_Editor_vX.X.html` | Batch conversion, captions, GIFs | |
|
|
| Also in this repo: `Pocket_Auto_Splitter_(beta)_vX.X.html`, still in beta. |
|
|
| **Contents** |
|
|
| - [1. Pocket Video Trimmer](#1-pocket-video-trimmer) |
| - [Trimming and cropping](#trimming-and-cropping) |
| - [Pictures and storyboards](#pictures-and-storyboards) |
| - [Exact frame counts](#exact-frame-counts) |
| - [Trimmer inputs and outputs](#trimmer-inputs-and-outputs) |
| - [2. Pocket Video Joiner](#2-pocket-video-joiner) |
| - [Joining clips end to end](#joining-clips-end-to-end) |
| - [Side-by-side comparison](#side-by-side-comparison) |
| - [Notes on a video](#notes-on-a-video) |
| - [3. Pocket Image Editor](#3-pocket-image-editor) |
| - [Batch converting](#batch-converting) |
| - [Captions, labels and memes](#captions-labels-and-memes) |
| - [Working with GIFs](#working-with-gifs) |
| - [Requirements](#requirements) |
| - [Privacy](#privacy) |
|
|
| --- |
|
|
| # 1. Pocket Video Trimmer |
|
|
| A whole video trimmer in one file. Drop in a video and cut it up. |
|
|
|  |
|
|
| ## Trimming and cropping |
|
|
| **Trim** — scrub a filmstrip timeline, drag the in/out handles, step frame by frame, or type exact times. A slim bar under the timeline slides the whole selection without changing its length. |
|
|
| **Multi-clip** — queue several cuts from one video and export them all at once into a folder you choose. |
|
|
| **Crop** — a draggable box with ratio presets: 16:9, 9:16, 1:1, 4:5, 2:3, 21:9 or custom. |
|
|
| **Resize and frame rate** — percentage presets or exact pixels, at any frame rate. |
|
|
| **Compression** — one slider from smaller file to bigger file, with a live size estimate. |
|
|
| **Extract audio only** — pull the selection's audio out on its own as a WAV, without exporting any video. |
|
|
|  |
|
|
| ## Pictures and storyboards |
|
|
| **Snapshot** — save the frame you are parked on as a PNG. |
|
|
| **Animated GIF** — 256 colours per frame with dithering, so gradients don't band. |
|
|
| **Auto storyboard** — a grid of frames spread evenly across the selection, up to 10 × 10. |
|
|
| **Manual storyboard** — pick the exact frames yourself, with thumbnails, up to 25 of them. |
|
|
| Either sheet can number its cells 1, 2, 3… in the top-left corner, which is useful when you are referring to specific frames later. |
|
|
|  |
|
|
|  |
|
|
| ## Exact frame counts |
|
|
| **Fixed frame rate** hands frames to the encoder one at a time on a steady clock instead of letting the browser sample the canvas whenever it likes. The count corrects itself as it goes, so a busy machine doesn't drift. |
|
|
| **H3-compliant frame count** builds on that and rounds the total up to 17n + 5 frames — 5, 22, 39, 56, 73 and so on — taking the extra frames from real video after your out point. If there isn't enough video left, it steps down to the next valid count rather than inventing frames. |
|
|
| Worth knowing: the browser does the actual encoding, so treat the frame count as close rather than guaranteed. Check one output before trusting a whole batch. |
|
|
| **Background work** keeps storyboards and GIFs running while you are in another tab. Video export still pauses when the tab is hidden, because browsers stop decoding video for a background tab and you'd get one frozen frame with audio over the top. |
|
|
| ## Trimmer inputs and outputs |
|
|
| | Works | Usually won't | |
| | --- | --- | |
| | MP4 / H.264 · MOV · WebM · most MKV | AVI · exotic codecs | |
|
|
| Any resolution or aspect ratio, portrait or landscape. |
|
|
| | | Format | |
| | --- | --- | |
| | Video | MP4 (H.264 + AAC), WebM fallback | |
| | Pictures | PNG | |
| | Animation | GIF | |
| | Audio | WAV | |
|
|
| Files are named from the source, timestamp and settings, for example `holiday_1m37s_1280x720_30fps.mp4`. |
|
|
| Export runs in real time — a 30-second clip takes about 30 seconds — and it re-encodes, so the output isn't bit-identical to the source. The compression slider controls that trade-off. GIFs grow quickly; a smaller width at 10–15 fps usually works best. |
|
|
| --- |
|
|
| # 2. Pocket Video Joiner |
|
|
| For putting clips together, or setting them next to each other to compare. |
|
|
| ## Joining clips end to end |
|
|
| Queue several videos and write them out as one continuous file, in the order you choose. |
|
|
| ## Side-by-side comparison |
|
|
| Play two videos next to each other in the same frame. Handy for before-and-after: an original against a re-encode, two different settings, or two takes of the same shot. |
|
|
| ## Notes on a video |
|
|
| Burn text onto a clip to mark what you are looking at — which settings produced it, what changed, what to look for. The note becomes part of the picture, so it survives being shared or re-uploaded. |
|
|
| --- |
|
|
| # 3. Pocket Image Editor |
|
|
| Convert, label and resize images in batches, and edit GIFs. |
|
|
| ## Batch converting |
|
|
| Drop in a pile of images — or a whole folder — and convert them all in one pass. |
|
|
| **Reads** HEIC/HEIF, WebP, JFIF, AVIF, PNG, JPEG, GIF, BMP and TIFF. |
|
|
| **Writes** PNG, JPEG, WebP, AVIF or GIF. AVIF output depends on your browser: Chrome and Edge support it, Safari and Firefox may not. |
|
|
| Resize by longest side, exact width and height, scale, or a maximum file size that auto-tunes quality to hit it. Sideways iPhone photos are straightened automatically. Output names take a prefix, a suffix and a starting number, so a batch comes out in sequence. |
|
|
| HEIC decoding works out of the box. For a guaranteed-offline setup, drop `heic2any.min.js` in the same folder as the HTML file and it will be picked up automatically. |
|
|
| ## Captions, labels and memes |
|
|
| Add text layers to an image and drag them where you want. |
|
|
| Styles: WhatsApp-style bubble, meme text, a black box above, or a black box below. Each layer takes its own font, size, colour, background, padding, opacity, outline, position and rotation. Bubbles can be dragged, resized and rotated directly on the preview. |
|
|
| Emoji work in the text box — copy one from anywhere and paste it in. Whether it draws depends on the emoji your operating system has, so a very new one may come out as an empty box. |
|
|
| ## Working with GIFs |
|
|
| Load an existing GIF and change its playback speed, its looping, and its transparency with an adjustable alpha cutoff. Labelled images can be written straight out as a GIF, which is a quick way to turn a set of stills into a captioned animation. |
|
|
| --- |
|
|
| # Requirements |
|
|
| Chrome or Edge is the best bet. Firefox mostly works but falls back to WebM for video. No server, no dependencies, no build step, no sign-in. |
|
|
| # Privacy |
|
|
| Everything happens inside the browser tab. The files make no network requests at all — you can open one, disconnect from the internet, and it will still work exactly the same. |
|
|
| --- |
|
|
| *by C_Nugget* |
|
|
