How to Use?

To utilize the JetstreamPlayer class effectively within your web application, follow these steps:

1. Install the package

Install it from npm and import the JetstreamPlayer class (see Getting Started):

npm i @hopecloud/jetstream-player

2. Instantiate the JetstreamPlayer

To create a new instance of the JetstreamPlayer, use the constructor provided by the class. Pass in the necessary parameters:

const player = new JetstreamPlayer('#video-container', {
  mediaId: 'jsv:xxxxxxxxxx',
  playerId: 'jsp:xxxxxxxx',
  width: '640px',
  height: '360px',
  sticky: true,
  events: {
    play: () => {
      console.log('Video played');
    },
    pause: () => {
      console.log('Video paused');
    },
    // Add more event listeners as needed
  },
});

mediaId is the only required option. playerId is optional — omit it to use the media's default player:

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

Targeting dev / staging

To skip the production redirect (e.g. for staging or development), point the player at the embed host directly with origin:

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

3. Interacting with the Player

Once the player is instantiated, you can interact with it using the provided methods:

• play(): Initiates playback of the video.
• pause(): Pauses the currently playing video.
• mute(): Mutes the audio of the video.
• unmute(): Unmutes the audio of the video.
• seekTo(seconds: number): Seeks the video to the specified time in seconds.
• playNext(): Plays the next video in a playlist, if available.
• playPrev(): Plays the previous video in a playlist, if available.
• isMuted(): Returns a Promise that resolves with a boolean indicating whether the video is muted.
• isPaused(): Returns a Promise that resolves with a boolean indicating whether the video is paused.
• getVideoCurrentTime(): Returns a Promise that resolves with the current playback time of the video in seconds.
• getDuration(): Returns a Promise that resolves with the total duration of the video in seconds.
• on(event, handler): Subscribes to a player event after construction; returns an unsubscribe function.
• off(event, handler?): Removes a listener (or all listeners for the event when handler is omitted).
• dispose(): Disposes of the player instance and removes event listeners.

// Example usage
player.play();
player.seekTo(30);
player.pause();

4. Handling Events

You can register event listeners to respond to various player events, such as when the video starts playing or when it pauses. These event listeners can be specified during initialization in the events option.

const player = new JetstreamPlayer('#video-container', {
  mediaId: 'jsv:xxxxxxxxxx',
  playerId: 'jsp:xxxxxxxx',
  width: '640px',
  height: '360px',
  events: {
    play: () => {
      console.log('Video played');
    },
    pause: () => {
      console.log('Video paused');
    },
    // Add more event listeners as needed
  },
});

You can also subscribe (and unsubscribe) after the player is created with on() and off(). on() returns an unsubscribe function, and multiple listeners can be attached to the same event:

// Subscribe later — on() returns an unsubscribe function
const off = player.on('timeupdate', (seconds) => {
  console.log('current time', seconds);
});

// Stop listening with the returned function...
off();

// ...or by name
const onEnded = () => console.log('finished');
player.on('ended', onEnded);
player.off('ended', onEnded); // remove this handler
player.off('ended'); // or remove every 'ended' handler

5. Cleanup

Remember to dispose of the player instance when it is no longer needed to free up resources and remove event listeners.

player.dispose();

By following these steps, you can seamlessly integrate the JetstreamPlayer into your web application and provide users with an intuitive video playback experience.