Embedding the Unity Web Player with jQuery
Posted by Dimitri | Mar 31st, 2011 | Filed under Programming
This post explains how to use jQuery to embed the Unity Web Player on a page. This post was inspired by GFX47, after reading this tweet. Here, you will find a step-by-step explanation on how to load the script on a HTML file. This will be achieved by using a jQuery plugin.
Unity3D already comes the tools to export a HTML file with all the code needed to embed the player. With that, one might be wondering what are the advantages of using jQuery to embed the Web Player. Here’s a list of advantages:
- It’s basically 3 lines of code (2 if your page already loading jQuery).
- Different instances of the Web Player can be easily embedded on the same page.
- The same instance of the Web Player can be embedded multiple times at the same page just by adding one extra line of code.
- Since it’s a jQuery call, you can run or add more JavaScript code or plugins before loading the Unity Web Player.
- With Unity’s built-in ExternaEval() and ExternalCall() methods, it is possible to add even more interaction to a website, since you can use them to trigger JavaScript code execution from Unity on the page.
The first item on the above list should be more then enough to use the process described here. So let’s get to it. The first thing that needs to be done is to download the Unity3D jQuery plugin, created by Scott Mitting. Then, you will need to check if your page is already loading jQuery. If it isn’t, you will have to load it by adding the following line inside your page’s header:
>head< <!-- ... --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"</script> </head>
The above line loads the jQuery library from Google, optimizing your page loading time because there is a great chance that it has been already cached by the user’s browser. Not only that, but Google servers are fast. It’s also possible to load jQuery from your own website, just upload the jQuery file to your server and pass the correct address to the src parameter.
Now, upload the plugin file to your server. After the upload has finished, load it at your HTML page just before closing the body tag of your HTML document and call one of the plugin functions like this:
<body>
<!-- ... -->
<script type="text/javascript">
$(document).ready(function()
{
//Use only one of the following lines:
$('#unity').unity3d('WebPlayer.unity3d', {width:400, height: 300});
$('.unity').unity3d();
});
</script>
<!-- Loads the plugin -->
<script type="text/javascript" src="WebPlayer/jquery.unity3d.js"> </script>
</body>
To use the plugin correctly, select line 07 or line 08 – don’t use both at the same time. The difference is that, line 7 will load the Unity Web Player by replacing any div that has the ‘unity’ id. By using this line, you will have to change ‘WebPlayer.unity3d’ to point out the address of your unity3d file. The second parameter is optional, and it defines the Web Player width and height. Line 8 does it differently, as it defines that every div that uses the ‘unity’ class should be replaced by the Unity Web Player. So it’s basically whether you want to load the Web Player every time there is a div with a specified id (line 7) or class (line 8).
Finally, the Web Player inside the body tag is called by adding one of the following lines depending on what was chosen above:
<body> <!-- Choose only one: --> <div id="unity"></div> <div height="300" width="400" src="WebPlayer.unity3d" class="unity"></div> </body>
Downloads
Here’s an example of the code explained in this post:
Happy embedding!
Want to see more posts like this more often? Please donate by clicking at the button below:
Don't feel like donating? Alternatively, you can support the site by purchasing the FULL version of the Arrows Live Wallpaper app at the Google Play Store™:
Thanks a lot!
Be the first to leave a comment!