Unity Video Player – Easily Create Immersive Worlds with 2d and 360 Video

/ Oculus, Tutorial, Unity, VR / By

The Unity Video Player is a component that can allow us to create more immersive worlds by importing videos from the outside world into our games. Not only does it give us the ability to make 2D movie screens, but it also gives us access to 360 videos for VR experiences.

Without wasting anymore time, let’s learn how to use this component to get the most immersion possible. 

Making a 2d Video Player

The first use case that comes to mind is a 2D Video Player. This could be used to create a massive movie theater for our players to hang out and watch things. We could also put a TV into the game that plays a video tutorial for the player. 

In order to get this working, lets first set up the screen that the video will play on.

  • Right click in the Hierarchy  and go to XR -> UI Canvas. (For not VR, go to UI -> Canvas)
    • Name this UI Element “2DMovie Canvas” and select it
      • Canvas -> Render Mode = World Space
      • Position = (0, 2.6, 3.6)
      • Width = 4
      • Height = 2.25

 

Next, lets add the image that our Canvas will use to play the video.

  • Add a UI -> Raw Image to the 2DMovieCanvas
    • Stretch the Rect Transform to be the width and height of the Canvas
    • Add Component “Video Player”

Last, we need to add a couple of buttons so we can start and stop our video from playing.

  • Right click and add UI -> Button – TextMeshPro. Name it “Start Button”
  • Right click and add UI -> Button – TextMeshPro. Name it “Pause Button”
  • Select “Start Button”
    • Delete the “Text” child component
    • Stretch the Rect Transform to be the width and height of the Canvas
    • On Click – Hit the plus sign 3 times
      • Slot One – Drag Video Player into it
        • Dropdown = VideoPlayer -> Play()
      • Slot Two – Drag Pause Button into it
        • Dropdown = GameObject -> SetActive() = True
      • Slot Three – Drag Start Button into it
        • Dropdown = GameObject -> SetActive() = False
    • (Optional) – Add an image child object with a Play Icon
  • Select “Pause Button”
    •  Set as “Inactive” 
    • Delete the “Text” child component
    • Stretch the Rect Transform to be the width and height of the Canvas
    • On Click – Hit the plus sign 3 times
      • Slot One – Drag Video Player into it
        • Dropdown = VideoPlayer -> Pause()
      • Slot Two – Drag Start Button into it
        • Dropdown = GameObject -> SetActive() = True
      • Slot Three – Drag Pause Button into it
        • Dropdown = GameObject -> SetActive() = False
 

Now we have a 2D screen to play our videos on!

Next, we need to create a Render Texture and a video to play.

Render Texture

The Render Texture is what will be responsible for rendering our video inside of the game. In order to use it, we need to have a video to play on it. I won’t be providing one in this tutorial, but you should be able to find one easily online.

  •  Right click in Assets and go to Create -> Render Texture
    • Name it “RT_Movie” and select it
      •  Size = 1920 x 1080 (This value should change depending on the size of your video)
    • Select the VideoPlayer
      • VideoPlayer Component
        • Video Clip = Your Clip
        • Target Texture = RT_Movie
      • RawImage Component 
        • Texture = RT_Movie

 

 

Now if we boot into the Scene with our headset, we should be able to click the video and get it to play!

360 Video

Since we’re developing for VR, we also have the option to show our players 360 videos!

  •  Right click in Assets and go to Create -> Render Texture
    • Name it “RT_Movie360” and select it
      • Size = 4096 x 2048 (Or whatever the size is on your video)
  •  Right click in assets Create -> Material name it 360VideoMaterial and select it
    • Shader = Skybox/Panoramic
    • Spherical (HDR) = RT_Movie360
With the Render Texture and Material using the Skybox shader in place, we’re now just need to add a video player in our Hierarchy, to play the video.
  • Right click in Hierarchy and add “Video Player” and select it
    • Video Clip = Your 360 Video
    • Target Texture = RT_Movie360

We’ve left “Play on Awake = True” so it will start as soon as we begin the Scene.

The last thing we need to do, is add it to the skybox!

  • Window -> Rendering -> Lighting
    • Select Environment
      • Skybox Material = 360 Material
Now if we press play, our 360 video will play too! You may want to consider turning off the 2D movie player and the Plane in order to see it.
 

Adding Some Polish

Let’s add one final touch to this. Instead of just playing the 360 video from the start, how about we do something a little more creative?

Let’s try having the player click on a UI component to start the 360 video. We can fade our screen out and then into the 360 video so our users don’t get disoriented. 

  • Duplicate the 2D Movie Canvas and call it “360MovieCanvas”
    • Make it a child of the Left Controller on the XR Origin
    • Position = (0, 0, 0.21)
    • Rotation = (25, 0, 0)
    • Scale = (0.1, 0.1, 0.1)
    • Delete the child object called “Video Player”
    • Attach the 360 Video Player to the 360MovieCanvas

We’ve now added a controller for our 360 Video Player!

The only thing left to do now is write a script that fades in and out and swaps the skybox with the playing video!

To run through how this works really quick!

  • StartVideo() – This public function will be called when we press the Play button in the game. It will start a Coroutine called FadeAndSwitchVideo.
  • PauseVideo() – This public function will be called when we press the Pause button in the game. It will start a Coroutine called FadeAndSwitchVideo.
  • FadeAndSwitchVideo() – This will take a material and an Action to complete once the function has finished running. It will then call QuickFadeIn() to black out the screen. After waiting, it will then call QuickFadeOut(), swap the skybox with the targetMaterial (the video playing or the default skybox) and finally, Invoke whatever action was passed in. In this case, it will either be the videoPlayer.Play or videoPlayer.Pause.
  • HideOrShowObjects() – This is given the target material. Depending on if it is the default Skybox material or not, it will then call the SetObjectsActive with true or false to hide the objects.
  • SetObjectsActive() – This takes a bool and will set all the objects active based on that bool. It will be used to hide all the objects not needed for the 360 video.
With that script finished, all we need to do is attach the right variables to it and we are set.
  •  Select the 360MovieCanvas and add the VideoManager360 script to it
    • Objects in Scene = All objects you want to hide while the 360 video plays
    • FadeCanvas = CanvasFade (Found on Main Camera)
    • VideoMaterial = 360 Material
    • VideoPlayer = 360 Video Player
    • Fade Duration = 1

Conclusion

Now when you boot up the scene, you should be able to click the wrist UI and fade in to watch a 360 video!

If you found this tutorial helpful at all, consider helping me out on my Patreon! With your help and support, I can continue to create these fun and interesting tutorials so we can make VR dev not suck!

Cheers!