Video Upload and Encoding
Accept a video file and turn it into versions that play in a browser.
What it adds
An upload path for video files plus a background pipeline that produces web-playable renditions and a poster frame.
What your agent is told to do
5
What your agent is told to do
5-
1
Extend the app's existing File Upload rather than adding a second uploader. Video differs in size and in the processing that follows, not in how a user picks a file, and two uploaders means two sets of limits to keep in sync.
-
2
Upload in resumable chunks straight to storage, and enforce size, duration, and type limits on the server. Client-side limits are a convenience, not a control.
-
3
Do the encoding in the app's existing background job system so the user is not holding a tab open, and surface its state through the app's existing Background Job Progress rather than a bespoke poller.
-
4
Produce the minimum coherent set of outputs: one or two web-playable renditions covering a small and a large screen, plus a poster frame. Do not build a general-purpose adaptive ladder until someone is actually watching on a bad connection.
-
5
Run whatever content scanning the app already applies to uploads, including Upload Malware Scanning if present, before any output becomes reachable. A video is a container format and is a perfectly good delivery mechanism for something else.
Edge cases it handles
8
Edge cases it handles
8- Large files will be interrupted by dropped connections, closed laptops, and mobile handoffs. Support resuming an interrupted upload from where it stopped rather than restarting a multi-gigabyte transfer.
- Upload, queue wait, and encode are three different stages with different durations, and a single bar that sits at ninety-nine percent through a long encode reads as broken. Show which stage the job is in and what is still to come.
- Plenty of common recordings use codecs or containers browsers will not play, and some files are simply corrupt. Detect this before encoding, transcode where you can, and reject with a specific message where you cannot.
- A failed or cancelled job leaves a source file and partial outputs behind. Clean both up on failure and sweep for orphans on a schedule, or storage cost grows quietly forever.
- Cap concurrent jobs per account so one person uploading fifty videos cannot starve every other tenant's queue, and make the queue position visible when a job is waiting.
- Decide who is allowed to read a finished video back, and enforce it on the delivery path. If the app has Secure File Downloads, route playback through the same signed, expiring access rather than leaving outputs on a guessable public address.
- A user who navigates away mid-upload needs a warning, and the partial upload needs an expiry so abandoned chunks do not accumulate.
- Retention matters. Decide whether the original source file is kept after encoding, say so, and apply the same deletion rules to renditions when the record is deleted.
Definition of done
9
Definition of done
9- Uploads are chunked, resumable, and validated for size, duration, and type on the server.
- Encoding runs as a background job with visible upload, queue, and encode stages.
- Unplayable formats are detected before encoding and either transcoded or rejected with a specific reason.
- Failed and cancelled jobs leave no orphaned source files or partial outputs.
- Concurrent jobs are capped per account and queue position is visible.
- Finished videos are readable only by users permitted to see the owning record.
- Every upload passes the app's existing content scanning before its outputs are reachable.
- The feature matches the existing design system.
- No existing functionality is broken.
Related features
Hover Video Preview
Hover Video Preview
Hovering a video card plays a short silent clip so people see what it is before clicking.
What it does
A silent, short-loop preview that plays inside a video card on deliberate hover and returns to the poster on exit.
How it works
- 1 Generate a short, low-resolution, silent preview clip during video processing and store it alongside the poster frame. Do not play the full source file behind the card.
- 2 Require a deliberate hover before doing anything. Wait several hundred milliseconds after the pointer settles, then load, so a cursor crossing a grid does not fire a dozen requests.
- 3 Give touch devices an explicit preview control on the card, since hover does not exist there. A long-press or a small preview button is fine; silently doing nothing on mobile is not.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/hover-video-preview
Audio Waveform Scrubber
Audio Waveform Scrubber
Show the shape of a track so listeners can see the quiet and loud parts and click to them.
What it does
A waveform rendered from precomputed amplitude data, doubling as the seek control on the audio player.
How it works
- 1 Compute the amplitude data on the server when the file is first stored, and serve it as a small dataset the page can draw. Do not decode the audio in the browser to build the waveform.
- 2 Replace the plain scrub bar in the app's existing Audio Player with this surface rather than adding a second seek control beside it.
- 3 Draw played and unplayed regions distinctly, and keep the playhead position exact under click, drag, and keyboard seeking on the same surface.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/audio-waveform-scrubber
Picture-in-Picture Mode
Picture-in-Picture Mode
Let viewers pop a video into a floating window and keep using the rest of the app.
What it does
A control on the video player that hands the video to the browser's floating always-on-top window.
How it works
- 1 Add the control to the app's existing video player rather than building a separate popped-out player. Two players competing over the same element is the main way this feature goes wrong.
- 2 Keep the app in sync with the floating window in both directions. Pausing, seeking, or changing volume from the floating window must update the in-page player, and closing the floating window must return playback to the page at the same position.
- 3 Decide explicitly what happens when the user navigates away from the page that owns the video. Either keep the floating window alive and reconnect when they return, or end it cleanly, but do not leave a floating window playing a video the app has forgotten about.
Copy the prompt
No account needed
Add this feature to my app:
https://addthisfeature.com/x/picture-in-picture-mode
How it works
-
1
Copy the link
Grab the Markdown instruction URL for this feature.
-
2
Give it to your AI
Paste it into Claude Code, Cursor, v0, Lovable — whatever you build with.
-
3
It inspects, then implements
Your agent reads your existing app first, then adds the feature to fit it.
Works with your stack
These instructions are written to adapt. They tell the agent to detect your framework, match your existing design system, and reuse what you already have — rather than assuming a particular stack.
Need it tighter than that? Customize the feature and tell it exactly what you're running.