JavaScript API

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

var player = new Cinema8Player("#video", {
  id: "rJVZ6nJg",
  autoplay: false,
  controls: true,
  onReady: () => console.log("Player ready"),
  onPlay: () => console.log("Playing..."),
  onPause: () => console.log("Paused"),
  onEnd: () => console.log("Playback ended"),
  onCustomCallback: (param) => console.log("Custom callback:", param),
  onWebhookResponse: (res) => console.log("Webhook response:", res)
});

{
  id: "your-project-id",                // Unique ID of the Cinema8 project
  width: 854,                           // Player width (default: 854px)
  height: 480,                          // Player height (default: 480px)
  autoplay: false,                     // Automatically play the video (default: false)
  controls: true,                      // Show player controls (default: true)
  muted: false,                        // Start video muted (default: false)
  loop: false,                         // Loop video on end (default: false)
  externalVideoUrl: "video.mp4",       // URL of external video file (HLS, MP4, FLV, etc.)
  subtitle: "en",                      // Default subtitle language (e.g. 'en', 'tr')
  defaultLang: 1,                      // Index of default audio track (1, 2, 3, ...)
  authToken: "your-auth-token",        // JWT token for authenticated sessions
  resumeLastPosition: true,            // Resume video from last watched time (for logged-in users)
  campaignParams: "utm_source=...",    // Optional campaign tracking query parameters
  time: 0                              // Start the video at a specific time in seconds
}

{
  id: "your-project-id",
  width: 854,
  height: 480,
  autoplay: false,
  controls: true,
  muted: false,
  loop: false,
  campaignParams: null,
  time: 0,
  externalVideoUrl: "video.mp4",
  subtitle: "en",
  defaultLang: 1,
  authToken: "your-auth-token",
  resumeLastPosition: true,
  externalUser: {
    name: "John",
    surname: "Doe",
    email: "john.doe@gmail.com"
  }
}

player.play();                  // Start playback
player.pause();                 // Pause playback
player.duration();             // Get total video duration in seconds
player.currentTime();          // Get current playback time
player.currentTime(20);        // Seek to 20 seconds
player.paused();               // Check if video is paused
player.volume();               // Get current volume
player.volume(0.5);            // Set volume (0.0 to 1.0)
player.subtitles();            // Get list of subtitles
player.subtitle("fr");         // Switch to French subtitles
player.subtitle("off");        // Disable subtitles
player.audioTracks();          // Get list of available audio tracks
player.audioTrack(1);          // Switch to second audio track
player.setPlaybackRate(1.25);  // Set playback speed
player.loop(true);             // Enable looping
player.loop(false);            // Disable looping
player.getAuthenticatedUser(); // Get current user info (if authenticated)
player.getVariables();         // Retrieve all runtime variables
player.setVariable("key", "value", true); // Set a persistent variable
player.launchFullscreen();     // Launch fullscreen
player.exitFullscreen();       // Exit fullscreen
player.hideControls();         // Hide player controls
player.showControls();         // Show player controls
player.qualityLevel();         // Get current quality level
player.qualityLevel(3);        // Set quality level to specific value
player.qualityLevel("auto");   // Set quality level to auto
player.qualityLevels();        // List all quality levels

player.play();
player.pause();
player.duration();
player.currentTime();
player.currentTime(20);
player.volume();
player.volume(0.5);
player.paused();
player.subtitle('fr');
player.subtitle('off');
player.audioTracks();
player.audioTrack();
player.audioTrack(1);
player.setPlaybackRate(1.25);
player.loop();
player.loop(true);
player.loop(false);
player.getVariables();
player.getVariable("key");
player.setVariable("key", "value", true);
player.getAuthenticatedUser();
player.launchFullscreen();
player.exitFullscreen();
player.hideControls();
player.showControls();
player.qualityLevel();
player.qualityLevel(3);
player.qualityLevel("auto");
player.qualityLevels();

<html>
  <body>
    <div id="video"></div>
    <script src="cinema8.player.api.min.js"></script>
    <script>
      var player = new Cinema8Player("#video", {
        id: "rJVZ6nJg",
        onReady: () => console.log("onReady fired"),
        onPlay: () => console.log("onPlay fired"),
        onPause: () => console.log("onPause fired"),
        onProgress: () => console.log("onProgress fired"),
        onEnd: () => console.log("onEnd fired"),
        onCustomCallback: param => console.log(param),
        onWebhookResponse: response => console.log(response)
      });
    </script>
  </body>
</html>