< Back

Getting Started

UI Display Function

Loading Function

Text to Animated Function

Load Scripts form Text

Actor Function

Interaction Function

Advanced Function

Showing and Hiding Web Player

In this sample, you may use CSS (Cascading Style Sheet) definitions to determine the show/hide abilities for the web player, and then use buttons to toggle these abilities.

Using the loadProject Function

Controls Behaviors

This sample contains 2 buttons, their behaviors are:

Click the first button, Show, to show the player.
Click the second button, Hide, to hide the player.
Please view the source code here.

Sample Code:

<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";
        PlayerInit();
    });

    function Show() {
        $("#unityPlayer").show();
        PlayerInit();
    }

    function Hide() {
        $("#unityPlayer").hide();
    }

    function PlayerInit() {
        player.init($("#unityPlayer"), function () {
            player.loadProject("https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode12/display_player.uctproject", {
                playAfter: 0,
                idleMotionUrl: "https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode12/male.uctidle"
            });
        });
    }
</script>

Copy and paste the codes in-between the <head> and </head> tags of your custom web page.
The purposes of the functions:
- $(function (): This function defines the address of the CrazyTalk Web Player in the custom web.
- function Show(): This function shows the player.
- function Hide(): This function hides the player.
- function PlayerInit(): This function initializes the web player by loading a default project and auto-plays the project afterward.

The adjustable codes in the function:
function PlayerInit

Replace the below address of the *.uctproject file with the one where you have uploaded your custom project.
https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode12/display_player.uctproject

Note:

If the custom actor files are uploaded to the identical server where your custom web pages are, then simply change the entire addresses (http://...uctmodel) to the file names of the custom actors.
Otherwise, you must replace the entire addresses with the complete addresses (URL) of the custom actor files.

playAfter: The value determines the seconds for the player to wait before starting play the true content of the project. A negative number means never to play back.

<div id="unityPlayer" style="width: 640px; height: 480px;">
</div>
<input type="button" value="Show" onclick="Show()" class="button" />
<input type="button" value="Hide" onclick="Hide()" class="button" />

Web Player

Copy and paste the codes from <div> to </div> into the position where you want to embed the web player in-between the <body> and </body> tags of your custom web page.
Modify the numbers after the width: and height: parameters in the first line to customize the size of the player.

Controls for Showing Events

Copy the <input.../> lines to the positions where you want to embed the buttons in-between the <body> and </body> tags of your custom web page.
Please note that:
- The function and the button that calls it must be individually put within the head and body blocks in pairs.
- You can only copy and paste the desired buttons and the functions to your custom web pages.
These two <input.../> lines form two buttons on the web. Each of them will call the function declared within the head block after being clicked.