Cinema8 Javascript API

This document will help you integrate Cinema8 Player with your applications using Cinema8 Player JavaScript API and Cinema8 Data API.

Javascript API

This section explains the basics of how to use the Cinema8 Player JavaScript API component of Cinema8 Player. It uses the same interface for HTML5 versions of the player.

Setup

Download Cinema8 Player Javascript API

Setup

<!-- Cinema8 Api -->
<script type="text/javascript" src="cinema8.player.api.min.js"></script>

<script>
    // Setup
    var player = Cinema8Player([selector], {
    id: [VIDEO_ID],
    host: [HOST],
    width: [String],
    height: [String],
    raw: [boolean],
    autoplay: [boolean],
    subtitles: [String],
    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");
    }
});
</script>

Options

  
selectorThe target element that Cinema8 Player will replace (mandatory) (eg. #video)
The selectors that can be used; class(.) or id(#)
idCinema8 video Id (mandatory)
hostCinema8 Host (optional) (default: https://cinema8.com)
widthThe width of the media file (optional) (default: 854px)
You can use all css size units (px, % etc.)
heightThe height of the media file (optional) (default: 480px)
You can use all css size units (px, % etc.)
rawRemoves tracks from the video if value is true (optional) (default: false)
subtitlesSets the default subtitles. (optional) (default: N/A)
autoplaySets whether the video should start playing as soon as it is loaded (optional)

true: Indicates that the video should start playing as soon as it is loaded
false: Indicates that the video should NOT start playing as soon as it is loaded

Methods

duration
Returns the length of the current video, in seconds.
player.duration();
play()
Starts playing the video
player.play();
pause()
Pauses the currently playing video
player.pause();
paused()
Returns whether the video is paused or not
player.paused();
currentTime()
Sets or returns the current playback position in the video (in seconds)
player.currentTime(); // Returns the current playback position in the video
player.currentTime(20); // Sets the current playback position in the video 
volume()
Sets or returns the volume of the video (Specifies the current volume of the video. Must be a number between 0.0 and 1.0)
player.volume(); // Returns the volume of the video
player.volume(0.5); // Sets the volume of the video 
subtitles()
Sets or returns current subtitles
player.subtitles(); // Returns the current subtitles
player.subtitles("en"); // Sets the subtitles 
removeSubtitles()
Turns off current subtitles
player.removeSubtitles();

Events

  
onreadyThe event occurs when the browser starts playing the media (when it has buffered enough to begin)
onprogressThe event occurs when the browser is in the process of getting the media data (downloading the media)
onplayThe event occurs when the media has been started or is no longer paused
onpauseThe event occurs when the media is paused either by the user or programmatically
onendThe onended event occurs when the video has reached the end

Example

Example Code

<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: "YVX35oO4",
    autoplay: false,
    subtitles: "en",
    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");
    }
});
</script>
</body>
<html>