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.