Getting Started

Adding the Jetstream Player to your page takes two steps: install the package, then create a player.

1. Install the package

npm i @hopecloud/jetstream-player

Then import it where you need it:

import { JetstreamPlayer } from '@hopecloud/jetstream-player';

2. Create a player

Give the player a place on your page – any element with an id:

<div id="player"></div>

Then create the player and tell it what to play:

const player = new JetstreamPlayer('#player', { mediaId: 'jsv:xxxxxxxxxx' });

mediaId is the id of the media in Jetstream – a video, an audio, or a whole playlist. The player appears inside your element – no other markup needed.

Create the player after the element exists

The element must already be on the page when you call new JetstreamPlayer(...). If you're using a framework like Vue or React, create the player once the component is mounted.

Want several players on one page? Give each one its own element:

const player1 = new JetstreamPlayer('#player1', { mediaId: 'jsv:xxxxxxxxxx' });
const player2 = new JetstreamPlayer('#player2', { mediaId: 'jsv:yyyyyyyyyy' });

Take it from there

The player you created is your remote control. You can call its methods and listen to what's happening:

const player = new JetstreamPlayer('#player', {
  mediaId: 'jsv:xxxxxxxxxx',
  events: {
    ready: () => {
      console.log('the player is ready');
    },
  },
});

player.mute();

Using the Player walks through the everyday tasks, and the full lists live in Player Options and Player Methods.

TypeScript

The SDK is written in TypeScript and ships with its own type declarations – autocomplete and type checking work out of the box, nothing extra to set up.