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 |
Methods
duration
Returns the length of the current video, in seconds.player.duration();
play()
Starts playing the videoplayer.play();
pause()
Pauses the currently playing videoplayer.pause();
paused()
Returns whether the video is paused or notplayer.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 subtitlesplayer.subtitles(); // Returns the current subtitles
player.subtitles("en"); // Sets the subtitles
removeSubtitles()
Turns off current subtitlesplayer.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>