Video Compare

A simple javascript video comparison library for both slider and wiper.

Usage

Load the library from CDN:

<script src="https://cdn.jsdelivr.net/npm/video-compare/dist/video-compare.min.js"></script>

Use the following HTML structure to initialize the video comparison slider:

<div class="vc-slider-container" >
    <video playsinline autoplay muted loop>
    <source src="./static/videos/video1.mp4">
    </video>
    <video playsinline autoplay muted loop>
    <source src="./static/videos/video2.mp4">
    </video>
</div>

For more example, please check the demo page and source code.

Features

• Support synchronization of the multiple videos
• Simple and easy to use - just add the class name to the container
• Multiple video comparison modes: slider, wiper, four grid, side by side and three video comparison