Freeish Time: Interactive Video

I have always been so interested in what the web can do, and I’m always seeing epic stuff online for games and interactive websites that are just so cool! Something that springs to mind is at a JavaScript conference years ago, I was given a business card with a QR code and when you scanned it, it went to her website and had a 3D avatar of her holding her business card on the page. It was such an ingenious, interactive way to play with virtual reality. I like the idea that this was something completely different on the web, you don’t have to stick to just standard words on a page. The inspiration was to look at how we can use the web to create an interactive video.

There are tonnes of cool technologies that would allow us to do this! 

For example:

https://threejs.org/ 

https://www.pixijs.com/ 

https://phaserjs.com/ 

There, of course, was also the option of going completely rogue and doing it all vanilla HTML / js without the help from any particular framework.

I’ve always been excited about the prospect of building something fun and interactive on the web and this was my opportunity!  

To start with I specified out what the actual requirements were, this allowed me to pick an appropriate javascript framework to manipulate a video.

I listed out some of the requirements I had for what I was building:

• Not a game
• The user must be able to tap/throw away distractions in order for the video to carry on and for the skydiver to complete his jump
• The user must be able to tap on the landing area to complete the jump
• The user must have some intro into what they are doing and some explanation of what is happening.

Given those requirements, I was able to settle on using https://www.pixijs.com/. it was simple enough that I could render a video on screen and other interactable elements.

After implementing a video I was able to overlay those interactive elements over the top of it to control the state of the video. So if the user hasn’t swiped away all of the distractions the video would remain paused until they have completed the task!

Finally, I had to overlay text at certain points within the video – this was as simple as the framework provided the ability to do so.

Pixi js was super simple and fun to learn! It isn’t a ridiculously complicated one, so it was super easy to smash out a prototype like the above. It was great to dip my toe in the water with, but I think in the future, I would want to find a framework more advanced that would give me a lot more to work from. So if this comes up again down the line, I’d do further research into other more feature-rich libraries.

The one big challenge that I had was getting the prototype to scale nicely between desktop and mobile. Everything in the interactive video is positioned relative to the size of the video, so that had to be calculated on each resize of the screen.

It was also super hard to come up with realistic distractions! I originally tried gifs of planes and birds but it looked a bit pants! We eventually settled on emojis, as emojis can be representative of SO much, (thoughts, feelings, emotions, communication) they worked well to also be distractions!

I could totally use this within my web role to develop more fun and adventurous websites that delight our users!