Skip to Content
Lecteur vidéo (embed)API du lecteur

API lecteur vidéo intégré

Tu peux utiliser notre API JavaScript pour écouter et contrôler le lecteur intégré. Notre lecteur iframe est compatible avec la norme API player.js  d’Embedly.

1. Mise en place

D’abord, inclus la bibliothèque player.js dans ta page :

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

Ensuite, initialise le lecteur avec ton 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
});

Attends toujours l’événement ready avant d’appeler les méthodes du lecteur. Le lecteur met les messages en file d’attente jusqu’à l’émission de ready.

2. Méthodes

Voici les méthodes que tu peux appeler sur le lecteur pour contrôler la lecture :

Contrôle de la lecture

play() — Démarre la lecture

player.play();

pause() — Met la lecture en pause

player.pause();

Contrôle du volume

mute() — Coupe le son du lecteur

player.mute();

unmute() — Rétablit le son du lecteur

player.unmute();

setVolume(volume) — Règle le volume (0-100)

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

Repositionnement

setCurrentTime(seconds) — Va à un instant précis

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

Consultation de l’état

getPaused(callback) — Indique si le lecteur est en pause

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

getMuted(callback) — Indique si le lecteur est muet

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

getVolume(callback) — Obtient le volume actuel (0-100)

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

getDuration(callback) — Obtient la durée de la vidéo en secondes

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

getCurrentTime(callback) — Obtient la position de lecture actuelle

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

3. Événements

Voici les événements auxquels tu peux t’abonner pour suivre les changements d’état du lecteur :

Événements de base

ready — Émis lorsque le lecteur est prêt à recevoir des commandes

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

play — Émis au démarrage de la lecture

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

pause — Émis lors d’une mise en pause

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

ended — Émis à la fin de la lecture

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

Événements de progression

timeupdate — Émis pendant la lecture avec la position et la durée

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 — Émis pendant le chargement avec la progression du tampon

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

Gestion des erreurs

error — Émis en cas d’erreur

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

Exemple complet

Voici un exemple complet montrant comment configurer et utiliser l’API du lecteur :

// 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 tu as plusieurs lecteurs sur la même page avec la même valeur src, tu peux observer des incohérences. Pour éviter cela, ajoute un identifiant unique (UUID ou horodatage) au src de chaque iframe.

InstallationAuthentification