VIVICT — VIvict VIdeo Comparison Tool
The Videocore team at SVT is responsible for encoding our video content for online distribution. We continuously strive to improve the quality of the encoded video, while maintaining reasonable bandwidth and compatibility with a wide range of devices. In our day-to-day work, we lacked a quick and easy way to compare the subjective visual quality of different encodings of the same video source. To meet this need, we created VIVICT.
VIVICT is a simple, easy to use browser-based tool that allows simultaneous playback of two video sources in a dynamic split view controlled with a slider. Image 1 above shows the UI. Two video sources can be selected with the source selectors at the top. Both local files and URLs can be selected by clicking the respective icon. In the image above, the same hls playlist url has been selected for both sources, but different variants are selected. The source selector also displays the bitrate and resolution of the selected source.
The selected videos are displayed on the left and right side of the video player. As you can see, the different in quality is clearly visible in this case. The split slider follows the mouse, although this can be toggled off to keep the split position constant. The playback controls are visible when the mouse is moved to the bottom of the screen, and allows starting/stopping playback, frame stepping forward/backward, and seeking using the slider.
For closer inspection of details in the video, the view can be zoomed in. Image 2 below shows a zoomed-in view. By clicking and dragging different parts of the video can be moved into view. To reset zoom and center the view, a keyboard shortcut can be used.
VIVICT is a pure html/js app built with React with no server component. Standard html5 video is used for video playback, with hls.js providing support for hls sources. The split view is built with some relative straightforward css/js trickery: two html5 video elements are placed on top of each other. When the mouse is moved, the width of the topmost video element is adjusted to reveal less/more of the bottom-most video element.
There is no synchronization of the videos while playing, VIVICT relies on the videos playing in sync if they are started at the same time. This works in most cases, as long as the computer is able to decode the video streams fast enough. When playback is paused, VIVICT ensures that both videos are at the same position, so if the videos get out of sync pausing and then starting again usually fixes the problem.
You can try out VIVICT at https://svt.github.io/vivict
At SVT we like Open Source, so VIVICT has been released under the MIT license. The source code is available at https://github.com/SVT/vivict. Feel free to contribute!
