Controls and events

Prerequisites

Integration and setup

The object returned by window.pnplayer() is your handle on the player. This page calls it player.

const player = window.pnplayer("pn-player", { sources: [/* ... */] });

Control methods

Commands you send before the player is ready are queued and run as soon as the first video can play, so you can call player.play() straight after creating the instance.

function

Start or resume playback

function

Pause playback

function

Jump to a position in the current video. time is in seconds.

function

Enter fullscreen. Viewers leave fullscreen with the player controls or the Escape key.

function

Switch to another entry from your sources array without reloading the player. Pass the source object itself, for example player.switchVideo(options.sources[1]). Fires playlistItem.

property

The underlying media player instance for advanced use. null until the ready event fires.

function

Remove all event listeners and unmount the player from the page

Events

Attach and remove listeners with player.on(event, callback) and player.off(event, callback). Pass the same function reference to off that you passed to on.

string

Show possible events

{}

The first video can play. player.current is available from this point.

{}

Playback started or resumed

{}

Playback paused

{ currentTime: number, duration: number }

Fired continuously during playback with the current position and total duration in seconds

{ position: number }

The viewer or your code finished seeking to a new position in seconds

{ state: { fullscreen: boolean } }

The player entered or left fullscreen

TextTrack | null

The selected caption track changed. The payload is the track now showing, with label, language, kind and src, or null when captions were turned off.

Source

A new video started. The payload is the matching entry from your sources array. Fires for the first video on load in playlist mode and whenever the video changes.

{ active: boolean }

A Chromecast session started (true) or ended (false)

{}

The viewer opened the AirPlay picker

function

Called with the event payload each time the event fires

Example

const player = window.pnplayer("pn-player", options);

player.on("ready", () => {
  console.log("player is ready");
});

function onTime({ currentTime, duration }) {
  console.log(`${Math.floor(currentTime)}s of ${Math.floor(duration)}s`);
}
player.on("time", onTime);

player.on("playlistItem", (source) => {
  document.title = source.title;
});

player.on("captionsChanged", (track) => {
  console.log(track ? `captions: ${track.label}` : "captions off");
});

// Later
player.off("time", onTime);
player.destroy();

Getting started

Features

Player

Guides

Analytics

Controls and events

Prerequisites

Control methods

Events

Example

​Prerequisites

​Control methods

​Events

​Example

Prerequisites

Control methods

Events

Example