Video Embed Player API

You can use our JavaScript API to listen to and control the embed player. Our iframe player is compatible with the player.js API standard (opens in a new tab) by Embedly.

1. Setup

First, include the player.js library in your page:

<script type="text/javascript" src="//cdn.embed.ly/player-0.1.0.min.js"></script>

Next, initialize the player with your iframe:

// Get reference to your iframe element
const iframe = document.getElementById('your-iframe-id');
 
// Create player instance
const player = new playerjs.Player(iframe);
 
// Wait for player to be ready before interacting
player.on('ready', () => {
  console.log('Player is ready!');
  // Now you can safely use player methods
});

Always wait for the ready event before calling player methods. The player will queue messages until ready is fired.

2. Events (Methods)

These are the methods you can call on the player to control playback:

Playback Control

play() - Start playback

player.play();

pause() - Pause playback

player.pause();

Volume Control

mute() - Mute the player

player.mute();

unmute() - Unmute the player

player.unmute();

setVolume(volume) - Set volume (0-100)

player.setVolume(50); // Set to 50%

Seeking

setCurrentTime(seconds) - Seek to specific time

player.setCurrentTime(30); // Seek to 30 seconds

State Queries

getPaused(callback) - Check if player is paused

player.getPaused((paused) => {
  console.log('Player is paused:', paused);
});

getMuted(callback) - Check if player is muted

player.getMuted((muted) => {
  console.log('Player is muted:', muted);
});

getVolume(callback) - Get current volume (0-100)

player.getVolume((volume) => {
  console.log('Current volume:', volume);
});

getDuration(callback) - Get video duration in seconds

player.getDuration((duration) => {
  console.log('Video duration:', duration, 'seconds');
});

getCurrentTime(callback) - Get current playback time

player.getCurrentTime((time) => {
  console.log('Current time:', time, 'seconds');
});

3. Listeners (Events)

These are the events you can listen to for player state changes:

Basic Events

ready - Fired when the player is ready to receive commands

player.on('ready', () => {
  console.log('Player is ready for interaction');
});

play - Fired when playback starts

player.on('play', () => {
  console.log('Playback started');
});

pause - Fired when playback is paused

player.on('pause', () => {
  console.log('Playback paused');
});

ended - Fired when playback ends

player.on('ended', () => {
  console.log('Playback finished');
});

Progress Events

timeupdate - Fired during playback with current time/duration data

player.on('timeupdate', (data) => {
  console.log('Current time:', data.seconds);
  console.log('Duration:', data.duration);
  
  // Calculate progress percentage
  const progress = (data.seconds / data.duration) * 100;
  console.log('Progress:', progress + '%');
});

progress - Fired during loading with buffering progress data

player.on('progress', (data) => {
  console.log('Buffering progress:', data.percent * 100 + '%');
});

Error Handling

error - Fired when an error occurs

player.on('error', (error) => {
  console.error('Player error:', error);
});

Complete Example

Here's a complete example showing how to set up and use the player API:

// Initialize player
const iframe = document.getElementById('video-player');
const player = new playerjs.Player(iframe);
 
// Set up event listeners
player.on('ready', () => {
  console.log('Player ready!');
  
  // Get initial state
  player.getDuration((duration) => {
    console.log('Video duration:', duration);
  });
  
  player.getVolume((volume) => {
    console.log('Current volume:', volume);
  });
});
 
player.on('play', () => {
  console.log('Started playing');
});
 
player.on('pause', () => {
  console.log('Paused');
});
 
player.on('timeupdate', (data) => {
  // Update progress bar
  const progress = (data.seconds / data.duration) * 100;
  document.getElementById('progress-bar').style.width = progress + '%';
});
 
player.on('ended', () => {
  console.log('Video finished');
});
 
player.on('error', (error) => {
  console.error('Error:', error);
});
 
// Example control functions
function playVideo() {
  player.play();
}
 
function pauseVideo() {
  player.pause();
}
 
function setVolume(volume) {
  player.setVolume(volume);
}
 
function seekTo(seconds) {
  player.setCurrentTime(seconds);
}

⚠️

If you have multiple players on the same page with the same src, you may run into inconsistencies. To avoid this, append a unique identifier (UUID or timestamp) to each iframe's src.

Setup Authentication