Dynamic JS (PlayKit) Embed - Kaltura Player

Dynamic JS (PlayKit) Embed

Load the PlayKit/Kaltura Player JS for your PID/UiConfID, then call KalturaPlayer.setup(...) and loadMedia(...).

The code below assumes the same tokens as the iframe embed.

<!-- 1) Load player library for your PID/UiConfID -->
<script src="https://cdnapisec.kaltura.com/p/\{PARTNER_ID\}/embedPlaykitJs/uiconf_id/\{PLAYER_INSTANCE_ID\}/kaltura-player.js" type="text/javascript"></script>

<!-- 2) Player container -->
<div id="kplayer" style="max-width:100%;aspect-ratio:16/9;"></div>

<script>
  // 3) Setup with provider + playback; pass KS here when needed
  try {
    const player = KalturaPlayer.setup({
      targetId: 'kplayer',
      provider: {
        partnerId: \{PARTNER_ID\},
        uiConfId: \{PLAYER_INSTANCE_ID\},
        ks: '\{KALTURA_SESSION\}' // optional if content is public
        // env: { serviceUrl: 'https://www.kaltura.com' } // override if needed
      },
      playback: {
        autoplay: true,
        muted: true    
      }
    });

    // 4) Load media and optionally start at N seconds
    player.loadMedia(
      { entryId: '\{ENTRY_ID\}' },
      { seekFrom: \{CLIP_START_SECONDS\}, clipTo: \{CLIP_END_SECONDS\} }  
    );
    // Wait for the player to be ready (tracks loaded, safe to query state)
    player.ready().then(() => {
      console.log("player is ready!");
    });
  } catch (e) {
    console.error(e.message);
  }

Full KalturaPlayer.setup() Config Object

The KalturaPlayer.setup() call accepts a configuration object with the following top-level sections:

const player = KalturaPlayer.setup({
  targetId: 'kplayer',               // Required: DOM element ID for the player container
  log: { level: 'ERROR' },           // Log level: 'DEBUG', 'INFO', 'WARN', 'ERROR', 'OFF'

  provider: {
    partnerId: PARTNER_ID,           // Required: Kaltura partner ID (integer)
    uiConfId: UICONF_ID,            // Required: Player instance ID from KMC
    ks: 'KS_STRING',                // Optional: Kaltura Session for authenticated playback
    env: {
      serviceUrl: 'https://www.kaltura.com',  // API service URL (override for non-default regions)
      cdnUrl: 'https://cdnapisec.kaltura.com' // CDN URL (override for non-default regions)
    }
  },

  playback: {
    autoplay: true,                  // Auto-start playback (requires muted:true in most browsers)
    muted: false,                    // Start muted
    mutedAutoPlay: true,             // Fall back to muted autoplay if unmuted autoplay is blocked
    loop: false,                     // Loop playback when media ends
    startTime: 0,                    // Start playback at this position (seconds)
    volume: 1.0,                     // Initial volume (0.0 - 1.0)
    playsinline: true,               // Inline playback on mobile (no fullscreen takeover)
    preload: 'auto',                 // Preload behavior: 'auto', 'metadata', 'none'
    allowMutedAutoPlay: true,        // Allow muted autoplay as fallback
    streamPriority: [
      { engine: 'html5', format: 'hls' },
      { engine: 'html5', format: 'dash' },
      { engine: 'html5', format: 'progressive' }
    ]
  },

  ui: {
    disable: false,                  // Disable the entire UI
    css: '',                         // Custom CSS string injected into the player
    components: {
      seekbar: { disabled: false },  // Toggle individual UI components
      watermark: {
        img: 'https://example.com/logo.png',
        url: 'https://example.com',
        placement: 'top-left',       // 'top-left', 'top-right', 'bottom-left', 'bottom-right'
        timeout: 0                   // Seconds to show watermark (0 = always)
      }
    }
  },

  plugins: {
    // Plugin configs — see PlayKit Plugin Ecosystem for details per plugin
  }
});

Config Section	Purpose
targetId	DOM element ID where the player renders. The element must exist before setup() is called.
provider	Kaltura account and authentication settings. partnerId and uiConfId are required.
playback	Playback behavior: autoplay, volume, looping, stream format priority.
ui	Player UI customization: disable controls, inject CSS, toggle components, add watermarks.
plugins	Plugin activation and configuration. Pass an empty object {} to enable with defaults, or provide config parameters.
log	Logging verbosity. Use DEBUG during development and ERROR in production.

loadMedia() Options

The player.loadMedia() method accepts two arguments: a media info object and an optional options object:

player.loadMedia(
  { entryId: 'ENTRY_ID' },          // Required: entry to load
  {
    seekFrom: 30,                    // Start playback at 30 seconds (clipping start)
    clipTo: 120,                     // End playback at 120 seconds (clipping end)
    startTime: 30                    // Alternative to seekFrom for setting start position
  }
);

Parameter	Type	Description
entryId	string	Kaltura entry ID to load
seekFrom	number	Clip start position in seconds
clipTo	number	Clip end position in seconds
startTime	number	Initial playback position in seconds