Estimated reading time: 3 minutes, 45 seconds
Recently a reader, inspired by my recent explorations into before-and-after comparison sliders for images, wrote to me with an interesting question: could the same effect be achieved with video?
At first, the solutions I came up with seemed rather complex: my initial thought was to take the feeds from the before and after videos and pipe them into a
<canvas> element, moving the divisor there. While an intriguing possibility – and one that remains worthy of future exploration – I found that my initial experiments suffered badly in both performance and UI.
Frustrated, I set the problem aside for a while. The biggest challenge was that variations of my original technique seemed not to apply: my earlier responsive solutions had all depended on the fact that a background image could be scaled alongside a real
background-size: cover, but video can’t be made into a background, at least not without some hacks.
Then I had a moment of insight. What if I scaled one of the videos opposite to the slider effect? The code could start off very much the same as earlier comparators: