Playing videos on the Hololens apps

First of all a Happy New Year to all of you! Hope we do more awesome things with the Hololens this year ๐Ÿ™‚

In the last post, you learnt how to import the latest MR Toolkit in your project and how to use voice interactions

This post, we will learn how to play videos in the Hololens apps using the Video Player Unity component and dynamically (via code)

 

So the Video Player component is so cool that we don’t even need the MR Toolkit for this one.

To get started with, create ย a new Unity project.

On the Main Camera set the following:

Clear Flags to Solid Color

Background to 0,0,0,0

Field of View to 80 (in this case, the movie screen will be at this optimum distance)

Clipping Planes Near to 0.85

Now we need to add a movie screen. In my experience you can project the movie onto any 3D Object. But I will chose a Plane in this example

Right click and choose Plane under 3D Object to add it. Rename it MovieScreen or something sensible

Change the values on the Main Camera so that the plane is in front of the camera ย and facing upright

Change the values on the MovieScreen to also have optimal viewing conditions. I reduced the scale to 0.3 on all Axes so that the moviescreen appears of the right size

Now we will add a video. Let’s try with a sample .mp4 file. I downloaded it from http://www.sample-videos.com/index.php#sample-mp4-video which offers samples for free. Move this to your Assets folder- it’s easier that way

Tip: If you need to convert your own videos to different file formats, I found this site very useful

https://video.online-convert.com/convert-to-ogv

On the MovieScreen’s Add Component, Add Video Player

On the Video Player make the following changes:

Choose Source to Video Clip

Drag and drop your video to the Video Clip part

Choose Play on Awake because you want the video to play as soon as the app starts

I also checked on Loop because I want the video to continuously play

The Video Player will need an audio source. Attach an Audio Source to the Movie Screen via Add Component

Drag and drop the Audio Source into the Audio Source of the Video Player

That’s it! Save the scene and build the app. Test it on the Hololens or the emulator. You should be able to see it play!

The formats I have tried with are .flv, .mp4, .ogv and .wav. They all work.

To use the Video Player with URL,

Simply change the Source to URL and type in the path where your file is stored. It needs to be an absolute path so don’t add a link to Youtube or so

Try this link for example: http://techslides.com/demos/sample-videos/small.mp4

We need to do a slight change here with the Texture and the material. In the previous case, since we gave the Video Player the file directly, the texture and material was implicitly converted to play in the Video Player. But we are now feeding the Video Player a URL of the video. Therefore, you need to provide it a texture and material manually of the video.

In the Assets folder of the Unity project, right click and Create new Render Texture. Rename it MyTexture or something sensible

Change the Render Mode to Render Texture

Drag and drop MyTexture to Target Texture

Drag MyTexture to your MovieScreen. This will add a new folder called Materials to your Assets folder. You’ll also see that the Materials on the Movie Screen will be changed to MyTexture

Note that you have to do this only once. And you can change the URLs to wherever your files are present and the Render Texture that you created will take care of conversion to the proper texture to display it on the screen

In your Video Player, make sure you make these changes

The final step: Make sure that in Edit -> Project Settings -> Player -> Publishing Settings, the Internet Client is selected under Capabilities. This will ensure that the app will connect to the Internet (of course your Hololens should be connected to the Internet as well) and pick up the video from the URL

Build and try it. The video should play

Now for the part where you play the videos dynamically

Create a New Scene in the same project (or a new one)

Create a MovieScreen (as explained before). Don’t forget to change the values of the Plane and the Main Camera for optimal viewing

On the MovieScreen, Add Component – > add a new script and call it PlayMovie or something relevant.

Edit the script and add the above code

Since the movieToPlay variable is public, you will see it as a Inspector value in the project. This is where we need to add the MovieTexture of the video we choose to play

But first we need to convert the Movie in our Assets folder (save a movie in your asset folder) to a MovieTexture

Click on the video file and choose MovieTexture in Importer Version. Then click on Apply.

This will convert the video in the Assets folder to a Video Texture format

Now drag and drop the VideoTexture that you just converted to the Movie To Play field of PlayMovie

The last step is to add an Audio Source to the MovieScreen via Add Component

Build and play!

 

Errors and Solutions

Error: If your video is playing in breaks and interrupted frequently

Solution: Reduce the pixels of the video to 640 x 360 and it should play fine on the Hololens

Error: The video is blank

Solution: The texture and material is not converted properly. Follow the instructions above to convert the texture and feed the Video Player the texture

10 response to "Playing videos on the Hololens apps"

  1. By: Jasmin Posted: January 30, 2018

    Hello Nischita,
    It worked fine! ๐Ÿ™‚
    When i use the URL-component in the Videoplayer the videos are sometimes a little bit laggy? I guess it’s because of my internetconnection, so nervermind ๐Ÿ˜€
    So I will use some Movietextures.
    Thanks anyway! It was helpful!! ๐Ÿ™‚
    Best regards!

    • By: Nischita Posted: January 30, 2018

      Hi Jasmin, thanks for the positive feedback! Iโ€™m glad it helped ๐Ÿ™‚
      Did you try playing videos with lesser resolution? 640*360 is optimal, else Iโ€™ve noticed that it can be laggy.

  2. By: Matthew Posted: March 9, 2018

    Would you be able to do this with a specific twitch stream?
    I looked at the video player in unity and it described the video as a clip. I am wondering if there is a max video length that can be used.
    Thank you!

  3. By: Nischita Posted: March 9, 2018

    Hi Matthew, You’re right. The Video Player uses a clip and also has the URL capability. But the URL needs to point to a specific file (.mp4, .wav, .ogv etc) as far as I know.
    For the max video length question, I have had no problems playing longer clips, It just needs to be the optimal recommended resolution of 640*360.
    And for the twitch stream question, honestly I haven’t tried it. And from the ferreting that I did on the Internet on this, people don’t seem to be having any luck playing videos from YouTube or Twitch.tv for that matter ๐Ÿ™ If you do come across a solution, please let me also know! Thanks ๐Ÿ™‚

  4. By: Sabarinath Posted: April 21, 2018

    Hi Nischita,

    I am trying to load the 3 videos, through the code (adding video player component), i have also loaded the assets from unity, the issue i am having is, the assets are not loaded up when running in emulator or on the device.

    I tried with applicaiton.dataPath or persistent data path, however the assets are not loaded.

    Any suggestions will be appreciated.

    Thanks
    Sabri

  5. By: Nischita Posted: April 22, 2018

    Hi Sabri, files in application dataPath and persistent dataPath will be lost each time you build. So I wouldn’t put the videos in there. Are you trying to play the videos from the Assets folder in your Unity project? Did you convert the movies from your Asset folders to MovieTexture format? Is quicktime installed to do the conversion? These would be some suggestions where you could start.. Else, screenshots and detailed description of your problem would help me figure out your exact problem more ..

  6. By: Gary C Posted: April 23, 2018

    Will this work for 360 videos as well?

  7. By: Nischita Posted: April 24, 2018

    Hi Gary, Good question! I personally haven’t tried with a 360 video. But Unity’s Video Player (which is used in this tutorial) is capable of playing 360 videos. https://unity3d.com/solutions/360video
    HoloLens itself is capable of showing 360 videos – An example of this is the HoloTour app which is existing as default on the device
    If you try it with a 360 video let us know too? ๐Ÿ™‚

  8. By: Narendherraj Posted: June 18, 2018

    Is There any way to play the audio source directly from the url. without having to add the audio clip

Leave a Reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: