Video Compare Library Demo

Load the library

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

1. Slider Comparison

Move your mouse or touch the screen to slide the white divider line.


<div class="vc-slider-container">
    <video playsinline autoplay muted loop vc-caption="Baseline">
        <source src="./videos/video1.webm">
    </video>
    <video playsinline autoplay muted loop vc-caption="Ours">
        <source src="./videos/video2.webm">
    </video>
</div>

2. Wiper Comparison

Wait for 1 second, and a wipe transition will reveal the second video, then repeat.


<div class="vc-wiper-container">
    <video playsinline autoplay muted loop vc-caption="Baseline">
        <source src="./videos/video1.webm">
    </video>
    <video playsinline autoplay muted loop vc-caption="Ours">
        <source src="./videos/video2.webm">
    </video>
</div>

3. Side by Side Comparison


<div class="vc-side-by-side-container">
    <video playsinline autoplay muted loop vc-caption="Baseline">
        <source src="./videos/video1.webm">
    </video>
    <video playsinline autoplay muted loop vc-caption="Ours">
        <source src="./videos/video2.webm">
    </video>
</div>