How to Add Captions to a Video Online: AI Speech-to-Text, SRT/VTT & Burned-In Subtitles
Learn how in-browser Whisper WASM transcription works, how to format SRT vs. WebVTT timecodes, and how to style Urdu Nastaliq and Reels/Shorts captions.
How Browser-Based AI Video Captioning and Subtitle Styling Work
Short-form vertical videos (Instagram Reels, YouTube Shorts, TikTok) and educational tutorials are watched on mute by a large share of mobile viewers. Adding synchronized on-screen captions—or exporting clean `.srt` and `.vtt` subtitle tracks for YouTube and Vimeo—dramatically improves viewer retention and accessibility. However, cloud captioning SaaS platforms typically charge monthly per-minute fees, watermark free exports, and require uploading gigabytes of raw video to remote servers.
The AI Video Caption Generator combines three studio workflows inside your browser: (1) automated speech-to-text transcription across 52 languages powered by OpenAI's Whisper model compiled to WebAssembly/ONNX (`@xenova/transformers`), (2) a full timeline cue editor supporting `.srt` and `.vtt` import/export, splitting, merging, millisecond time-shifting, and find-and-replace, and (3) a real-time canvas renderer that burns styled captions—including right-to-left (RTL) Urdu Nastaliq and Arabic typography, word-by-word karaoke highlights, and aspect-ratio crops (`16:9`, `9:16`, `1:1`, `4:5`)—directly into your exported video.
How to Transcribe, Edit, Style, and Export Captions
- Upload a video file (`MP4`, `WebM`, or `MOV`), or load an existing `.srt`/`.vtt` subtitle file if you already have a transcript.
- To auto-transcribe audio, select your spoken language (such as English, Urdu, Hindi, or Arabic), choose a Whisper model size (`Tiny ~40 MB` for fast English/multilingual drafts or `Base ~75 MB` for higher accuracy), and click 'Generate AI Captions'. Note: the first run downloads the AI model weights into your browser cache.
- Review and edit cues in the 'Subtitles' tab: adjust `Start` and `End` timestamps, split long sentences, shift all timestamps (`±100ms` / `±500ms`), or switch to the 'Style & Layout' tab to pick display modes ('Full Line', 'Word by Word', or 'Line Build-Up'), fonts (including `Noto Nastaliq Urdu`), colors, and aspect ratios.
- Click 'Export SRT', 'Export VTT', or 'Export TXT' for instant subtitle files, or click 'Render & Download Video' to burn the styled captions onto your video frames.
SRT vs. WebVTT Timecode Grammar & RTL Script Detection
SRT Timecode: HH:MM:SS,mmm --> HH:MM:SS,mmm (comma millisecond separator)
WebVTT Timecode: WEBVTT\n\nHH:MM:SS.mmm --> HH:MM:SS.mmm (period millisecond separator)
Word-by-Word Timing: wordIndex = Math.floor(((currentTime - cue.start) / (cue.end - cue.start)) * words.length)SubRip (`.srt`) and WebVTT (`.vtt`, W3C Web Video Text Tracks) store sequential text cues bounded by start and end timestamps, differing primarily in the `WEBVTT` header and millisecond separator (`,` in SRT vs. `.` in VTT). During canvas playback and rendering, `scriptOf(text)` inspects Unicode code point ranges (`U+0600–U+06FF` and `U+0750–U+077F`) to detect Urdu and Arabic scripts automatically, switching canvas text direction to `dir="rtl"` so punctuation and word build-up order render naturally from right to left.
Worked Examples: SRT vs. VTT Formatting, RTL Urdu, and Aspect Cropping
Below are three real captioning workflows verified in the AI Video Caption Generator.
Example 1: Converting & Time-Shifting an Out-of-Sync SRT File (+500ms)
Importing a 2-cue `.srt` file that appears half a second too early and exporting a synchronized `.vtt` file for an HTML5 `<track>` player.
Input SRT:
1
00:00:01,000 --> 00:00:04,500
Welcome to the tutorial.
Action: Click '+500ms' Time Shift -> Click 'Export VTT'WEBVTT
1
00:00:01.500 --> 00:00:05.000
Welcome to the tutorial.Key takeaway: `shiftCues(cues, +0.5)` adds 500ms to every start and end timestamp and `buildVtt()` converts comma separators to periods with the required `WEBVTT` header.
Example 2: Styling Bilingual or Roman Urdu Reels Captions ('Line Build-Up' Mode)
Creating a 9:16 vertical clip with active-word highlighting as each word is spoken.
Cue (0.0s -> 4.0s): 'Welcome to Multan city tour' | Mode: Line Build-Up (Accumulate) | Aspect Ratio: 9:16At t=0.5s displays 'Welcome' (highlighted); at t=1.5s displays 'Welcome to' ('to' highlighted); at t=3.8s displays the full 5-word line.Key takeaway: 'Line Build-Up' progressively reveals words across the cue duration while highlighting the currently spoken word in your accent color.
Example 3: Center-Cropping a 1920×1080 Landscape Video to 1:1 Square or 9:16 Vertical
Repurposing a `1920×1080` (`16:9`) YouTube clip into a `1080×1080` (`1:1`) square social post.
Source Video: 1920×1080 px | Target Aspect Ratio: 1:1 SquareCrop Rectangle: x = 420, y = 0, width = 1080, height = 1080Key takeaway: `cropSrcRect(1920, 1080, '1:1')` centers a `1080×1080` square window (`(1920 - 1080) / 2 = 420px` offset from left and right) before drawing captions.
Hardware & Mobile Browser Recommendations for Whisper AI Transcription
Running a neural speech-recognition model (`Whisper Tiny` or `Whisper Base`) inside a web browser via WebAssembly requires downloading ~40 MB to ~75 MB of quantized ONNX weights on the first run (cached by your browser afterward) and decoding audio into 16 kHz mono PCM float arrays.
On desktop laptops and modern flagship phones over Wi-Fi, transcription of a 60-second clip completes smoothly. On older mobile phones with limited RAM (under 4 GB) or metered mobile data, we recommend either selecting the lighter `Whisper Tiny (~40 MB)` model on short clips under 2 minutes, or importing/typing cues directly in the manual SRT/VTT editor, which uses zero AI model downloads.
Model Download Size, Browser Codec Support, and Video Length Limits
- First-time AI model download (~40–75 MB): Clicking 'Generate AI Captions' downloads the quantized Whisper model weights from Hugging Face CDN into your browser's Cache Storage on first use. Use Wi-Fi rather than metered cellular data for initial model loading.
- Burned-in video rendering runs in real time: Because HTML5 `MediaRecorder` + `canvas.captureStream()` records the video and audio tracks as the video plays through the canvas pipeline, exporting a 60-second burned-in video takes 60 seconds. By contrast, exporting `.srt`, `.vtt`, or `.txt` files is instantaneous (`< 5 ms`).
- Keep browser tab active during video render: Browser power-saving rules throttle `requestAnimationFrame` when a tab is minimized or backgrounded. Keep this tab visible in the foreground while 'Render & Download Video' is in progress.
When to Use a Different Text or Media Tool on This Site
- Word Counter: Use after exporting your `.txt` video transcript to count total spoken words and verify words-per-minute pacing.
- Urdu & Roman Urdu Word Counter: Use to analyze Urdu Nastaliq or Roman Urdu video scripts before recording your voiceover.
- Image Compressor: Use to compress your YouTube or Reels custom video thumbnail image under 2 MB.
Frequently Asked Questions About AI Video Captions
What is the difference between exporting an SRT/VTT file and burning captions into the video?
An **SRT** or **VTT** file is a lightweight plain-text sidecar file ('closed captions') that you upload alongside your video on YouTube, Vimeo, or LinkedIn so viewers can toggle subtitles on or off. **Burning captions into the video** ('open captions') permanently draws the styled text onto the video pixels themselves, which is ideal for Instagram Reels, TikTok, and WhatsApp statuses.
Why does the first AI transcription take longer to start than subsequent videos?
The first time you click 'Generate AI Captions', your browser downloads the quantized OpenAI Whisper neural network weights (~40 MB for Tiny, ~75 MB for Base) and caches them locally via the browser Cache API. Subsequent transcriptions load the model straight from local cache.
How does the tool handle right-to-left (RTL) languages like Urdu and Arabic?
Our caption engine inspects the Unicode character blocks of each subtitle line (`scriptOf()`). When Urdu or Arabic script is detected, it automatically switches the canvas layout direction to right-to-left (`RTL`), pairs smoothly with the bundled `Noto Nastaliq Urdu` and `Noto Naskh Arabic` fonts, and animates word build-up from right to left.
Can I edit or fix a misspelled word after the AI finishes transcribing?
Yes! Every generated caption appears as an editable card in the 'Subtitles' tab. You can edit the text directly, use 'Find & Replace' to fix a recurring proper noun across all cues at once, split a long cue in half, or merge two short cues together.
What video format is downloaded when I click 'Render & Download Video'?
The browser's native `MediaRecorder` encodes the rendered canvas and audio stream into `MP4` (H.264/AAC on Safari and modern Chrome/Edge supporting `video/mp4`) or `WebM` (VP9/Opus on browsers that only support WebM recording).