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:

<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>

.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.load call. Here are the options you’ll reach for first.

Loading content

Pass a source URL string:

player.load('https://example.com/manifest.mpd');

Or a source object, with fallback URLs the player tries in order:

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

Stream type detection

The player detects the stream type from the manifest file extension. If your URL doesn’t have a standard extension, set the type explicitly:

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

Supported types: clpp.Type.DASH, clpp.Type.HLS, clpp.Type.SMOOTH_STREAMING, clpp.Type.MP4.

Start time, volume, and muted state

player.load({
  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.

Language preferences

Set the initial audio and text tracks by language. Setting preferredTextLanguage also enables subtitles for the session:

player.load({
  source: 'https://example.com/manifest.mpd',
  preferredAudioLanguage: 'en',
  preferredTextLanguage: 'fr',
});

Next topic: Thumbnails

Previous topic: Getting started