Skip to main content
Beta — @videojs/spf is close to stable. Experimental adoption in real projects is welcome.
@videojs/spf is the Stream Processing Framework powering adaptive bitrate (ABR) playback in Video.js 10. It provides a unified interface that abstracts hls.js and dash.js behind a common playback engine API, so the rest of the stack does not need to handle streaming library specifics. This package is used internally by @videojs/core. You do not need to install it directly unless you are building a custom integration.

​
Installation

npm install @videojs/spf

​
Exports

Entry pointDescription
.Core SPF — runtime-agnostic stream processing logic
./domDOM-specific SPF — attaches the playback engine to a media element
./playback-enginePlayback engine abstraction — unified interface over hls.js and dash.js

​
Architecture

SPF separates stream processing into two layers: 
@videojs/spf          — runtime-agnostic stream logic
@videojs/spf/dom      — DOM attachment, event wiring, media element lifecycle
@videojs/spf/playback-engine  — adapts hls.js / dash.js to a common interface
This separation keeps the core logic testable without a browser, while the DOM layer handles the specifics of attaching to a <video> or <audio> element.

​
Usage

In most cases you will use SPF indirectly through @videojs/core. For custom integrations, the playback engine abstraction provides a stable API: 
import { createPlaybackEngine } from '@videojs/spf/playback-engine';

const engine = createPlaybackEngine({
  media: document.querySelector('video'),
});

// Load a source — engine selects hls.js or dash.js automatically
await engine.load('https://example.com/stream.m3u8');

// The engine fires standard media events on the attached element

​
DOM attachment

import { attachSpf } from '@videojs/spf/dom';

const detach = attachSpf({
  media: document.querySelector('video'),
  src: 'https://example.com/stream.mpd',
});

// Clean up when done
detach();

​
Bundle size

SPF ships a bundle size measurement script. Run from the monorepo root: 
# Measure public API (minified + gzipped)
pnpm -F @videojs/spf size

# Measure all exports (minified + gzipped)
pnpm -F @videojs/spf size:all

​
Dependencies

PackageRole
@videojs/utilsShared utility functions
SPF does not bundle hls.js or dash.js directly — those are provided by @videojs/core as dependencies so they are deduplicated across the stack.

@videojs/core

Core package that consumes SPF for stream handling.

@videojs/utils

Shared utilities used by SPF.

@videojs/html

HTML player that uses SPF via core.

@videojs/react

React player that uses SPF via core.

Build docs developers (and LLMs) love

Get started for freeTalk to us