Media Platform Runtime API (rtAPI) Documentation
rtAPI is a simple set of Javascript APIs that offers access to manipulate and track a gallery on client side.
Use the following set of rtAPI to preform :
Register to receive events
Register events :
Scenario 1 : when Cincopa's main lib - libasync.js already loaded
cincopa.registerEvent("cp_evt_mediaplay", "runtime.*");
function cp_evt_mediaplay(name, data, gallery) {
if (name == "runtime.on-load-html") // make sure this event is runtime.on-load-html
gallery.args.allow_search = "yes";
}
Scenarion 2 : If libasync.js is not loaded yet
var cincopa = cincopa || {};
cincopa.registeredFunctions = cincopa.registeredFunctions || [];
cincopa.registeredFunctions.push({
func: function (name, data, gallery) {
gallery.args.allow_search = "yes";
}, filter: "runtime.on-load-html"
});
Debug mode
Enable debug mode from the console to see every event and debug data during libasync lifetime.
Note that this mode is saved to a domain cookie so no need to do it every time.
When debug mode is set to true every event will appear in the console.
cincopa.set_debug(true)
Here is an example of a video play from start till end in debug on :
How to control the player with Cincopa PlayerAPI
See the Pen Cincopa PlayerAPI by oren (@cincopa) on CodePen.
How to add lead generation form to a video
See the Pen How to add lead generation form to a video by oren (@cincopa) on CodePen.
How to add company logo to video control panel
See the Pen How to add company logo to video control panel by oren (@cincopa) on CodePen.
How to get video duration
See the Pen How to get video duration by oren (@cincopa) on CodePen.
How to add watermark to video
See the Pen How to add watermark to video by oren (@cincopa) on CodePen.
How to get progress while video is playing and video heatmap
See the Pen How to get progress while video is playing and video heatmap by oren (@cincopa) on CodePen.
How to add a pre roll and post roll to a video
See the Pen How to add a pre roll and post roll to a video by oren (@cincopa) on CodePen.
How to add sharing option to a video
See the Pen How to add sharing option to a video by oren (@cincopa) on CodePen.
Following is a list of all events available :
- runtime.on-args - Fires after all args were received and before loading the media, use this even change change/override args at runtime.
- runtime.on-media-json - Fires after media JSON was received and before loading the player, use this event to manipulate the media JSON for example add, remove or change media items.
- runtime.on-load-html - Fires before player loads the HTML, use this event to make final changes in the DIV or generic settings like allow_search.
- runtime.on-html-loaded - Fires after player is fully visible, use this event mostly for analytics.
Following is a list of video events - video.*
All events in this namespace will send in the data parameter (2nd arg of the event) the following structure {item: {...this is the item from the medai JSON...}, version: {...rendition info...}}
- video.load - Fires when video is loaded, this event will fire for every video in your playlist.
- video.play - Fires when video start to play.
- video.pause - Fires when video is paused.
- video.timeupdate - Fires during video plays for every second of play.
- video.change - Fires when player changes the rendition version, like when user goes full screen.
- video.error - Fires when video can't be loaded or when there is an error during the play.
- video.ended - Fires when video has ended.
- video.unload - Fires before video is unloaded.
- audio.load
- audio.play
- audio.pause
- audio.timeupdate
- audio.ended
- audio.unload
- lead.created - uid, email, lead_email, lead_first, lead_last, lead_company, lead_mediarid, lead_mediatitle, lead_hmid
- chromecast.detected
- chromecast.start
- chromecast.stop
- emailgate.show
- emailgate.submit
- emailgate.skip
- emailgate.hide
- photo.open
- photo.prev
- photo.next
- photo.close
Register to receive hooks
Hooks can be used to manipulate gallery at any given stage.
List of hooks :
before-building-upper-panel
on-media-json
For example
_cp_go_hooks["before-building-upper-panel"] = function(go) {
go.args.allow_search = "yes";
return "[this is a link]";
};