Skip to Content
Reproductor de vídeo (embed)API del reproductor

API del reproductor de video incrustado

Puedes usar nuestra API de JavaScript para escuchar y controlar el reproductor incrustado. Nuestro reproductor iframe es compatible con el estándar de API player.js  de Embedly.

1. Configuración

Primero, incluye la biblioteca player.js en tu página:

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

A continuación, inicializa el reproductor con tu 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
});

Siempre espera al evento ready antes de llamar a métodos del reproductor. El reproductor pondrá en cola los mensajes hasta que se dispare ready.

2. Eventos (métodos)

Estos son los métodos que puedes llamar en el reproductor para controlar la reproducción:

Control de reproducción

play() - Iniciar reproducción

player.play();

pause() - Pausar reproducción

player.pause();

Control de volumen

mute() - Silenciar el reproductor

player.mute();

unmute() - Activar el sonido del reproductor

player.unmute();

setVolume(volume) - Establecer el volumen (0-100)

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

Búsqueda de posición

setCurrentTime(seconds) - Ir a un instante concreto

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

Consultas de estado

getPaused(callback) - Comprobar si el reproductor está en pausa

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

getMuted(callback) - Comprobar si el reproductor está silenciado

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

getVolume(callback) - Obtener el volumen actual (0-100)

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

getDuration(callback) - Obtener la duración del video en segundos

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

getCurrentTime(callback) - Obtener el tiempo de reproducción actual

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

3. Escuchas (eventos)

Estos son los eventos a los que puedes suscribirte para los cambios de estado del reproductor:

Eventos básicos

ready - Se dispara cuando el reproductor está listo para recibir comandos

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

play - Se dispara cuando comienza la reproducción

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

pause - Se dispara cuando se pausa la reproducción

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

ended - Se dispara cuando termina la reproducción

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

Eventos de progreso

timeupdate - Se dispara durante la reproducción con datos de tiempo actual y duración

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 - Se dispara durante la carga con datos del progreso del almacenamiento en búfer

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

Manejo de errores

error - Se dispara cuando ocurre un error

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

Ejemplo completo

Aquí tienes un ejemplo completo que muestra cómo configurar y usar la API del reproductor:

// 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);
}

Si tienes varios reproductores en la misma página con el mismo src, puedes encontrar inconsistencias. Para evitarlo, añade un identificador único (UUID o marca de tiempo) al src de cada iframe.

ConfiguraciónAutenticación