Components

PRESTOplay for web uses a modular component system: import only the components your application needs to keep the JavaScript bundle small and load times fast.

Each component module registers itself when imported. See Getting started for a minimal example.

Common components

Component	Import	Use
MSE	@castlabs/prestoplay/cl.mse	Media Source Extensions (MSE) based playback. Required by DASH, MSE-based HLS, Smooth Streaming, and several text workflows.
DASH	@castlabs/prestoplay/cl.dash	MPEG-DASH playback.
HLS	@castlabs/prestoplay/cl.hls	HTTP Live Streaming (HLS) playback. Use with cl.mse for MSE-based HLS.
Smooth Streaming	@castlabs/prestoplay/cl.smooth	Smooth Streaming playback.
VTT	@castlabs/prestoplay/cl.vtt	WebVTT and SRT subtitles.
TTML	@castlabs/prestoplay/cl.ttml	TTML, SMPTE-TT, and IMSC1 subtitles.
HTML Cue	@castlabs/prestoplay/cl.htmlcue	HTML subtitle rendering.
Crypto	@castlabs/prestoplay/cl.crypto	AES-128 HLS decryption outside native Safari playback.
Persistent licenses	@castlabs/prestoplay/cl.persistent	Persistent DRM licenses.
Cast	@castlabs/prestoplay/cl.cast	Chromecast sender and receiver support.
Tizen	@castlabs/prestoplay/cl.tizen	Native AVPlay playback on older Tizen TVs.

Plugin and integration components are documented with their features. See Advertising, Analytics, AirPlay, and Playlist.

DASH

Use cl.mse and cl.dash for DASH playback:

import { clpp } from "@castlabs/prestoplay";
import "@castlabs/prestoplay/cl.mse";
import "@castlabs/prestoplay/cl.dash";

const player = new clpp.Player(...);

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

HLS through MSE

Use cl.mse and cl.hls for MSE-based HLS playback. To support MPEG transport stream (MPEG-TS) streams, install mux.js and expose it on window.muxjs.

npm install mux.js@6.3.0

import { clpp } from "@castlabs/prestoplay";
import "@castlabs/prestoplay/cl.mse";
import "@castlabs/prestoplay/cl.hls";
import * as muxjs from "mux.js";
window.muxjs = muxjs;

const player = new clpp.Player(...);

player.open({
  source: 'https://provider.com/content/master.m3u8',
  type: clpp.Type.HLS,
});

Safari uses native HLS playback by default. See Safari for details.

Smooth Streaming

Use cl.mse and cl.smooth for Smooth Streaming playback:

import { clpp } from "@castlabs/prestoplay";
import "@castlabs/prestoplay/cl.mse";
import "@castlabs/prestoplay/cl.smooth";

const player = new clpp.Player(...);

player.open({
  source: 'https://provider.com/content/Manifest',
  type: clpp.Type.SMOOTH_STREAMING,
});

AES-128 HLS

Use cl.crypto when the player needs to decrypt Advanced Encryption Standard (AES)-128 HLS content.

import { clpp } from "@castlabs/prestoplay";
import "@castlabs/prestoplay/cl.mse";
import "@castlabs/prestoplay/cl.hls";
import "@castlabs/prestoplay/cl.crypto";

const player = new clpp.Player(...);

player.open({
  source: 'https://provider.com/content/master_aes_128.m3u8',
  type: clpp.Type.HLS,
});

Next topic: License

Previous topic: Without a bundler