Video Comparison Slider

A simple javascript video comparison slider library. Compared to react-comparison-slider, it supports non-React applications.

Usage

Load the library from CDN:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/video-comparison.min.js"></script>

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

<div class="vcsl-compare-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>

Features

This project is inspired by this and adds several enhancements:

• Support synchronization of the two videos
• Eliminate the need to wrap the second video in a div from developer's side
• Multiple distribution formats for easy integration