< Back

Getting Started

UI Display Function

Loading Function

Text to Animated Function

Load Scripts form Text

Actor Function

Interaction Function

Advanced Function

Playback Status Example

In this sample, the bind function is used to get the time of playback for moving the character and changing the foreground and background images.

Using the bind Function

Controls Behaviors

This sample contains one player only and its behaviors are:

When the page is loaded, the materials such as the project, the script, the foreground and background images etc are pre-loaded.
Viewers must click the play button to play back.
When the playback hits a certain time, the initial background and foreground images are hidden and the other ones are shown.
Moreover, the character moves to a new position on 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();

    var WashScreen = 0;
    $(function () {
        player.playerUrl = "https://www.reallusion.com/crazytalk/Unity/samplecode/CTWebPlayer.unity3d";
        player.init($("#unityPlayer"), function () {

            var urls = ["https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode17_1/Cute_Dog.uctProject",
                        "https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode17_1/CTDefWebPreview.uctidle",
                        "https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode17_1/CarFront.png",
                        "https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode17_1/Night.png",
                        "https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode17_1/Bars.png",
                        "https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode17_1/BrickWall.jpg",
                        "https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode17_1/NeverDrinkAndDrive.uctScript"];
            player.preLoadFiles(urls, {
                thread: 7,
                loaded: function() {
                    player.loadProject("https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode17_1/Cute_Dog.uctProject", {
                        playerAfter:-1,
                        showActor: false,
                        idleMotionUrl:"https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode17_1/CTDefWebPreview.uctidle"
                    });
                    initialForeBack();
                    player.loadScript("https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode17_1/NeverDrinkAndDrive.uctScript", {
                        playAfter:-1,
                        loaded: function(){
                            actorInitialPosition();
                            player.showActor(true, 0);
                        }
                    });
                }//executed after loaded
            });//pre-loading

            player.bind( "playerstatus", function (event) {
                if( event.status == "startplay" )
                {
                    if (WashScreen == 1)
                    {
                        player.showActor(false, 0);
                        initialForeBack();
                        actorInitialPosition();
                        player.showActor(true, 0);
                        WashScreen = 0;
                    }
                }
                else if( event.status == "playing" )
                {
                    if (event.time > 5.5 && event.time < 5.52)
                    {
                        player.showProgressbar(false);
                        player.loadBackground("https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode17_1/BrickWall.jpg", {
                            name: "BrickWall",
                            alpha: 1,
                            fit: "fill",
                        });
                        player.showForeground("CarFront", false, 2);
                        actorInJail();
                    }
                    if (event.time > 6.5 && event.time < 6.6)
                    {
                        player.showForeground ("Bars", true, 0.5);
                    }
                }
                else if( event.status == "pause" )
                {
                    WashScreen = 0;
                }
                else if( event.status == "stop" || event.time == event.length)
                {
                    if (event.time == event.length)
                    {
                        player.showProgressbar(true);
                    }
                    WashScreen = 1;
                }
            });//bind
        });//initial
    })//$function


    function initialForeBack(){
        player.loadForeground("https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode17_1/Bars.png", {
            name: "Bars",
            zOrder: 0,
            alpha : 0,
            x: 0, y: -5, width: 100, height: 100,
            loaded: function(){
                player.showForeground("Bars", false, 0);
            }
        });
        player.loadForeground("https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode17_1/CarFront.png", {
            name: "CarFront",
            zOrder: 1,
            alpha : 1,
            x: 0, y: 0, width: 100, height: 100,
            loaded: function(){
                player.showForeground("CarFront", true, 0);
            }
        });
        player.loadBackground("https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode17_1/Night.png", {
            name: "Night",
            alpha:　1,
            fit: "fill"
        });
    }


    function actorInitialPosition() {
        player.actorTransform({
            scale: 50,
            positionX: 60,
            positionY: 45,
            duration: 0
        });
    }

    function actorInJail() {
        player.actorTransform({
            scale: 30,
            positionX: 22,
            positionY: 68,
            duration: 1
        });
    }
</script>

Copy and paste the codes in-between the <head> and </head> tags of your custom web page.
The purposes of the functions or variable:
- WashScreen: This variable is used as a flag to have the player to initialize the screen of the player.
- $(function (): This function defines the address, the position of the CrazyTalk Web Player in the custom web, preloads the material files this example needs, loads the project and script without playback, sets the foreground and background images, locates the initial position of the character. Besides, it also create a listener to get the player's status with the bind function.
- function initialForeBack(): This function initializes the status of the foreground and background images.
- function actorInitialPosition(): This function initializes the position of the character.
- function actorInJail(): This function transform the character to a specified position.
The adjustable codes in the functions:
$(function ()
- Replace the below address of the CrazyTalk Web Player with the one within your self-hosting server.
  https://www.reallusion.com/crazytalk/Unity/samplecode/CTWebPlayer.unity3d
- player.loadProject(){...}: For more information about the modification method to the function loading a default project, please refer to the Loading Projects section.
- player.loadScript(){...}: For more information about the modification method to the function loading a default script, please refer to the Loading Scripts section.
- player.bind("playerstatus", function (event){...}): For more information about the modification method to the bind function, please refer to the Getting Player Status section.
  - event = startplay: If the play button is click, this statement determines whether to initialize the screen of the player or not for the foreground, background images and the position of the character.
  - event = playing: This statements detects the playback time. If it falls within the specified time range (5.5 ~ 5.52) and (6.5 ~ 6.6), then the player starts, in the former range, to show the other background image, transforms the character to a new position and, in the latter range, shows the other foreground image.
  - event = pause: This statement sets the variable, WashScreen, to 0 so that when you click the Play button again from the pause mode, the screen of the player does not be initialized.
  - event = stop: This statements check if viewer clicks the stop button or the script has been play to the end and then sets the variable, WashScreen, to 1 so that next time the play button is hit, the screen of the player will be initialized.
function initialForeBack()
- Show specific foreground and background images. Please refer to the sections below for more information.
  - Loading Backgrounds
  - Loading Foregrounds
function actorInitialPosition(), actorInJail()
- Move the character to initial size and position or to a given size or position. Please refer to the Transforming Actor section for more information.

<div id="unityPlayer" style="width: 640px; height: 480px;">
</div>

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.