Skip to main content
Your SDK Description - Documentation

JavaScript SDK Docs JavaScript SDK Docs


Media player class. Use this for instantiating a player, attaching it to the DOM, and managing playback.


new MediaPlayer(containerId) → {MediaPlayer}

Constructs a new MediaPlayer instance.

  • containerId ( string )

    The id of the DOM container element for the player.

const player = new MediaPlayer('video-container');
player.playMediaUnits([ new MediaUnit(videoUrl) ]);


advertisingIdentifier :string

A unique advertising-related identifier to assign to the player. This will replace the "%PPID%" VAST macro in tracking URLs defined in VAST tags.

Default Value:
  • ''

controllerRegistry :ControllerRegistry

Controller registry. Use this to register custom overlays with the player.

player.controllerRegistry.registerOverlayController(CustomOverlayController, 'customc');

currentUnit :MediaUnit|MediaEvent

Current media unit or event being rendered.

hlsHeaders :Object

Additional HTTP headers to attach to HLS media requests.

player.hlsHeaders = {
   'X-USES-VEEPLAY': 'true',
   'X-TEST-HEADER': 'value',

(readonly) id :string

A unique identifier assigned by the system.

mediaUnits :Array.<(MediaUnit|MediaEvent)>

Current upcoming playlist of media units or events to render.

preferGoogleIma :boolean

Use Google's IMA SDK instead of the internal VAST support. Include the official IMA JS library when setting this to true.

Default Value:
  • false



Dynamically insert an array of MediaEvent objects into the current unit



Dynamically insert an array of overlays into the current unit.



Return the list of AudioTrack objects associated with the current video.

.currentPlaybackTime() → {number}

Return the current playback position.

.duration() → {number}

Retrieve the duration of the currently playing stream.


Switch to fullscreen mode.


Switch to inline mode.

.getEventTracker() → {EventTracker}

Get an event tracker manager object. Use this to subscribe to player notifications.

const tracker = player.getEventTracker();
tracker.emitter.on(NOTIFICATIONS.UNIT_FINISHED, ({ reason, unit }) => {
   console.log(`Unit ${unit.url} finished with reason ${reason}`);
   if (reason === FINISH_REASON.USER_EXITED) {
     console.log('User exited');

.getMute() → {boolean}

Is the player is currently muted.

.getVolume() → {number}

Retrieve the current player volume.


Hide the player loading animation.


Append an array of MediaUnit or MediaEvent objects to the player playlist. Objects will be inserted right after the currently running unit.



Pauses playback due to an external error.

.isStreamingLive() → {boolean}

Return a boolean value stating if the current stream is VOD or Livestream.


Proceed to the next unit in the playlist without signaling a skip.


Pause playback.


Resume playback.

.playableDuration() → {number}

Retrieve the currently buffered duration.

.playbackState() → {PLAYBACK_STATE}

Returns the current playback state of the underlying video renderer.

if (player.playbackState() === PLAYBACK_STATE.PLAYING) { console.log('Player is playing'); }


Render a playlist of MediaUnit or MediaEvent objects.



Unload current unit and load the previous unit in the playlist.


Update the player position to a desired time.

  • playbackTime ( number )

    The desired position in seconds.


Replace a unit URL mid-playback. Instructs the player to immediately load and play the new media URL. This is useful when writing a UnitManager that needs to modify or customize a media URL.

  • url ( String )


Overwrites the current playlist.



Mute or unmute the player.

  • bool ( bool )


Update the player volume.

  • volume ( float )

    A float number between 0 (muted) and 1 (maximum volume).


Display a loading animation on top of the player.


Skip to the next element in the playlist.


Unload the current unit and stop processing the playlist. Will signal that the user exited playback before completion.


Toggle between fullscreen and inline mode.