How Do I Integrate It?
Dacast Player JS API integration documentation
Dacast JavaScript API
Overview
The Dacast Player exposes a global window.dacast object. Use the dacast() function to initialize a player, then control it via the player instance or postMessage (for iframe embeds).
JS file: https://prod-player.dacast.com/js/player.js
1. Initialization
const player = dacast(contentId, containerId [, options]);| Parameter | Type | Required | Description |
|---|---|---|---|
contentId | string | Yes | The Dacast content ID |
containerId | string | Yes | ID of the HTML element to mount into |
options | PlayerOptions | No | Optional configuration (see below) |
PlayerOptions
| Field | Type | Description |
|---|---|---|
width | string | CSS width of the player (e.g. "640px") |
height | string | CSS height of the player (e.g. "360px") |
signedKey | string | Signed key for protected content |
startTime | number | Offset start time in seconds |
GACode | string | Google Analytics code — format: G-XXXX |
Example:
<div id="my-player"></div>
<script>
const player = dacast("abc123", "my-player", {
width: "640px",
height: "360px"
});
</script>2. Player Instance API
After initialization, the player is also accessible globally:
const player = window.dacast.players["your-content-id"];Note: The player object is available immediately, but methods are no-ops until the player is ready. Use
onReady()to safely call methods after initialization.
Methods
| Method | Signature | Description |
|---|---|---|
play | () => void | Starts playback |
pause | () => void | Pauses playback |
seekTo | (time: number) => void | Seeks to a position in seconds |
mute | () => void | Mutes the player |
muteOn | () => void | Mutes the player |
muteOff | () => void | Unmutes the player |
muteToggle | () => void | Toggles mute based on current state |
setVolume | (time: number) => void | Set volume - 0 (min) to 1 (max) |
getVolume | () => number | Get current volume - 0 (min) to 1 (max) |
getVolume | (callback: (time: number) => void) => void | Send the current volume to the callback - 0 (min) to 1 (max) |
currentTime | () => number | Returns current playback position in seconds |
currentTime | (callback: (time: number) => void) => void | Sends the current playback position in seconds to the callback |
getTime | () => number | Same as currentTime |
getTime | (callback: (time: number) => void) => void | Same as currentTimee |
getTotalTime | () => number | Returns total time in seconds |
getTotalTime | (callback: (time: number) => void) => void | Sends the total time in seconds to the callback |
onReady | (callback: () => void) => void | Fires callback when player is ready |
loadVideo | (contentId: string) => void | Loads new content by ID |
getContentInfo | () => ContentInfo | Returns metadata about current content |
getActiveMedia | () => ContentInfo | Alias for getContentInfo |
getElement | () => HTMLElement | Returns the player 's DOM container |
dispose | () => void | Unloads the player |
fullscreen | (boolean) => void | Set/unset fullscreen mode |
fullscreen | () => boolean | Return true if fullscree is ON, false otherwise |
activeViewers | () => number | Current viewer count (live only if count is enabled in theme) |
getPlaylistSize | () => number | Only available with Playlist - Return to Playlist length or 0 |
next | (position?: number) => void | Only available with Playlist - Load next content or the content at postion (zero based) |
prev | (position?: number) => void | Only available with Playlist - Load previous content or the content at postion (zero based) |
ContentInfo Object
{
contentId: string
title: string
description: string
splashscreenUrl: string
thumbnailUrl: string
}Example:
const player = dacast("abc123", "my-player");
player.onReady(() => {
player.seekTo(30);
const info = player.getContentInfo();
console.log(info.title, info.description);
player.dispose();
});3. Player Events
Subscribe with player.on('event_name', callback) or player.onEventName(callback) — both return a Subscriber.
Unsubscribe with player.off('event_name', callback) or subscriber.unsubscribe().
interface Subscriber {
unsubscribe: () => void
}Event Methods
| Method | Signature | Description | Event name |
|---|---|---|---|
onReady | (callback: () => void) => Subscriber | Listen for Ready event | ready |
onPlay | (callback: () => void) => Subscriber | Listen for Play event | play |
onPause | (callback: () => void) => Subscriber | Listen for Pause event | pause |
onComplete | (callback: () => void) => Subscriber | Fires at end of current media | complete |
onFullScreenEnter | (callback: () => void) => Subscriber | Fires when player enters fullscreen | fullscreen_enter |
onFullScreenExit | (callback: () => void) => Subscriber | Fires when player exits fullscreen | fullscreen_exit |
onActiveViewersChange | (callback: (count: number) => void) => Subscriber | Live only - fires when active viewer count changes | activeviewers_change |
onError | (callback: (error) => void) => Subscriber | Listen for playback errors | error |
onPlayerAdError | (callback: (error) => void) => Subscriber | Listen for ad errors | ad_error |
onVolumeChange | (callback: (volume: number) => void) => Subscriber | 0 (min) to 1 (max) | volume_change |
onProgress | (callback: (progress: number) => void) => Subscriber | Progress is a percentage. The event is triggered every 10%: 10, 20, ..., 100 | progress |
onDispose | (callback: () => void) => Subscriber | Fires when the player is destroyed/disposed | dispose |
on | (eventName: string, callback: func) => Subscriber | Listen to any event by name | N/A |
off | (eventName: string, callback: func) => void | Detach a callback from an event | N/A |
