Compare AI images & videos with perfectly synchronized zoom and playback.
A single HTML file. No installation, no server, no dependencies. Open it in a browser and start comparing.
Based on MediaSyncer by WhatDreamsCost, GPL-3.0.
Drop multiple images or videos into the window. Everything stays in sync — playback, scrubbing, zoom, and pan apply to all files at once. Useful for comparing AI model outputs, render iterations, or video takes side by side.
- Synchronized playback and frame-stepping across all loaded videos
- Synchronized zoom and pan — zoom in on one detail, all files follow
- Split View for two-file comparison with a draggable divider
- Grid layout from 1 to 4 rows, supports 2–16+ files simultaneously
- Playback speed control (0.1× to 2×), looping, per-video mute
- Offline-capable — works without internet if
p5.min.jsis placed alongside the HTML file - Dark and light themes
- UI language auto-detected from browser settings
Capture_2.mp4
Online: Download MediaSyncView.html, open it in any modern browser.
Offline: Place p5.min.js (v1.9.4) in the same folder as MediaSyncView.html. The player will use it automatically and work without internet access.
Download p5.min.js from the official CDN:
https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/p5.min.js
Capture_3.mp4
Images: JPEG, PNG, WebP, AVIF, GIF (static), BMP, SVG, ICO, APNG
Video containers: MP4, WebM, Ogg, MKV, MOV (H.264)
Video codecs: H.264 (AVC), VP8, VP9, AV1, H.265 (HEVC — hardware support required)
Audio codecs: AAC, MP3, Opus, Vorbis, FLAC, PCM (WAV)
Browser support for specific codecs varies. MP4/H.264 and WebM/VP9 have the widest compatibility.
Capture_4.mp4
| Key | Action |
|---|---|
Space |
Play / Pause all |
← → |
Step one frame |
1 2 3 4 |
Grid rows |
5 |
Clear all |
6 |
Loop |
7 |
Playback speed |
0 |
Mute / unmute |
| Key | Action |
|---|---|
Scroll |
Zoom |
8 |
Loupe (single file only) |
9 |
Split view (2 files only) |
F / F11 |
Fullscreen |
P |
Toggle panel |
| Key | Action |
|---|---|
D |
Difference mode (2 files only) |
Q |
Tile comparison (2 files only) |
A |
Annotation / pencil |
S |
Save screen as PNG |
| Key | Action |
|---|---|
O |
Open files |
T |
Dark / light theme |
H |
Help (press again to close) |
Middle click |
Fullscreen focus on media |
Esc |
Exit focus / close Help |
The UI language is detected automatically from the browser. Supported languages:
| Code | Language |
|---|---|
en |
English |
uk |
Ukrainian |
de |
German |
fr |
French |
es |
Spanish |
it |
Italian |
pt |
Portuguese (including pt-BR) |
zh |
Chinese (Simplified) |
ja |
Japanese |
To add a new language: copy any block in the I18N object inside the HTML file, change the key (e.g. ko), translate the values.
p5.min.js is the graphics engine that powers MediaSyncView. It handles canvas rendering, synchronized drawing, zoom, and pan.
- Developer: Processing Foundation (non-profit, USA)
- License: LGPL 2.1
- Size: ~800–1000 KB
- The library runs entirely in the browser — no data collection, no network access after load
MediaSyncView first looks for p5.min.js in the same folder. If not found, it loads from the official CDN automatically.
08.04.2026
- Media Focus Mode: Added the ability to expand media to full canvas using the middle mouse button. Seamless exit via Escape or toggle click, with automatic focus reset upon media removal.
- Automatic FPS Detection: Implemented an intelligent detection algorithm using
requestVideoFrameCallbackto analyze and set the correct frame rate upon video loading. - UI/UX Overhaul: Significant interface improvements, including larger buttons, icons, and fonts for better accessibility. Optimized high-contrast themes (pure black/white text) and improved visual feedback for active zoom levels.
- Localization & Refactoring: Standardized Ukrainian localization to
ukcode, removed hardcoded UI strings, and updated tooltips across all 8 supported languages. - Enhanced Monitoring: Redesigned frame counter and timer displays for improved visibility and precision during playback.
08.04.2026.mp4
GPL-3.0
Based on MediaSyncer by WhatDreamsCost.