Using the Player

This page walks through the things you'll do most often. It assumes the player is already on your page – if it isn't, start with Getting Started.

Set up the player your way

Everything is configured when you create the player. A fuller example:

const player = new JetstreamPlayer('#player', {
  mediaId: 'jsv:xxxxxxxxxx',
  playerId: 'jsp:xxxxxxxx',
  width: '640px',
  height: '360px',
  sticky: true,
});

• mediaId – what to play. The only required option.
• playerId – which player preset to use. Omit it to use the media's default.
• width / height – the size of the player on your page.
• sticky – keeps the player visible in a corner when the reader scrolls past it.

The full list is in Player Options.

Working against a staging environment?

Point the player at it with embedOrigin:

const player = new JetstreamPlayer('#player', {
  mediaId: 'jsv:xxxxxxxxxx',
  embedOrigin: 'https://embed-stage.jetstream.studio',
});

Control playback

player.play();
player.pause();
player.seekTo(30); // jump to 0:30
player.mute();
player.unmute();

One thing to know: browsers don't allow sound to start on its own. A play() call with sound on only works after the visitor has interacted with the page – muted playback works right away. More on this in Player Methods.

Ask the player questions

Some answers come from the player itself, so these calls return Promises – await them:

const paused = await player.isPaused();
const muted = await player.isMuted();
const seconds = await player.getCurrentTime();
const total = await player.getDuration();

Move through a playlist

If the player is showing a playlist, you can switch tracks:

player.playNext();
player.playPrev();

For a single video or audio these calls simply do nothing.

React to events

There are two ways to listen to the player, and you can mix them freely.

Pass handlers when you create it:

const player = new JetstreamPlayer('#player', {
  mediaId: 'jsv:xxxxxxxxxx',
  events: {
    play: () => console.log('playing'),
    pause: () => console.log('paused'),
  },
});

Or subscribe later with on() – it returns a function that unsubscribes:

const off = player.on('timeupdate', (seconds) => {
  console.log('current time', seconds);
});

// stop listening
off();

You can also unsubscribe by name with off():

const onEnded = () => console.log('finished');

player.on('ended', onEnded);
player.off('ended', onEnded); // remove this handler
player.off('ended'); // or remove every 'ended' handler

When you're done

If your page removes the player – say, the visitor navigates away in a single-page app – let it clean up after itself:

player.dispose();