koobas.hobune.stream
Embedding multiple webplayers
I'd like to have more than one webplayer on my website - is this possible? Except from the first to load, every other webplayer shows the "Unity Web Player, Install Now!" button. Thanks!
One way to do it is to iterate through an array of unityObjects.
To make this example work you'll need to name each webplayer:
WebPlayer1.unity3d
WebPlayer2.unity3d
WebPlayer3.unity3d
WebPlayer4.unity3d
The player is embedded by calling unityObject.embedUnity(id, name, width, height), the actual function is in UnityObject.js which is imported from Unity's website before you call the function. The id is simply the id inside html where you've named them accordingly to the array.
Set the amount of webplayers in the var players and make sure you have each id set in the body (<div id="unityPlayer1">).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Unity Web Player | WebPlayer</title> <script type="text/javascript" src="http://webplayer.unity3d.com/download_webplayer-3.x/3.0/uo/UnityObject.js"></script> <script type="text/javascript"> <!--
var unityObjectArray = new Array();
var players = 4;
for (i=0; i<players+1; i++) {
unityObjectArray[i] = unityObject;
}
function GetUnity() {
for (i=0; i<players+1; i++) {
if (typeof unityObjectArray[i] != "undefined") {
return unityObjectArray[i].getObjectById("unityPlayer"+i);
}
return null;
}
}
for (i=0; i<players+1; i++) {
if (typeof unityObjectArray[i] != "undefined") {
unityObjectArray[i].embedUnity("unityPlayer"+i, "WebPlayer"+i+".unity3d", 200, 200);
}
}
-->
</script>
<style type="text/css">
<!--
body {font-family: Helvetica, Verdana, Arial, sans-serif;background-color: white;color: black;text-align: center;}
a:link, a:visited {color: #000;}
a:active, a:hover {color: #666;}
div.content {margin: auto;width: 400px;}
div.missing {margin: auto;position: relative;top: 50%;width: 193px;}
div.missing a {height: 63px;position: relative;top: -31px;}
div.missing img {border-width: 0px;}
div#unityPlayer1,
div#unityPlayer2,
div#unityPlayer3,
div#unityPlayer4 {
display: block; float: left; cursor: default;height: 200px;width: 200px;
}
-->
</style>
</head>
<body>
<div class="content">
<div id="unityPlayer1">
<div class="missing">
<a href="http://unity3d.com/webplayer/" title="Unity Web Player. Install now!">
<img alt="Unity Web Player. Install now!" src="http://webplayer.unity3d.com/installation/getunity.png" width="193" height="63" />
</a>
</div>
</div>
<div id="unityPlayer2"></div>
<div id="unityPlayer3"></div>
<div id="unityPlayer4"></div>
</div>
</body>
</html>
The example is a webplayer which is 200x200px where the css tells each id to be placed alongside each other. If the webplayers are of different sizes then you'd have to take that into account when iterating through the array where embed occurs. That could be as simple as:
var width = 300;
var height = 200;
for (i=0; i<players+1; i++) {
if (typeof unityObjectArray[i] != "undefined") {
switch (i) {
case 2:
width = 400;
height = 250;
break;
case 3:
width = 500;
height = 300;
break;
default:
}
unityObjectArray[i].embedUnity("unityPlayer"+i, "WebPlayer"+i+".unity3d", width, height);
}
}
Also have a look at Embedding the Unity Web Player with jQuery
