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
<!-- Cinema8 API -->
<script type="text/javascript" src="cinema8.player.api.min.js"></script>
var player = new Cinema8Player(SELECTOR, {
options,
events
}
Options
- 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
muted // Open video as muted, default: false
loop // restart video on end, default: false
campaignParams // default: null
time // Start a video at any specific time in seconds
authToken // authentication token
resumeLastPosition // Resume video from where the user previously left off
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 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
- 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
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: "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>