Player basics

Once your player is up and running, most integrations need two more things: a simple playback UI and a few basic playback options. This page walks through both.

Simple UI example

Here’s a minimal UI: a container around the video element, a poster image shown before playback starts, and a big play button.

Wrap the video element in a container with a relative position, and pass both elements to the player constructor:

<div class="ui-container">
  <div class="ui-poster" style="background-image: url('poster.jpg');"></div>
  <img class="ui-play-btn" src="play.png" />
  <video id="video" crossorigin="anonymous"></video>
</div>

const videoEl = document.getElementById('video');
const containerEl = document.querySelector('.ui-container');
const player = new clpp.Player(videoEl, {/* config */}, { containerEl });

.ui-container {
  position: relative;
  width: 640px;
}

.ui-poster {
  position: absolute;
  inset: 0;
  z-index: 2;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.ui-play-btn {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  cursor: pointer;
}

.ui-container.ui-started .ui-poster,
.ui-container.ui-started .ui-play-btn {
  display: none;
}

Add the ui-started class when playback begins, and start playback when the play button is clicked:

player.on('playing', () => {
  document.querySelector('.ui-container').classList.add('ui-started');
});

document.querySelector('.ui-play-btn').addEventListener('click', () => {
  player.play();
});

Playback and basic configuration

The player accepts a PlayerConfiguration object in its constructor, and a source in the Player.open call. Here are the options you’ll reach for first.

Loading content

Pass a configuration object with a source property:

player.open({
  source: 'https://example.com/manifest.mpd',
});

source also accepts an array of URLs. The player tries them in order and plays the first one it can play on the current platform:

player.open({
  source: [
    'https://example.com/manifest1.mpd',
    'https://example.com/manifest2.mpd',
    'https://example.com/master.m3u8',
  ],
});

Supported formats

Supported types are clpp.Type.DASH, clpp.Type.HLS, clpp.Type.SMOOTH_STREAMING, and clpp.Type.MP4. If the format can’t be deduced from the file extension, specify it explicitly as type:

player.open({
  source: 'https://example.com/manifest.foo',
  type: clpp.Type.DASH,
});

Start time, volume, and muted state

player.open({
  source: 'https://example.com/manifest.mpd',
  startTime: 300, // start 5 minutes in, VOD only
  volume: 0.5,
  autoplay: true,
  muted: true,
});

For live content, the player starts at the live edge by default.

See Tracks and languages for setting the initial audio and text language.

React integration

Building your app with React? The React integration sample wraps PRESTOplay in a function component, from creating and destroying the player to a seek bar that also works with live content.

The React integration sample covers:

• Creating the player on mount and destroying it on unmount

• Loading content when a prop changes

• A play/pause button driven by clpp.events.STATE_CHANGED

• Fullscreen on the component’s container element

• A seek bar based on Player.getSeekRange, which also supports live content

Next topic: Player configuration

Previous topic: License