Tuesday, June 9, 2015

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