Cinema8 Javascript API

Javascript API

We will explain the basics of how to use the Cinema8 Player JavaScript API component of Cinema8 Player. It uses the same interface for HTML5 video player API and extends it with advanced features.

Download js from cdn

Setup

  1. <!-- Cinema8 Api --> <script type="text/javascript" src="cinema8.player.api.min.js"></script>
  2. var player = new Cinema8Player(SELECTOR, { options, events }

Options


  1. id // Project id width // default: 854px height // default: 480px style // default: '' type // default: VIDEO (VIDEO, RAW_VIDEO) autoplay // default: false externalVideoUrl // hls(m3u8), mp4, flv, mp3 etc. subtitle // (en, tr etc..) defaultLang // audio track, default: 1 (audio track index. 1, 2, 3 etc.) controls // Show/hide player controls, default: true campaignParams // default: null (e.g. utm_source=ted&utm_medium=banner&utm_campaign=spring_sale&utm_id=554433) time // Start a video at any specific time in seconds authToken // authentication token resumeLastPosition // Resume video from where you previously left off (works only for authenticated users) externalUser: { name: "John", surname: "Doe", email: "john.doe@gmail.com", },

Events

onReady
The event occurs when the browser starts playing the media (when it has buffered enough to begin) onProgress
The event occurs when the browser is in the process of downloading the media data. onPlay
The event occurs when the media has been started or is no longer paused onPause
The event occurs when the media is paused either by the user or programmatically onEnd
The onend event occurs when the video has reached the end onCustomCallback
This event triggers if any widget/action within the video is calling
onCustomCallback action, it gets variables from the action onWebhookResponse
This event triggers when a remote webhook response returns onError
The event occurs when any error occurs at runtime

Functions

  1. player.play(); // Play the video player.pause(); // Pause Video player.duration(); //Returns the length of the current video, in seconds. player.currentTime(); // Returns the current playback position in the video player.currentTime(20); // Sets the current playback position in the video player.paused(); //Returns whether the video is paused or not player.volume(); // Returns the volume of the video player.volume(0.5); // Sets the volume of the video player.subtitles() // Returns the defined subtitles within video. [ { "value": "fr", "label": "French" }, { "value": "en", "label": "English" } ] player.subtitle() // en // returns selected subtitle in runtime player.subtitle('fr') //changes the subtitle
  2. player.removeSubtitles(); //Turns subtitles off
  3. player.audioTracks(); // Lists available audio tracks within video. [ { "label": "English", "value": "en" }, { "label": "Spanish", "value": "es" }, { "label": "Commentary (eng)", "value": "en" } ] player.audioTrack(); // Get active audio track at runtime {label: 'English', value: 'en'} player.audioTrack(1); // Change audio track player.getVariables(); // Returns all available variables at runtime player.setVariable("score", 10); // dynamically set variable within video player.getVariable("score"); // get variable value at runtime player.setPlaybackRate(1.25); //Default: 1 (0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2) player.setLoop(true) // Default: false

Example
Example Code

  1. <html> <head></head> <body> <div id="video"></div> <!-- Cinema8 Player Api --> <script type="text/javascript" src="cinema8.player.api.min.js"></script> <script> // Setup 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); } }); }); </script> </body> <html>

    • Related Articles

    • Javascript WebHooks - Custom CallBacks

      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" ...
    • Generating API key for integrations

      Get an API Key New Users:  Before you can start using the Cinema8 Platform APIs and SDKs, you must sign up and create a billing account. To learn more, see  Get Started with Cinema8 Platform . Cinema8 supports OAuth specification to authorize API ...
    • Getting started with C8 API

      Cinema8 APIs to build extensive digital experiences within your videos. Cinema8 has an extensive API to support your business and your customers’ needs while developing interactive video-based solutions. Whether you are developing a web application, ...
    • REST API

      This section explains the basics of how to use the Cinema8 Rest API. Before You Begin You can access Cinema8 Rest API documentation and postman collection from this link. In order to access the rest services, you must create an API Key, you can ...
    • Widget API

      Widgets are key expansion points of any cinema8 interactive video. While You can use any widget from the widget library you can also develop your own customized widgets with the C8 Widget Development environment. This article walks you through ...