Skip to Content
Odtwarzacz wideo (embed)API odtwarzacza

API osadzonego playera wideo

Możesz użyć naszego API JavaScript, żeby nasłuchiwać zdarzeń i sterować playerem osadzonym. Player w iframe jest zgodny ze standardem player.js API  od Embedly.

1. Konfiguracja

Najpierw dołącz bibliotekę player.js na stronie:

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

Potem zainicjuj player z twoim 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
});

Zawsze czekaj na zdarzenie ready, zanim wywołasz metody playera. Player kolejkuje wiadomości do momentu wywołania ready.

2. Zdarzenia (metody)

To metody, które możesz wywołać na playerze, żeby sterować odtwarzaniem:

Sterowanie odtwarzaniem

play() — start odtwarzania

player.play();

pause() — wstrzymanie

player.pause();

Głośność

mute() — wyciszenie

player.mute();

unmute() — wyłączenie wyciszenia

player.unmute();

setVolume(volume) — ustawienie głośności (0–100)

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

Przewijanie

setCurrentTime(seconds) — skok do wybranego czasu

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

Zapytania o stan

getPaused(callback) — czy player jest wstrzymany

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

getMuted(callback) — czy player jest wyciszony

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

getVolume(callback) — aktualna głośność (0–100)

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

getDuration(callback) — długość wideo w sekundach

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

getCurrentTime(callback) — aktualny czas odtwarzania

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

3. Nasłuchiwanie (zdarzenia)

To zdarzenia, na które możesz nasłuchiwać przy zmianach stanu playera:

Podstawowe zdarzenia

ready — gdy player jest gotowy na komendy

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

play — gdy zaczyna się odtwarzanie

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

pause — gdy odtwarzanie jest wstrzymane

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

ended — gdy odtwarzanie się kończy

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

Zdarzenia postępu

timeupdate — podczas odtwarzania z aktualnym czasem i długością

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 — podczas ładowania z postępem buforowania

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

Obsługa błędów

error — gdy wystąpi błąd

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

Pełny przykład

Kompletny przykład konfiguracji i użycia API playera:

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

Jeśli na jednej stronie masz kilka playerów z tym samym src, mogą pojawić się niespójności. Żeby tego uniknąć, dopisz unikalny identyfikator (UUID lub znacznik czasu) do src każdego iframe.

KonfiguracjaUwierzytelnianie