<html>
<head>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ssl-webplayer.unity3d.com/download_webplayer-3.x/3.0/uo/UnityObject2.js"></script>
<script type="text/javascript" src="https://www.reallusion.com/crazytalk/Unity/samplecode/CTWebPlayer.min.js"></script>
<script type="text/javascript" src="http://ctinteractive.reallusion.com/ctinteractive/dragresize.js"></script>
<style type="text/css" >
.drsElement
{
position: absolute;
}
.drsMoveHandle
{
cursor: move;
}
.dragresize
{
position: absolute;
width: 5px;
height: 5px;
font-size: 1px;
background: #fff;
border: 1px solid #333;
}
.dragresize-tl
{
top: -8px;
left: -8px;
cursor: nw-resize;
}
.dragresize-tm
{
top: -8px;
left: 50%;
margin-left: -4px;
cursor: n-resize;
}
.dragresize-tr
{
top: -8px;
right: -8px;
cursor: ne-resize;
}
.dragresize-ml
{
top: 50%;
margin-top: -4px;
left: -8px;
cursor: w-resize;
}
.dragresize-mr
{
top: 50%;
margin-top: -4px;
right: -8px;
cursor: e-resize;
}
.dragresize-bl
{
bottom: -8px;
left: -8px;
cursor: sw-resize;
}
.dragresize-bm
{
bottom: -8px;
left: 50%;
margin-left: -4px;
cursor: s-resize;
}
.dragresize-br
{
bottom: -8px;
right: -8px;
cursor: se-resize;
}
</style>
<script type="text/javascript">
var player = new CTWebPlayer();
$(function () {
player.playerUrl = "https://www.reallusion.com/crazytalk/Unity/samplecode/CTWebPlayer.unity3d";
player.init($("#unityPlayer"), function () {
player.loadProject("https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode11/display_playerresize.uctproject",
{
playAfter: 0,
idleMotionUrl: "https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode11/Affirmative.uctidle"
});
});
RLDrag();
$(window).resize(function(){
RLDrag();
});
});
//Move and Change Webplay Size
function RLDrag(){
var dragresize = new DragResize('dragresize', {
minWidth: 20, minHeight: 20, minLeft: 20, minTop: 10, maxLeft:
document.body.clientWidth - 10
});
dragresize.isElement = function (elm) {
if (elm.className && elm.className.indexOf('drsElement') > -1) return true;
};
dragresize.isHandle = function (elm) {
if (elm.className && elm.className.indexOf('drsMoveHandle') > -1) return true;
};
dragresize.apply(document);
}
</script>
</head>
<body>
<div class="drsElement drsMoveHandle" id="unityPlayer" style="width: 320px;
height: 240px;left: 700px; top: 100px; border: 5px solid black;">
</div>
</body>
</html>