- Home /
How to embed Web Player on Wix.com with the widget HTML iFrame/Embed?
I added in the webPlayer.html file under:
u.initPlugin(jQuery("#unityPlayer")[0], "webPlayer.unity3d");
following line:
unityObject.embedUnity("unityPlayer", "https://www.dropbox.com/s/xxxxxxxxxxxxxxx/webPlayer.unity3d", 640, 360);
It doesn't work. It seems easy but it doesn't load my game. I don't know why. I wish it can run on my Wix.com website.
There are UnityObject and UnityObject2. Maybe this is a problem. I should use UnityObject2. However,is there something like UnityObject2.embedUnity? Probably no. I changed the full code. I deleted the line:
unityObject.embedUnity("unityPlayer", "https://www.dropbox.com/s/xxxxxxxxxxxxxxx/webPlayer.unity3d", 640, 360);
We should use unityObject2 only with jQuery.
Maybe it will be clearer with the full code:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Unity Web Player | Zombie Soldiers from Swamps</title>
<script type='text/javascript' src='https://ssl-webplayer.unity3d.com/download_webplayer-3.x/3.0/uo/jquery.min.js'></script>
<script type="text/javascript">
<!--
var unityObjectUrl = "http://webplayer.unity3d.com/download_webplayer-3.x/3.0/uo/UnityObject2.js";
if (document.location.protocol == 'https:')
unityObjectUrl = unityObjectUrl.replace("http://", "https://ssl-");
document.write('<script type="text\/javascript" src="' + unityObjectUrl + '"><\/script>');
-->
</script>
<script type="text/javascript">
<!--
var config = {
width: 1200,
height: 600,
params: { enableDebugging:"0" }
};
var u = new UnityObject2(config);
jQuery(function() {
var $missingScreen = jQuery("#unityPlayer").find(".missing");
var $brokenScreen = jQuery("#unityPlayer").find(".broken");
$missingScreen.hide();
$brokenScreen.hide();
u.observeProgress(function (progress) {
switch(progress.pluginStatus) {
case "broken":
$brokenScreen.find("a").click(function (e) {
e.stopPropagation();
e.preventDefault();
u.installPlugin();
return false;
});
$brokenScreen.show();
break;
case "missing":
$missingScreen.find("a").click(function (e) {
e.stopPropagation();
e.preventDefault();
u.installPlugin();
return false;
});
$missingScreen.show();
break;
case "installed":
$missingScreen.remove();
break;
case "first":
break;
}
});
u.initPlugin(jQuery("#unityPlayer")[0], "https://www.dropbox.com/s/xxxxxxxxxxxxxxx/webPlayer.jpg");
});
-->
</script>
<style type="text/css">
<!--
body {
font-family: Helvetica, Verdana, Arial, sans-serif;
background-color: black;
color: white;
text-align: center;
}
a:link, a:visited {
color: #bfbfbf;
}
a:active, a:hover {
color: #bfbfbf;
}
p.header {
font-size: small;
}
p.header span {
font-weight: bold;
}
p.footer {
font-size: x-small;
}
div.content {
margin: auto;
width: 1200px;
}
div.broken,
div.missing {
margin: auto;
position: relative;
top: 50%;
width: 193px;
}
div.broken a,
div.missing a {
height: 63px;
position: relative;
top: -31px;
}
div.broken img,
div.missing img {
border-width: 0px;
}
div.broken {
display: none;
}
div#unityPlayer {
cursor: default;
height: 600px;
width: 1200px;
}
-->
</style>
</head>
<body>
<p class="header"><span>Unity Web Player | </span>Zombie Soldiers from Swamps</p>
<div class="content">
<div id="unityPlayer">
<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>
<p class="footer">« created with <a href="http://unity3d.com/unity/" title="Go to unity3d.com">Unity</a> »</p>
</body>
</html>
I hope it will help.
The problem is that I can't use UnityObject2. There's jQuery. Alas, I have no experience with jQuery.
I see that it's a new topic because I don't see jQuery and UnityObject2 tags. Yes, my all questions are hard to answer. I see that I will be forced to learn jQuery :). How to use it with Javascript.
The error is "Invalid Data File. Data file is corrupt.Not a Unity Web Player file." The file seems good ( I uploaded second time). And it is webPlayer.unity3d. Any ideas?
Answer by Seizure · Sep 19, 2013 at 04:46 PM
When it runs from a server it sometimes does not like the .unity3d file extension. Try changing line
unityObject.embedUnity("unityPlayer", "https://www.dropbox.com/s/xxxxxxxxxxxxxxx/webPlayer.unity3d", 640, 360);
into this
unityObject.embedUnity("unityPlayer", "https://www.dropbox.com/s/xxxxxxxxxxxxxxx/webPlayer.jpg", 640, 360);
and then for the actual unity3d object change its file extension to jpg, it should ask if you are sure you want to convert it, say yes.
Thanks for your answer. You use unityObject, but it needs to use unityObject2. With jQuery. However, I tried your solution. Alas, it doesn't work :(.
Answer by Tomza · Sep 19, 2013 at 06:53 PM
My Web Player works! I just changed
u.initPlugin(jQuery("#unityPlayer")[0], "https://www.dropbox.com/s/xxxxxxxxxxxxxxx/webPlayer.unity3d");
into
u.initPlugin(jQuery("#unityPlayer")[0], "https://dl.dropboxusercontent.com/u/xxxxxxxxxxxxxxxx/WebPlayer.unity3d");
There should be the Public folder in a DropBox account. You need create one, and then you move WebPlayer.html and WebPlayer.unity3d there. You right click on the file WebPlayer.unity3d and get the public link. And this link you can add to u.initPlugin... (the second code). Then, you can paste the full code to the widget HTML iFrame/Embed on your website on Wix.com.
Yes, it works, but really slowly. I don't know why. I'll be testing this solution.
Hey there, I just read your post and was excited to try it out, but however I am still receiving error messages that it "failed to download data file". Can you help me with this situation?
Will this work with any cloud storage service or is Dropbox different for any reason?
Sorry Guys,
I don't have a free time as a true coder :). This solution should work for you. Look at that:
http://tomaszzackiewicz.wix.com/lina-it-technologies#!zsfs-i-demo/c1za9
Dropbox is know for this solution, so better use Dropbox. I have never used other cloud storage services for that. $$anonymous$$aybe, you will have to apply different tricks.