The easiest way to create a 360° video player with VR support in Unity

Published in

OmniVirt

7 min readNov 8, 2017

360° photos and 360° videos have become a new standard in the digital industry. Thanks to a ton of 360° cameras that launched in the past year, 360° content creation is exploding.

However, unlike the way we play 2D photos and videos, playing this kind of content is not that straightforward. It requires a ton of work. 3D mapping, head tracking, VR mode enabling, as well as a well-designed playback control to make everything work perfectly in term of functionality and user experience is not an easy task.

But don’t worry, the year is 2017. And with the help of the OmniVirt SDK, we can implement a 360° video player with just few lines of code! In this article, we will provide you a tutorial on how to do that step by step.

Please note that there are several techniques to develop an application (Native, Hybrid and etc.), but in this article, we will focus on one of the most popular developer tools in the market, Unity.

Here comes the easiest solution to play 360° video with Unity! Let’s get started!

What is OmniVirt

As we mentioned previously, the tool we are going to use in this tutorial is the OmniVirt SDK. So before going to the next step, lets introduce what OmniVirt is first.

OmniVirt is a 360° Virtual Reality platform with native plugins available for every single major platform. You can upload 360° content to OmniVirt and simply let it play anywhere you want. On a website, mobile app and even in a VR headset. And of course … it is free!

OmniVirt will host the content and handle all scaling issues for you. You don’t need to worry about anything at all. Just upload and let it play!

In this article, we will make use of what OmniVirt has built to play 360° videos with Unity. Let’s start with the first step.

Upload your content on OmniVirt

Let’s start with uploading your 360° content to omnivirt.com.

It is quite simple. Just sign up for an account and you can start uploading your first piece content right away.

Once you have successfully uploaded, you can grab the content ID from the url like demonstrated below.

If you don’t have any 360° content to upload yet, no worries. You can use existing upload instead for testing purposes. Please feel free to use the content ID number 24.

OmniVirt VR Player Plugin for Unity

The content is now ready. The question is, how to play it on Unity?

It is easier than you might think. OmniVirt has provided you with a native Unity plugin, OmniVirt SDK, which will enable you to play the content with just few lines of code. Please follow the steps below.

Download OmniVirtSDK.unitypackage
Import it to your Unity project via Assets -> Import Package -> Custom Package menu.

3. Create an Empty GameObject to the opened scene.

4. Create a new C# Script with any name you wish, for example, VRPlayerControl.

5. Drag & Drop the script into the created GameObject.

6. Now, open the C# script file and edit the code like demonstrated below.

using OmniVirt;public class VRPlayerControl : MonoBehaviour {

    VRPlayer vrPlayer;

    // Use this for initialization
    void Start () {
        // Create VR Player instance
        vrPlayer = new VRPlayer ();

        // Register Callback for Video Playing Completion Event
        vrPlayer.OnVideoEnd += OnVRPlayerEnded;
        vrPlayer.OnUnloaded += OnVRPlayerUnloaded;

        // Play
        vrPlayer.LoadAndPlay (24, true);  // Use your Content ID here
    }
	
    // Update is called once per frame
    void Update () {
		
    }

    /*************************
    * Callback for VR Player
    *************************/

    // Video Playing Completion Event
    void OnVRPlayerEnded() {
        // Automatically close the player after played
        if (vrPlayer != null)
            vrPlayer.Unload ();
    }

    // VR Player Unloaded Event
    void OnVRPlayerUnloaded() {
        vrPlayer = null;		
    }
}

Please feel free to change the number 24 in the above code to the content ID you want. And … that is it! You can just run and test it yourself now. Here is the result.

Yes, it is this easy!

Code explanation

Let us explain a bit about the code snippet above. An important part of the code that launches the player with a specific content ID is LoadAndPlay. Here are the details of the two parameters.

vrPlayer.LoadAndPlay (CONTENT_ID,    // Replace your Content ID here
                      true           // VR Enabled;
                                     //   false for non-VR mode
                      );

The first parameter is quite straightforward. It is just simply the content ID provided by OmniVirt when you uploaded your content.

For the 2nd parameter, it is used to enable or disable Virtual Reality mode programmatically. For instance, if you change the 2nd parameter to false, the result will change into 360° mode like this instead of the result above.

And of course, you could register for the callback detecting playback events like when the video is ready or when video playback is ended. Here are 3 callbacks available for VRPlayer class.

OnVideoReady() — Called when video is ready to play.
OnVideoEnd() — Called when VR Player has finished playing.
OnUnloaded() — Called when VR Player has been destroyed.

To register the callback, you can do it in C# like this.

void Start () {
    ...
    
    // Register a Callback
    vrPlayer.OnVideoEnd += OnVRPlayerEnded;
}

// Video Playing Completion Event
void OnVRPlayerEnded() {

}

There are many use cases that you can take an advantage from these event callbacks. For example, if you want to close the player immediately when playback reaches the end of the clip, you can do it by tapping to the event OnVideoEnd and unload the player there.

Head Tracking

Head tracking is one of the most important feature for a 360° video player and of course … OmniVirt VR Player comes with this feature as well. It works really well on both VR and non-VR mode! Just turn your phone around to see the video in the different angle like this.

You can also drag around using your finger to change the angle manually without turning your phone around. No additional code required. Please give it a try!

Completed Playback Control

OmniVirt VR Player also comes with full playback control in both non-VR and VR mode.

For non-VR mode, it comes with standard playback control like play/pause button and a seekbar. You can also switch between non-VR and VR mode using the cardboard button at the lower right corner.

For VR mode, since there is no touch interface in the headset, we use gaze through functionality to do the interaction instead. Here is what it looks like.

You can just stare at the button for a second to play, pause and adjust the volume per your need. The interface is designed especially for this immersive mode. So you can be sure that it will deliver you at the best user experience !

High Performance

You may have questions regarding playback performance. However, if you already ran the code above by yourself, you probably already noticed that the performance is amazing and everything just works smoothly. And we can confirm that.

OmniVirt SDK for Unity is developed using native technique so it could run at the highest performance possible playing videos at 60fps!

Unity Version Supported

OmniVirt SDK supports Unity 5.3 or newer.

Virtual Reality Supported

As mentioned above, Virtual Reality mode is also supported in OmniVirt SDK.

However, right now there are ton of VR standards out there in the market like Cardboard, Daydream, Gear VR and etc. Good news is OmniVirt SDK for Unity supports all of them !