Compare two videos running simultaneously in the same window, with a realtime slider to adjust the width of the compared videos. This little tool is useful for comparing the quality of different video coding formats/codecs.
- Point to the video/image sources in index.html
- Open index.html in your browser
⚠️ On Mac, MacOS High Sierra + Safari is required for web playback. Note that as of 2017-08-18 h265 playback in Safari requires the HEVC coding to be of typehvc1and nothev1(check withffmpeg -i 'video.mp4'). To encode fromhev1tohvc1:
mp4box -raw 1 h265_hev.mp4
mp4box -add h265_hev_track1.hvc h265_hvc.mp4
| Action | Key |
|---|---|
| Pause/Play video | Space |
| Show/hide video overlay | i |
| Jump to next frame * | Right arrow |
| Jump to prev frame * | Left arrow |
⚠️ The frame jump functionality is based on a frame rate constant set in index.js, which might have to be changed for the functionality to work as expected.
- The two videos might fall out of sync during playback
Nothing is done to resync the videos during playback. Syncing is currently done when pausing, but may still take some time. Maybe needless to say, jumping to the next or previous frames also triggers syncing of the videos (and also pauses the videos).
-
No progress bar or seek functionality
-
Clip video on hover does not work with HLS-playlist
Workaround is to click and drag to clip instead of only hovering.