Interactive 360 Video

Interactive 360 Video: Accurate Positioning and Smooth Tracking

Check out the DEMO VIDEO page now!

Adding interactivity to videos is proven to increase viewer engagement. Imagine adding standard web interactivity to a media platform that already demands interaction in a way normal, linear, 2D videos can't. 360 videos require that a viewer be interacting with them lest she miss critical moments while looking away from the action. They encourage exploration and invoke a constant curiosity as a viewer wonders what is going on behind her. Interactive 360 videos are the next logical step, but adding interactivity to 360 videos is no simple task. Accurately positioning and smoothly tracking those elements is even trickier, but without them the experience falls apart.

The problem stems from the fact that normal web elements (DOM elements) and 360 videos use two entirely different technologies.

DOM elements are ubiquitous. They make up the sentence you are reading right now and every other thing you see on the web. DOM elements are widely understood, easy to build, and easy to interact with - they can be clicked, highlighted, typed-into, copied, linked, submitted, etc, etc, etc.

360 videos or "videospheres" are actual 3D environments -- they use a technology called "WebGL" to create a spherical "mesh" then "texture" that mesh with a video (basically wrap a 2D image around a 3D object). Then a virtual "camera" is placed at the videosphere's center, allowing a viewer to rotate it in any direction. The entire WebGL instance is rendered in your browser via a "canvas" DOM element -but within that canvas, normal web rules don't apply.

"(360 videos) encourage exploration and invoke a constant curiosity..."

So, since the 360 video is already implemented in WebGL, why not add a few more WebGL objects, apply some textures, and write a little code to make them interactive? The obvious answers are time, effort, expense, and expertise. Creating something like a simple web form in WebGL would require custom-building each interaction, utilizing a "raycaster" that maps 2D clicks to the 3D world space, and a whole lot of specialized technical knowledge. The objects in a WebGL scene can't be interacted with in the same way that DOM elements can, hence the natural desire for content makers to place DOM elements in the 3D space. Furthermore, by making it possible to add DOM elements to the videosphere, a creator can recycle existing HTML elements along with any accompanying CSS styling or JS behavior.

Unfortunately, WebGL doesn't support the inclusion of DOM elements, so we can't simply wrap an element as a WebGL object and place it in our scene. We have to find a way to bridge these two separate technologies.

"We have to find a way to bridge these two separate technologies... It became clear that we would have to recreate the 3D space..."

The first approach we took involved gathering information from the WebGL scene and using it to position each elements' 2D "x" and "y" position values on the screen. This was moderately successful but would fail around the video edges as the video warped and the DOM elements remained within their 2D space. We wanted to place elements in the scene accurately enough that they could conceivably be seen as a part of the original video, so this wouldn't do.

It became clear that we would have to recreate the 3D space using only DOM elements and keep our 3D DOM scene in sync with the WebGL scene. The solution was to build a 3D space using CSS transforms and place individual DOM elements at the videosphere's radius. The 3D "CSS Sphere" is then rotated in tandem with the videosphere. We constructed a small API that, in conjunction with the amazing aframe.io library (chosen based on it's simple videosphere setup and the easy-to-use rotation values that can be gathered from it's WebGL camera instance), allows a user to place any DOM element in a 360 video or photosphere and gives them access to familiar 3D editing tools to position, scale, and rotate their elements.

Editing your Interactive 360 Video

Try the EDITING DEMO now!

Using our API, a user can create a scene just by specifying an MP4 video, then place any DOM element within that scene at a specific position and time. Simple animations are currently possible between two points. Anyone who has worked with 3D software will be instantly familiar with the 3D control widget which allows an editor to change an element's position, rotation, and scale values. Global position around the camera can be changed by toggling the "X Lock" and "Y Lock" buttons then dragging on the videosphere to rotate it.

"Accurately positioning and smoothly tracking those elements is even trickier, but without them the experience falls apart."

If you are interested in hearing more about interactive 360 video, please contact us at support@hapyak.com


Getting customer feedback on your videos doesn’t have to be hard

Getting customer feedback on your videos has proven difficult and unreliable. So how do you quantify viewer satisfaction, while it doesn't take your viewers away from your video?

customer feedback on your video

Taking your users away from the video might lose a viewer’s interest and negatively impact a customer’s opinion of the video and your services. It's important to remember to be subtly when asking for feedback during video play.

Your viewers are already engaged with your content and this is the perfect time to interact with them and get customer feedback on your video. By adding interactivity to your videos, you can determine when viewers normally drop off and ask for feedback and opinions before hand. The key is making it as quick and enjoyable as possible. A smart selection of one click answers with an optional input field will get you usable results without annoying viewers. Stick to a single question. Let the viewer answer and return immediately to their business.

So what is the best way to measure customer happiness without distracting your viewers from the video itself?

Adding an attractive and minimally distracting poll to your videos will give you and your viewers instant results that everyone can understand. How better to gauge a user’s interest than to ask their opinion? Compare this with the viewer’s view-time and interaction data for a much more thorough description of your customers’ preferences and habits. A viewer who watches only 30 seconds but responds to a call-to-action may be far more satisfied than the viewer who finished the video and didn’t find the answer they wanted.

To take things a step further, the data can help you shape usage patterns of your viewers to determine customer feedback. This can be used to compliment those few voices who actually participate in after-experience surveys. Interactive video makes it possible to find out, directly from users, what they are thinking as they watch your content. This can then be used to serve new content based on a user’s previous interactions.

As an example: One can ask a viewer to supply their average expenditure on XYZ and, based on their answer, present the Fortune 500 companies representative with the sign-up form for an enterprise level account and the casual enthusiast with that of a free plan, all within the same video that got their attention in the first place. This allows one to actively track customer opinions and react to them intelligently, such as putting the unsatisfied viewer in touch with a support professional OR offering the satisfied customer an upgrade plan.

By simply adding a couple of well planned interactive annotations you can make your videos worth your customer’s time and your money while getting valuable customer feedback on your videos.