JavaScript API

<script src="https://static-01.cinema8.com/player/api/cinema8.player.api.min.js"></script>

var player = new Cinema8Player("#video", {
  id: "WDerp5Xy",
  autoplay: false,
  controls: true,
 
  // Lifecycle events
  onReady: () => console.log("Player ready"),
  onPlay: () => console.log("Playing"),
  onPause: () => console.log("Paused"),
  onProgress: () => console.log("Time updated"),
  onEnd: () => console.log("Playback ended"),
 
  // Interaction events
  onVolumeChange: (volume) => console.log("Volume:", volume),
  onFullscreenChange: (params) => console.log("Fullscreen changed:", params),
  onSubtitleChange: (params) => console.log("Subtitle changed:", params),
  onVariableChange: (params) => console.log("Variable changed:", params),
 
  // Integration events
  onCustomCallback: (params) => console.log("Custom callback:", params),
  onWebhookResponse: (res) => console.log("Webhook response:", res),
  onScormEvent: (params) => console.log("SCORM event:", params),
  onError: (err) => console.error("Player error:", err),
});

{
  // Core
  id: "your-video-id",             // Unique ID of the Cinema8 video
 
  // Dimensions
  width: "854px",                  // Player width (default: "854px")
  height: "480px",                 // Player height (default: "480px")
  style: "",                       // Inline CSS string applied to the iframe
                                   // For responsive (fluid) embedding use:
                                   // style: "position: absolute; top: 0px; right: 0px; bottom: 0px; left: 0px; width: 100%; height: 100%; border: 0;"
 
  // Playback
  autoplay: false,                 // Automatically start playback (default: false)
  forceAutoplay: false,            // If autoplay is blocked by the browser, falls back to muted autoplay (default: false)
  muted: false,                    // Start video muted (default: false)
  loop: false,                     // Loop video on end (default: false)
  time: 0,                         // Start at a specific time in seconds
  resumeLastPosition: false,       // Resume from last watched position for logged-in users
 
  // Controls
  controls: true,                  // Show player controls — true/false, or an object for
                                   // granular control: { play: true, volume: false, ... }  
 
  // Localisation
  subtitle: "en",                  // Default subtitle language code (e.g. "en", "tr", "off")
  defaultLang: 1,                  // Index of the default audio track (1, 2, 3, ...)
 
  // User / Auth
  authToken: "jwt-token",          // JWT token for authenticated sessions
  externalUser: {                  // Pass an external user identity
    name: "John",
    surname: "Doe",
    email: "john.doe@example.com",
    reference: "user-123"          // Optional unique reference ID for the user
  },
 
  // Tracking
  campaignParams: "utm_source=web&utm_medium=embed&utm_campaign=launch" // Campaign query parameters appended to the player URL
}

player.play();                    // Start playback
player.pause();                   // Pause playback
player.duration();                // Get total video duration in seconds
player.currentTime();             // Get current playback position in seconds
player.currentTime(20);           // Seek to 20 seconds
player.paused();                  // Returns true if the video is paused
player.watchTime();               // Seconds watched in the current video
player.totalWatchTime();          // Total cumulative seconds watched

player.volume();                  // Get current volume (0.0 – 1.0)
player.volume(0.5);               // Set volume
player.muted();                   // Returns true if the player is muted
player.audioTracks();             // Get list of available audio tracks
player.audioTrack();              // Get the active audio track
player.audioTrack(1);             // Switch to audio track by index

player.subtitles();               // Get list of available subtitle tracks
player.subtitle();                // Get the active subtitle language code
player.subtitle("fr");            // Switch to French subtitles
player.subtitle("off");           // Disable subtitles

player.playbackRate();            // Get current playback rate
player.playbackRate(1.5);         // Set playback rate (e.g. 0.5, 1.0, 1.25, 1.5, 2.0)

player.loop();                    // Get current loop state (true/false)
player.loop(true);                // Enable looping
player.loop(false);               // Disable looping

player.launchFullscreen();        // Enter fullscreen
player.exitFullscreen();          // Exit fullscreen
player.isFullscreen();            // Returns true if player is in fullscreen
player.showControls();            // Show the player control bar
player.hideControls();            // Hide the player control bar

player.qualityLevels();           // Get list of available quality levels
player.qualityLevel();            // Get the current quality level
player.qualityLevel(3);           // Set quality to a specific level index
player.qualityLevel("auto");      // Set quality to auto

player.getVariables();                       // Get all runtime player variables
player.getVariable("myVar");                 // Get a single variable by key
player.setVariable("myVar", "hello", true);  // Set a variable — 3rd arg (persistent): when true,
                                             // the variable is shared across connected videos;
                                             // when false, it is scoped to the current video only

player.getAuthenticatedUser();    // Returns the authenticated user object, or null if not logged in
                                  // { username: "john.doe@example.com", name: "John", surname: "Doe" }

player.unload();                  // Remove the player iframe from the DOM

<html>
  <body>
    <div id="video"></div>
 
    <script src="https://static-01.cinema8.com/player/api/cinema8.player.api.min.js"></script>
    <script>
      var player = new Cinema8Player("#video", {
        id: "WDerp5Xy",
        autoplay: false,
        controls: true,
        muted: false,
 
        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"),
        onVolumeChange: (vol) => console.log("Volume:", vol),
        onFullscreenChange: (p) => console.log("Fullscreen:", p),
        onVariableChange: (p) => console.log("Variable changed:", p),
        onCustomCallback: (p) => console.log("Custom callback:", p),
        onWebhookResponse: (res) => console.log("Webhook response:", res),
        onError: (err) => console.error("Error:", err),
      });
 
      // Example: seek to 10s after 3 seconds
      setTimeout(() => player.currentTime(10), 3000);
    </script>
  </body>
</html>