Skip to Content
Lettore video (embed)API del lettore

API del player video incorporato

Puoi usare la nostra API JavaScript per ascoltare e controllare il player incorporato. Il nostro player iframe è compatibile con lo standard API player.js  di Embedly.

1. Configurazione iniziale

Per prima cosa includi la libreria player.js nella pagina:

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

Poi inizializza il player con il tuo 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
});

Attendi sempre l’evento ready prima di chiamare i metodi del player. Il player metterà in coda i messaggi finché non viene emesso ready.

2. Metodi

Questi sono i metodi che puoi chiamare sul player per controllare la riproduzione:

Controllo della riproduzione

play() - Avvia la riproduzione

player.play();

pause() - Mette in pausa la riproduzione

player.pause();

Controllo del volume

mute() - Disattiva l’audio del player

player.mute();

unmute() - Riattiva l’audio del player

player.unmute();

setVolume(volume) - Imposta il volume (0-100)

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

Posizionamento nella timeline

setCurrentTime(seconds) - Salta a un istante specifico

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

Lettura dello stato

getPaused(callback) - Verifica se il player è in pausa

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

getMuted(callback) - Verifica se l’audio è disattivato

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

getVolume(callback) - Ottiene il volume corrente (0-100)

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

getDuration(callback) - Ottiene la durata del video in secondi

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

getCurrentTime(callback) - Ottiene il tempo di riproduzione corrente

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

3. Eventi (listener)

Questi sono gli eventi a cui puoi sottoscriverti per i cambiamenti di stato del player:

Eventi di base

ready - Emesso quando il player è pronto a ricevere comandi

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

play - Emesso quando inizia la riproduzione

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

pause - Emesso quando la riproduzione va in pausa

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

ended - Emesso al termine della riproduzione

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

Eventi di avanzamento

timeupdate - Emesso durante la riproduzione con tempo corrente e durata

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 - Emesso durante il caricamento con dati sull’avanzamento del buffer

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

Gestione degli errori

error - Emesso in caso di errore

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

Esempio completo

Ecco un esempio completo che mostra come configurare e usare l’API del player:

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

Se hai più player nella stessa pagina con lo stesso src, puoi incontrare comportamenti incoerenti. Per evitarlo, aggiungi un identificatore univoco (UUID o timestamp) al src di ogni iframe.

ConfigurazioneAutenticazione