Javascript web hooks

You can add javascript web hooks in to your interactive videos with Cinema8.By this technic you can inject custom javascript codes in to your videos and empower your interactive videos with your business process.

You can use "Execute Custom Callback" action type for this purpose.Using javascript web hooks in Cinema8 requires two asy steps.

1- First you need to trigger an action within your video.To Trigger an action within a video you can 

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

 

In this cases the video will give the execution to the underlying web context in javascript.You can also pass any parameters to callback function from creative studio editor.

 

 

2- Catch the "Execute Custom Callback" hook in your javascript code where you embed the video with Cinema8 js api.

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 will catch the execution and execute your custom functions
     //this function runs asynchronously.   
     console.log(param);
    }
});

 

You can download a running example from Cinema8 Github account.