Open Search

Shoppable Videos

November 21, 2016 12:01 pm
Categorised in:
Reading Time: 2 minutes

I made a thing! This time I made a javascript thing. Wow, right? Tell me more! Well, I made some stoppable & HTML5/JS shoppable videos. Watch a video, like a product in the video, click the video and an overlay becomes visible allowing the user to select from products available on screen which in turn gives them a slide over with product info that pushes back to product page (missing a deeper integration trick here of adding straight to basket but deadlines yadda yadda).

Any particular reason I was so keen to drop the colouring-in pencils and break out my keyboard and typing fingers? Well the video content certainly appealed to a particular part of my brain, but this seemed like the sort of challenge I eat for breakfast then painfully excrete later on and boy do I love those challenges (free breakfast innit!).


Product keyframe tracking in shoppable videos

In reality, thanks to HTML5, most of the overlay work on top of the video is actually pretty easy to achieve and little treats like the flexibility of the FullScreen API made the visual presentation side of things a joy to work with. Didn’t even need to touch Canvas. However there was a bit of secret sauce in terms of motion tracking the position of the products at any given time and I’m not giving that away right now. But lets just say it was a workflow that required After Effects and then some Javascript tools I pulled together to parse the output.


Stumbling blocks

Lets just say there are a couple of differences between the way iOS and Android handle video that was a real pain in the posterior. This changed two days before release when iOS10 dropped and iPhones suddenly gained the ability to use inline video. Unfortunately this change came at the wrong time and I had to hack everything mobile based to fall back to just viewing videos. Which is a shame. Couple of days of hacking the changes and mobile could have been as interactive as desktop and tablet but “deadlines” that don’t exist trump time to make the best possible product I guess.


Below is an example of the plugin running in windowed mode with multiple selectable videos. You can also view the videos on-site if that’s your thing.

This joint was penned by @elmarko