Skip to main content

Interactive Video Before/After Comparision With HTML5

There's nothing quite like a good before/after wipe to reveal just what went into a grade or correction for a particular shot. Reels work well enough with an animated transition, but what if the comparison could be more interactive?


I don't know when it started, but interactive sliding image comparisons are all over the web now (like this one) and I think they're great. As soon as I saw one my immediate thought was this would be great for comparing grades. I then realize that meant fiddling with things I'd rather let be.  Web design and I don't get along too well, at least not since they discontinued Netscape Composer.


Way back when I think I tried something with animating a before/after wipe in Resolve and outputting to a gif but quality was terrible unless you bloated the files up to ridiculous sizes, and even then playback was unwieldy (this was before the days of gifv).

I quickly accepted this was not a task I was suited to complete and moved on.


Thankfully though, there are great people like Dudley Storey who is a web guy, and was kind enough to explore the issue in a fair bit of detail in this excellent post. Once you've gone though his writeup come back here and I'll attempt to add something worthwhile.

A few things to adapt it better to my needs:  I took out the autoplay tag as I simply would prefer playback to be an option rather than requirement.  I also figured by not autoplaying you could delay loading of the assets until they were needed. So if you want to put a bunch of these comparisons on one page, or blog post, they won't bog things down by all trying to load at once.

Of course I had I had no idea how to do any of this. He mentions there's no real synchronization going on, and things just play when they can. So I went with that idea and worked off this reference doc.  It was this example of a Play/Pause button for an HTML5 video object that proved most useful. I eschewed the button, and tapped into what's left of my memories of AP CompSci to attach playPause function to a eventlistener for clicks on the video. I also added another play and pause call to control both videos instead of just one. If putting on a page with many comparisons you'd probably need to give each set unique names so clicking on one doesn't control playback for all. To control loading I found this preload tag. So in the end, the extra code I appended to <script> section was as follows

videoContainer.addEventListener('click', playPause);
var myVideo1 = document.getElementById("v1");
var myVideo2 = document.getElementById("v2");
myVideo1.preload= "none";
myVideo2.preload= "none";
function playPause() {
if (myVideo1.paused) {;;
else {
And in his <video> tags I removed autoplay and labeled the first v1 and the second v2. So the first of those tags looks like this, with the other being labeled v2

<video loop poster="graded.jpg" id=v1>
Which gives us this.

Click to Play/Pause.


In my experimentation I haven't found the lack of true sync to be a problem. Yes eventually if left running for awhile there will be some drift. But it doesn't seem to creep in for a few repetitions and even then isn't enough to ruin the comparison. His suggested fix is also certainly beyond my tinkering abilities.

I want to point out that he also did a great job of covering all the bases with using a jpg, webm, and mp4 (for browsers that won't play webm like IE and Safari). In fact while he mentions there are some issues on iOS on my Android 5.0 phone everything works just peachy (no doubt due to Google's heavy investment with webm powering youtube).

As far as encoding, I'm using ffmpeg with the libvpx module. When I get some more time I'll write another post with some encoding guidelines and an example script to generate all the needed assets at once.



  1. It would be ideal if you share more like that. video production Orlando

  2. In short they have ability. In the event that you have to trim your financial plan, there are better ways. commercial production companies london


Post a Comment

Popular posts from this blog

AJA Monitoring In Premiere Isn't Fun *UPDATED 4/14/15*

CC 2014.1 screws up playback with AJA devices in a really irritating way. It's stuff like this that really makes we wish Adobe offered some sort of stable release of CC for post houses rather than constantly pushing out updates that fix some things while causing others to break.

We had a RED Dragon project coming in that was going to be extremely After Effects heavy and quickly discovered this fun fact, which required an update to Adobe CC 2014.1 to fix.

CinemaDNG and Premiere's Difficulty in Importing It

While visiting a friend I noticed an empty Premiere project open with an importing dialog box that didn't seem to be moving. When I asked him if his machine was frozen he revealed that no, it wasn't, he had simply dropped a folder containing a feature film's worth of Cinema DNG footage into Premiere and it was taking a while to import. A while in this case meant having run for about 5 hours and having a progress bar that was only barely visible.

I tried to explain his machine or Premiere would probably crash before it could finish, and that even if the import did finish he would not like or want the results. Another friend who works in video/tech was present and surprisingly agreed that although it may take a while, dragging and dropping the whole shebang into the project pane should be just fine. I did my best to resit the urge to facepalm.

He's a shooter rather than editor by trade, and the problem here is a weird one, so I don't fault him for not knowing any bet…

Standards Conversion with the Blackmagic Teranex and Hypderdeck Studio *UPDATED*

Blackmagic has a product called the Hyperdeck Studio which is essentially a tape deck that uses 2.5" SSD's instead of tapes. It even supports deck control via RS-422. They also make the Teranex, a hardware conversion box. So it should be simple to use these two products together for standards conversions right? Load your master(s) onto an SSD, pop it in, patch through the Teranex to an edit station with capture, and batch import your neatly converted media.

Well there are some weird quicks, but with a little help from FFmpeg and an AJA capture interface it all works out.