Skip to Content
Videoplayer (Embed)Player-API

Video-Embed-Player-API

Mit unserer JavaScript-API kannst du den Embed-Player abhören und steuern. Unser iFrame-Player ist mit dem player.js-API-Standard  von Embedly kompatibel.

1. Einrichtung

Binde zuerst die Bibliothek player.js in deine Seite ein:

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

Initialisiere als Nächstes den Player mit deinem 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
});

Warte immer auf das ready-Event, bevor du Player-Methoden aufrufst. Der Player reiht Nachrichten ein, bis ready ausgelöst wurde.

2. Events (Methoden)

Das sind die Methoden, die du am Player aufrufen kannst, um die Wiedergabe zu steuern:

Wiedergabe steuern

play() — Wiedergabe starten

player.play();

pause() — Wiedergabe pausieren

player.pause();

Lautstärke

mute() — Player stumm schalten

player.mute();

unmute() — Stummschaltung aufheben

player.unmute();

setVolume(volume) — Lautstärke setzen (0–100)

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

Springen

setCurrentTime(seconds) — Zu einer bestimmten Zeit springen

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

Status abfragen

getPaused(callback) — Prüfen, ob der Player pausiert ist

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

getMuted(callback) — Prüfen, ob der Player stumm ist

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

getVolume(callback) — Aktuelle Lautstärke abrufen (0–100)

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

getDuration(callback) — Videodauer in Sekunden abrufen

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

getCurrentTime(callback) — Aktuelle Wiedergabezeit abrufen

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

3. Listener (Events)

Das sind die Events, auf die du hören kannst, um Änderungen am Player-Status zu erkennen:

Basis-Events

ready — Wird ausgelöst, wenn der Player Befehle entgegennehmen kann

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

play — Wird ausgelöst, wenn die Wiedergabe startet

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

pause — Wird ausgelöst, wenn die Wiedergabe pausiert wird

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

ended — Wird ausgelöst, wenn die Wiedergabe endet

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

Fortschritt

timeupdate — Wird während der Wiedergabe mit aktueller Zeit und Dauer ausgelöst

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 — Wird beim Laden mit Puffer-Fortschritt ausgelöst

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

Fehlerbehandlung

error — Wird ausgelöst, wenn ein Fehler auftritt

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

Vollständiges Beispiel

Hier ein vollständiges Beispiel, wie du die Player-API einrichtest und nutzt:

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

Wenn du mehrere Player auf derselben Seite mit derselben src hast, kann es zu Inkonsistenzen kommen. Hänge deshalb an die src jedes iframes eine eindeutige Kennung (UUID oder Zeitstempel) an.

EinrichtungAuthentifizierung