< Back

Getting Started

UI Display Function

Loading Function

Text to Animated Function

Load Scripts form Text

Actor Function

Interaction Function

Advanced Function

Getting Playback Status

In this sample, you may use the bind function to perform given actions for the player's playback status, such as start, playing, pause and stop.

Using the bind Function

Current Time: Total Time:

Controls Behaviors

This sample contains 1 player and 2 labels, their behaviors are:

When the project starts to play, an image (7.jpg) is loaded as the background.
When the project is playing, the texts of the labels (labTime, labTotalTime) will be set to show the current time and the total time of the project.
Clicking the pause button while the player is playing will cause a foreground image to show (Logo.jpg). Click on the foreground logo to open a new browser page with a given address (www.reallusion.com).
Click the stop button while the player is playing, the actor will be replaced with a new one (Interaction_animation_callback2.uctmodel), and another script (Interaction_animation_callback2.uctscript) will also be loaded.
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";
        player.init($("#unityPlayer"), function () {
            player.loadProject("https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode17/Interaction_animation_callback.uctproject", {
                playAfter: 0,
                idleMotionUrl: "https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode17/Affirmative.uctidle"
            });
            player.bind( "playerstatus", function (event) {
                if( event.status == "startplay" )
                {
                    player.loadBackground("https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode17/image.jpg", {
                        alpha: 1
                    });
                }
                else if( event.status == "playing" )
                {
                    $("#labTime").text(event.time);
                    $("#labTotalTime").text(event.length);
                }
                else if( event.status == "pause" )
                {
                    player.loadForeground("https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode17/logo.png", {
                        action: "onClick();",
                        x: 0, y: 0, width: 20, height: 8,
                        hotspotX: 0, hotspotY: 0, hotspotWidth: 100, hotspotHeight: 100
                    });
                }
                else if( event.status == "stop" )
                {
                    $("#labTime").text(event.time);
                    player.loadActor("https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode17/Interaction_animation_callback2.uctmodel");
                    player.loadScript("https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode17/Interaction_animation_callback2.uctscript");
                }
            });
        });
    });

    function onClick() {
        window.open('https://www.reallusion.com', '_blank');
    }
</script>

Copy and paste the code in-between the <head> and </head> tags of your custom web page.

The purposes of the functions:

$(function (): This function defines the address and position of the CrazyTalk Web Player in the custom web page. It contains two methods -

player.loadProject(){...}: This method loads and plays a default project (Interaction_animation_callback.uctproject) with an assigned idle motion (CTDefWebPreview.uctidle) once your page is opened.

player.bind("playerstatus", function (event){...}): This method detects events in order to react.

event = startplay: This event will load and show an image (image.jpg) as the background.
event = playing: This event will set the text of labels (labTime, labTotalTime) to show the current playback time and the total length of the project.
event = pause: This event will load and show an image (Logo.png) as a foreground. Click on the foreground to open a new browser page with a given address (www.reallusion.com).

event = stop: This event will load and show another actor (Interaction_animation_callback.uctmodel) with a new script (Interaction_animation_callback.uctscript).

Note:

Please note that the label names mentioned above must be identical to the ones given to the controls within the body block.

function onClick(): This function opens a new web browser and loads a given web site (https://www.reallusion.com).

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.bind("playerstatus", function (event){...}):

event = startplay: For more information about the modification method to the loading a background image function, please refer to the Loading Backgrounds section.
event = pause: For more information about the modification method to the loading a background image function , please refer to the Loading Foreground section.

event = stop: For more information about the modification method to the loading a model and a script function, please refer to the Loading Actors and Loading Scripts sections.

Note:

You are free to add different main functions you have learned in the other pages of sample code into these methods so that these functions can be triggered by certain playback events.

function onclick()

Replace the original address (https://www.reallusion.com) with a desired one you want to direct the audience to.

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

Current Time:<label id="labTime" style="color:red"></label>
Total Time:<label id="labTotalTime" style="color:red"></label>

Web Player

Copy and paste the code 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

These lines of code are for showing the playback events. You may optionally copy and paste them into your custom web pages; which will prevent any issues and allow the bind function to still work perfectly even if your web pages does not have this code.

Copy the Current Time: <label.../> line to add a label to show the current time when the player plays back.

Copy the Total Time: <label.../> line if you want to show the total length of the project.

Note:

Please note that these label names mentioned above must be identical to the ones given to the controls within the head block.