Javascript WebHooks - Custom CallBacks

To enable JavaScript webhooks in Cinema8, use the "Execute Custom Callback" action type. Setting up a JavaScript webhook in Cinema8 is a simple two-step process:

Step 1: Trigger an Action within the Video

To trigger an action within a video, users can:

• Add an onClick action to an "Image" element with the action type "Execute Custom Callback".
• Add an onClick action to a "Clickable Area" element with the action type "Execute Custom Callback".
• Add a "Conditional Action" element and assign an "Execute Custom Callback" action type.
• Add an "Action" element to the timeline and set the action type as "Execute Custom Callback".

With these setups, the video will pass execution to the underlying web context in JavaScript. Parameters can also be passed to the callback function from the Creative Studio editor.

Step 2: Catch the "Execute Custom Callback" in Your Javascript Code

To catch the callback, embed your video with the Cinema8 JavaScript API as shown below:

var player = new Cinema8Player("#video", {
    id: "rJVZ6nJg",
    onReady: function(){
        // console.log("onready fired");
    },
    onPlay: function(){
        // console.log("onplay fired");
    },
    onPause: function(){
        // console.log("onpause fired");
    },
    onProgress: function(){
        // console.log("onprogress fired");
    },
    onEnd: function(){
        // console.log("onend fired");
    },
    onCustomCallback: function(param){
        console.log(param);
    },
    onWebhookResponse: function(response){
        console.log(response);
    }
});

Users can download a working example from the Cinema8 GitHub account.