<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">
        var player = new CTWebPlayer();
        $(function () {

            player.playerUrl = "https://www.reallusion.com/crazytalk/Unity/samplecode/CTWebPlayer.unity3d";
            player.init($("#unityPlayer"), function () {
                player.loadActor("https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode6/Background.uctmodel", {
                    idleMotionUrl: "https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode6/Affirmative.uctidle"
                });
            });
        });

        function loadBackground1() {
            player.loadBackground("https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode6/BG_1.jpg", {
                alpha: 0.8
            });
        }


        function loadBackground2() {
            player.loadBackground("https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode6/BG_2.JPG", {
                alpha: 1
            });
        }


        function loadBackground3() {
            player.loadBackground("https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode6/BG_2.JPG", {
                alpha: 1,
                fit: "fill"
            });
        }


        function loadBackground4() {
            player.loadBackground("https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode6/BG_2.JPG", {
                alpha: 1,
                loaded: function () {
                    player.showBackground(false, 5.0);
                }
            });
        }

 
        function loadBackground5() {
            player.setBackgroundColor( "#000000" );
        }

        function loadBackground6() {
            player.setBackgroundColor( "#E8E8E8" );
        }

        function loadBackground7() {
            player.setBackgroundColor( "#FFFFFF" );
        }
    </script>
</head>

<body>
    <table style="text-align:center;margin-left:auto; margin-right:auto;">
        <tr>
            <td colspan = 2>
                <div id="unityPlayer" style="width: 640px; height: 480px;">
                </div>
            </td>
        </tr>
        <tr>
            <td bgcolor="#E8E8E8">
                <p align=center>
                    <b>Images</b>
                </p>
            </td>
            <td bgcolor="#E8E8E8">
                <p align=center>
                    <b>Solid Color</b>
                </p>
            </td>
        </tr>
        <tr>
            <td>
                <input type="button" value="BG1" onclick="loadBackground1()" class="button" />
                <input type="button" value="BG2" onclick="loadBackground2()" class="button" />
                <input type="button" value="BG3" onclick="loadBackground3()" class="button" />
                <input type="button" value="BG4" onclick="loadBackground4()" class="button" />
            </td>

            <td>
                <input type="button" value="Black" onClick="loadBackground5()" class="button"/>
                <input type="button" value="Gray" onClick="loadBackground6()" class="button"/>
                <input type="button" value="White" onClick="loadBackground7()" class="button"/>
            </td>
        </tr>
    </table>
</body>

</html>