How to embed and play a movie on an object in Unity3d and Jibe

step 06 play movie

Watching “Hedgehog in the Fog” in my Jibe world.

Note: You’ll need the Unity Pro editor if you want to work with Movie Textures in Unity3d.

Unity3d allows you to embed and play videos on any surface in a 3d environment.

This means you can easily create a web-based Jibe world where avatars explore a multiuser 3d virtual space while watching videos or movies playing on screens/signs/any surface you wish.

The most common way to add video to a Unity3d project is by adding a video file to your project’s Asset Folder, which automatically creates a Movie Texture (details here).

However, adding a video file directly to your project means the size of the video file will be added to the final size of your completed Unity webplayer file.  In other words, if your video clip is 50 Megabytes large, then your Unity webplayer file will have an extra 50 Megabytes added on to it.

For folks creating Jibe worlds with Unity3d (or anyone creating Unity webplayer files for streaming on the Web) this is not good.  You always want your webplayer file to be as small as possible so your webplayer file will finish downloading and start running as quickly as possible.

Fortunately, there’s a way you can download/stream a movie from the Web so it doesn’t add to the size of your Unity webplayer file.  Unity will immediately start playing the movie as soon as it has buffered enough of it, similar to how YouTube works.

Here’s a simple example:

Step 1: Get your video ready as an OGG file on the Web

Unity needs videos to be in OGG format (file extension .ogg).  If you need to convert an existing video file into OGG format, I suggest using VLC (it’s free and cross platform).  Take your OGG video, put it on a webserver somewhere and remember the URL.

Important Note: If you’re managing your own webserver, be sure it has the MIME type for Ogg Vorbis enabled.  For Extension use .ogg, and for MIME type use application/ogg.

Here’s a sample 60 Megabyte OGG video I made and uploaded to WordPress.  Feel free to use this URL in your own tests.  You can also click on it to see how it plays in your browser.
http://becunningandfulloftricks.files.wordpress.com/2013/04/hedgehog_in_the_fog.ogg

Step 2: Create a Cube

In this example, we’re going to make a basic cube and have the video play on its surface.  Of course you could flatten the cube so it looks likes a screen and then place it on a model of a TV or something.  I’m just being lazy.

step 01 creating a cubestep 02 creating a cube

Step 3: Create a new Javascript

I like the name of a script to remind me what the script actually does, so I’m going to call this new script ClicktoPlayWebMovie.

step 03 create a new javascript script

Here’s the code.  Copy and paste this into your new script and save it.

var url = "http://becunningandfulloftricks.files.wordpress.com/2013/04/hedgehog_in_the_fog.ogg";
function OnMouseDown () {
 // Start download
 var www = new WWW(url);
// Make sure the movie is ready to start before we start playing
 var movieTexture = www.movie;
 while (!movieTexture.isReadyToPlay)
 yield;
// Initialize texture to be 1:1 resolution
 renderer.material.mainTexture = movieTexture;
// Assign clip to audio source
 // Sync playback with audio
 audio.clip = movieTexture.audioClip;
// Play both movie & sound
 movieTexture.Play();
 audio.Play();
}
// Make sure we have audio source
@script RequireComponent (AudioSource)
function Update () {
}

You can see at the top of the script that I’ve included my demo URL as the default movie URL.  You can always change it later.

Step 4: Add ClicktoPlayWebMovie script to your cube

Drag the ClicktoPlayWebMovie script from your Project folder onto the Cube in your Scene view.  This will add the script to the cube.

step 04 drag javascript to cube

Now select your Cube in the Scene view and look at the Inspector settings.  You can change the movie URL by simply editing the URL field in the Inspector.

Also notice that there is an Audio Source added to the Cube.  This was added automatically when you added the script to the Cube, since the script needs an Audio Source component to work.  Don’t delete or modify the Audio Source component.  Just leave it be.

step 05 script in cube - check audio component and movie url

Step 5: You’re done.  Test it out!

You can run your Jibe world locally in the Unity editor and test it out that way.  Walk up to the cube and click on it.  The movie will start playing on all surfaces of  the cube.

step 06 play movie

You can also view an online version of this demo in my own Jibe world.

Enjoy!

-John “Pathfinder” Lester
Chief Learning Officer, ReactionGrid Inc.

About John Lester (Pathfinder)

John Lester is an expert in the educational use of virtual worlds and 3d simulations. His background is in neuroscience research and medical education, and he previously worked at Harvard Medical School, Massachusetts General Hospital and Linden Lab. John is currently the Chief Learning Officer at ReactionGrid Inc., helping clients develop new systems for immersive learning using web and mobile-based virtual world platforms.
This entry was posted in Announcements, Avatars, Education, Jibe, Unity3D, Virtual Worlds and tagged , , , , , , , , , , , , , , , . Bookmark the permalink.

6 Responses to How to embed and play a movie on an object in Unity3d and Jibe

  1. Chris Hart says:

    Note that in the Jibe kit, you can use the WebTexture.cs file as an example of C# syntax for the same purpose. While that script + GetData.cs are designed to work together for the slideshow system, you can adapt them to pull down your own movies.

  2. Noah Nagel says:

    Thank you! Awesome code and tutorial, I was struggling with this

  3. German says:

    How can I stop any audio playing before I click the cube?
    How can I stop playing the video?
    Thanks for your help!

  4. aloyse says:

    Thanks a lot for your amazing Script, but i would like to know if its possible to play / stop video ?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s