Mobile-Friendly Video Comparison Slider in JavaScript

The Video Comparison Slider is a JavaScript library that allows your users to compare the differences between two HTML5 videos.

It syncs video playback timing and works across desktop and mobile devices through mouse movements or touch gestures.

You can use this library to create before/after video comparisons for:

• Video editing results
• Visual effects demonstrations
• Film color grading examples
• Video restoration projects
• Training materials
• Product demonstrations

How to use it:

1. Download the Video Comparison Slider library and include the JavaScript file from the dist folder in your project.

<script src="/js//video-compare.min.js"></script>

2. Place your before and after videos within the comparison slider container:

<div class="vc-slider-container">
  <video playsinline autoplay muted loop vc-caption="Before">
    <source src="before.mp4">
  </video>
  <video playsinline autoplay muted loop vc-caption="After">
    <source src="after.mp4">
  </video>
</div>

3. Use a wipe transition to reveal the after video instead.

<div class="vc-wiper-container">
  <video playsinline autoplay muted loop vc-caption="Before">
  <source src="before.mp4">
  </video>
  <video playsinline autoplay muted loop vc-caption="After">
  <source src="after.mp4">
  </video>
</div>

4. Compare before/after videos side-by-side.

<div class="vc-side-by-side-container">
  <video playsinline autoplay muted loop vc-caption="Before">
  <source src="before.mp4">
  </video>
  <video playsinline autoplay muted loop vc-caption="After">
  <source src="after.mp4">
  </video>
</div>

How it works:

The library locates all video elements with the “vcsl-compare-container” class. It then configures the second video element for absolute positioning and extends its width to 200%, placing it directly above the first video. A “video-clipper” div element is dynamically created and set to 50% width, acting as a mask to reveal the underlying video as the slider moves.

User interaction, whether via mouse movement or touch gestures, triggers a function that adjusts the width of the “video-clipper” element. This width adjustment reveals or conceals portions of the second video.

In addition, the library makes sure both videos remain synchronized during playback. An event listener monitors the “timeupdate” event of the first video. Should the time difference between the two videos exceed a threshold (0.05 seconds), the second video’s current time is adjusted to match the first, providing a consistent viewing experience.

Changelog:

11/24/2024

• Added wiper and side-by-side mode

See Also:

• 20+ Image Comparison JavaScript Libraries