How to Make 360 Interactive Video / VR

OmniVirt
OmniVirt
Published in
5 min readNov 15, 2017

--

How to make 360° Interactive Photo / Video / VR

One of the most popular questions that we continue to receive having built a VR platform for brands and publishers — “How do I create interactive 360° video?”, “Do I need special software or cameras to make 360° video interactive?”, or “Will this work outside YouTube or Facebook?”

Obviously if you have played around with YouTube and Facebook’s creator tools, you will soon find out that YouTube and Facebook’s standard 360° video playback does not support interactivity within the content. In other words, users can watch the video, but they cannot select or interact with the object inside it. The same holds true for 360° photo; Facebook’s 360° photo player doe not support interactivity, and YouTube does not even support 360° photo. Moreover, the 360° experience hosted on Facebook and YouTube doesn’t fully work on mobile web.

While YouTube and Facebook’s focus has been around regular video playback, OmniVirt has built its platform specifically for 360° / VR creation. Since interactivity has been one of the top priorities requested by our community, we have built hotspots and interactivity features since our first version.

Some key features include:

  • Easy-to-create — Interactivity can be added to any 360° video and photo without any coding. Simply drag and drop hotspots into the experience and link to regular video, images, or other content on OmniVirt.
  • Advanced options — Hotspots can be fully customizable. Developers can program custom interactive behavior using JavaScript and CSS.
  • Host and embed — Deliver the experience on your websites or mobile app (iOS and Android) with a fully responsive embed that fits into your application.
  • Supports VR mode — Hotspots can be gazed-through in VR mode which can be viewed by Google Cardboard or other VR headsets.
  • Supports a broad range of formats — including 360° video, Stereo 360° video, 180° 3D, Panorama and 360° photo.

Tutorial — Step-by-Step

And getting started is super easy. Let me walk you through how to create your first interactive 360° video / photo.

  1. Sign up and upload your content at www.omnivirt.com. We support hotspot interactivity in both our Ad Campaign or VR Player products.

2. After your content is uploaded successfully, ‘Edit’ your content and select “Hotspots” tab. See instructions below:

3. Publish content and set it live.

And your content is ready to go. Pretty easy, right? The next question for you is how will you distribute this experience? There are many ways to distribute your interactive experience. That’s what OmniVirt is good at it. We provide out-of-the-box distribution solutions through multiple channels including Web Links, Website Embeds, Mobile Apps (iOS and Android SDK), Display Ads, Video Ads, and Social Network distribution.

See Statistics

And once your 360 interactive video / VR is live your next question will likely be about data. Are users engaged with your story? Are they interacting with the hotspots that you have created. Once again, we have you covered here.

Simply visit the “statistics” page in your account and see how people are actually experiencing your interactive story. In addition to standard metrics (impressions, views, clicks, time-spent) on the 360° video, our analytics platform will also provide you data and statistics on how each hotspot is performing.

Advanced options

OmniVirt also provides advanced functionality within our hotspots platform for those customers that need more flexibility and design beyond our templates. Functionality in our advanced options includes, but is not limited to:

  • JavaScript programming — Program your own custom interactions using JavaScript.
  • Custom hotspots — Ability to hide our standard hotspot design and overlay your own design using CSS.
  • Custom presentation card — Design presentation cards to whatever design works for your creative using HTML and CSS.

If you are interested in this level of customization, please contact us (contact@omnivirt.com) and we can help provide documentation to you.

Case Studies and Example

Let’s show you how this comes to life in some real examples from real customers. Everything I described above will help you build the experience you see below.

  • Clorox — For the launch of their new Fresh Step integration with Febreze, Clorox looked to OmniVirt interactive 360° platform to create a game where users needed to find hidden cats in a room. Users were encouraged to find all the cats as quickly as possible and then share their score across social media.
  • Cathay Pacific — For this campaign, the Hong Kong based airline company looked to OmniVirt’s interactive hotspot platform to bring its 360° Video campaign to the next level. Targeted at prospective travelers across leading travel publishers the campaign delivered scale and engagement through the interactive story.
  • Flemings Steak House — In this campaign, the high-end steakhouse from Bloomin Brands wanted to bring its audience to Wine Country and experience the history and culture of the wines that are paired with their seasonal menu. Using beautiful close-up photography and 2D videos, the 360° photos were made interactive
  • Home Depot — In a first-to-market experience, Home Depot used OmniVirt’s interactive 360° platform to launch these experiences on Pinterest. Check-out the video below to see it in action:
Visit the Home Depot Pinterest Page to see the experience live: HERE

Summary

In summary, OmniVirt provides an easy-to-use tool as you have seen above to make your 360° video / VR experiences interactive. We have seen many brands and content creators take advantage of this part of our platform and encourage you to reach out (contact@omnivirt.com) if you are interested in using our interactive hotspots in your 360° video / VR experience.

Also published on OmniVirt Blog — How to make 360° Interactive Video

_______

--

--

OmniVirt
OmniVirt

OmniVirt is a Virtual Reality and 360° Video Advertising platform for brands and publishers. https://www.omnivirt.com/blog/