Search articles

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


selector	The target element that Cinema8 Player will replace (mandatory) (eg. #video) The selectors that can be used; class(.) or id(#)
id	Cinema8 video Id (mandatory)
host	Cinema8 Host (optional) (default: https://cinema8.com)
width	The width of the media file (optional) (default: 854px) You can use all css size units (px, % etc.)
height	The height of the media file (optional) (default: 480px) You can use all css size units (px, % etc.)
raw	Removes tracks from the video if value is true (optional) (default: false)
subtitles	Sets the default subtitles. (optional) (default: N/A)
autoplay	Sets 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


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 getting the media data (downloading the media)
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 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>