Javascript Web Hooks

You can add JavaScript webhooks to your interactive videos in Cinema8, allowing you to inject custom JavaScript code and enhance your videos with your business processes. This can be achieved by using the "Execute Custom Callback" action type.

Using JavaScript webhooks in Cinema8 involves two simple steps:

1. Trigger an Action in the Video

To trigger an action within your video, you can add the "Execute Custom Callback" action type to various elements:

• Add an onClick action to an "Image" element inside the video with the action type "Execute Custom Callback".
• Add an onClick action to a "Clickable Area" element inside the video with the action type "Execute Custom Callback".
• Add a "Conditional Action" element and assign the "Execute Custom Callback" action type to your condition.
• Add an "Action" element and assign the "Execute Custom Callback" action type to your action on the timeline.

In these cases, the video will trigger the execution of the underlying web context in JavaScript, allowing you to pass any parameters to the callback function from the Creative Studio editor.

2. Catch the "Execute Custom Callback" Hook in JavaScript

After triggering an action, you can catch the "Execute Custom Callback" hook in your JavaScript code where you embed the video using the Cinema8 JavaScript API. Here's an example of how you can do this:

```javascript var ivideo = new IVideo('#video', { id: '4JyYR9JQ', autoplay: false, width: 854, height: 480, onready: function() {}, onprogress: function() {}, onplay: function() {}, onpause: function() {}, onend: function() {}, oncustomcallback: function(param) { // This is where you can catch the execution and execute your custom functions // The function runs asynchronously. console.log(param); } });