< 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 Play Bar

In this sample, you can simply use the showPlaybar function to hide or show the play bar at the bottom of the web player, because sometimes you do not want the audiences to play, stop the project you have prepared to show them.

Using the showPlaybar Function

Controls Behaviors

This sample contains 2 buttons, their behaviors are:

Click the first button, Show, to show the play bar.
Click the second button, Hide, to hide the play bar.
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/SampleCode4_1/Cute_Dog.uctProject", {
                playAfter: -1,
                idleMotionUrl: "https://www.reallusion.com/crazytalk/Unity/samplecode/SampleCode4_1/Exhausted.uctidle",
            });
        });
    });


    function ShowPlayBar() {
        player.showPlaybar(true);
    }


    function HidePlayBar() {
        player.showPlaybar(false);
    }

</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 the position of the CrazyTalk Web Player in the custom web page and initializes the player; meanwhile, loading a project (Cute_Dog.uctProject) and an idle motion (Exhausted.uctidle) file without auto-playing back.
- function ShowPlayBar(): This function shows the play bar.
- function HidePlayBar(): This function hides the play bar.
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("...",{}): Please refer to the Loading Projects for more information about the adjustable parts in this function.
function ShowPlayBar(), HidePlayBar()
- player.showPlaybar(boolean): This line determine to show or hide the play bar. The possible values are:
  - true: This value show the play bar.
  - false: This value hide the play bar.

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

<input type="button" value="Show" onclick="ShowPlayBar()" class="button" />
<input type="button" value="Hide" onclick="HidePlayBar()" 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.

Buttons with Pre-defined Settings

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 <input.../> lines form two buttons on the web. Each of them will call the function declared within the head block after being clicked.