Mattebox

Open source · MIT

HLS and DASH.
Everything in the box.
Half the weight.

Mattebox is a player for the web: an engine, a player element, and the accessories around them. It plays what the paid players play, in 108 KB. That is 51% of the next smallest player.

Get startedOpen the demo

108 KBThe whole player, engine inside
83 KBThe engine with every stage
24 KBThe kernel alone
0Runtime dependencies
MITLicence

Size

Your viewers download less

A player with its interface, HLS and DASH, bundled from npm the same way for each. The repository measures this on every release, and you can run the script yourself.

  1. Mattebox playermain · + mattebox v0.14.0, full preset107.9 KB
  2. video.js 8 + vhsv8.24.0 · VHS built in211.5 KB
  3. shaka player + uiv5.2.10 · the ui build329.9 KB
  4. media chrome + hls.js + dash.jsv4.19.2 · hls- and dash-video-element449.2 KB
  5. video.js 10 + hls.js + dash.jsv10.0.0-rc.2 · skin, hlsjs- and dash-video474.0 KB
  6. vidstack + hls.js + dash.jsv1.15.6 · default layout524.3 KB
  7. bitmovin playerv8.279.0 · the full bundle, with its ui662.6 KB
  8. theoplayerv11.13.0 · the full bundle, with its ui721.1 KB
min+gzip · KB · each stack bundled from npm the same way, with its styles (lower is better)

See the engines and the presets compared

Features

Small does not mean less

95 features, each with its docs. Widevine, PlayReady and FairPlay. Captions in five formats. Thumbnails, chapters and trick play. Chromecast and TV remotes.

Protocols and formats

One engine reads HLS and DASH, in the containers streams are packaged in.

  • HLS with fragmented MP4 (CMAF)
  • DASH on demand and live
  • Multi-period DASH
  • HLS with MPEG-TS segments
  • Packed audio (AAC with ID3)
  • AES-128 encrypted segments
  • Codecs read from the init segment
  • Native HLS in Safari
  • Progressive MP4 and MP3
  • Safari on iPhone and iPad

Live

Sliding windows, the live edge, and wall-clock time.

  • Live HLS and live DASH
  • DVR window and seeking back
  • Go to the live edge
  • Latency behind the live edge
  • Program date time
  • CMAF timing

Quality

Adaptive bitrate you can constrain, pin, and read.

  • Adaptive bitrate
  • Cap to the player's size
  • Constraints and pins
  • Codec switching
  • Quality switch timing
  • HDR by capability
  • Quality menu

DRM

Every major key system, in the engine or on a native session.

  • Widevine
  • PlayReady
  • FairPlay
  • ClearKey
  • License renewal
  • Key sessions released on suspend
  • A license server per key system, and per source
  • DRM without the engine
  • DRM badge in the controls

Subtitles and captions

The formats broadcast and streaming both use.

  • WebVTT
  • Segmented WebVTT
  • TTML
  • CEA-608 captions
  • CEA-708 captions
  • Forced subtitles
  • Native text tracks
  • Subtitle size and background

Audio

Alternate soundtracks, named for a menu.

  • Alternate audio
  • Localized track names
  • Audio description and SDH labels
  • Channel layout of each track
  • Audio menu
  • Audio-only sources

Navigation in the content

What a viewer scrubs, skips and jumps with.

  • Thumbnails
  • Chapters
  • Trick play
  • Scrubbing
  • Frame previews from the stream
  • Timed metadata
  • Skip intro and credits
  • Chapters menu
  • Skip back and forward buttons
  • Seek preview over the bar

Network

Hooks on every request, and the CDN standards.

  • Request and response hooks
  • Retries and recovery
  • Stall recovery and gap jumping
  • Suspend and resume
  • CMCD
  • CMSD
  • Content steering
  • Preloading of the next source
  • Several sources with fallback

The player

A custom element and the controls you place inside it.

  • A custom element, no framework
  • Controls as elements you compose
  • Styling with parts and tokens
  • Labels in any language
  • Keyboard and media keys
  • Screen reader names
  • Controls that hide by priority
  • Your own icons and controls
  • Size tiers
  • Fullscreen and picture in picture
  • AirPlay
  • Playback speed menu
  • A headless core
  • Script tags from a CDN

Playlist

A list of items, from markup or from a script.

  • Next, previous, repeat and shuffle
  • The list, over the picture
  • Up next card with a countdown
  • Preload of the next item
  • Lock screen and media keys
  • A failed item is skipped

TV and casting

The living room: remotes, Chromecast, and 2021 TVs.

  • Samsung Tizen and LG webOS, from 2021 models
  • Remote control navigation
  • Seeking with the remote
  • Chromecast sender
  • Chromecast receiver

Diagnostics

See what the player did, and send it to someone who can read it.

  • Stats and the engine trace
  • Replay of a recorded trace
  • Quality of experience metrics
  • A diagnostics panel in the player
  • Typed events and error codes

The full table

The kit

Take the parts you need

Each part is a package with its own versions and its own docs. An engine alone, a player with no interface, or all of it.

0.14.0

Engine

The adaptive streaming engine for HLS and DASH: a kernel and the stages you add.

mattebox0.9.1

Player

The <mattebox-player> element and its controls.

@mattebox/player0.6.0

Player core

The headless layer under the element: sources, handlers, and the session.

@mattebox/player-core0.1.1

Playlist

A list of items for the player: next, previous, repeat, shuffle, and an up next card.

@mattebox/player-playlist0.7.0

Diagnostics

Playback stats, charts, engine state and browser support, inside the player.

@mattebox/player-diagnostics0.1.1

TV navigation

Remote control navigation for the player on Tizen, webOS and other TVs.

@mattebox/player-spatial-nav0.3.0

Cast sender

Chromecast from the player: the cast button and the screen shown while casting.

@mattebox/player-cast0.1.1

Cast receiver

The bridge between Google's Cast receiver framework and the player.

@mattebox/cast-receiver

Start

Install it and write one tag

The player is a custom element. It works in plain HTML and in any framework, from npm or from a CDN.

npm install @mattebox/player mattebox
<mattebox-player src="https://example.com/master.m3u8"></mattebox-player>

<script type="module">
  import '@mattebox/player';
</script>

Read the getting started chapter

Runs on

Browsers
Chrome, Edge, Firefox and Safari, desktop and mobile.
Safari
HLS goes to the browser where that is better, with FairPlay and AirPlay.
TVs
Samsung Tizen and LG webOS from 2021 models. The floor is Chromium 76.
Chromecast
A sender in the player, and a receiver you host.

Try it

Do not take our word for it

Every one of these opens in your browser and takes your own stream.

Player demo

The player with every control. Load your own stream, switch controls on and off, and copy the markup the page writes for you.

Engine playground

The engine with nothing hidden: the event log, the buffer timeline, the manifest, network faults you can inject, and a stage list you can edit.

Player editor

Restyle the player in the browser: a stylesheet, the markup, and a live preview side by side.

All the demos and tools

Pricing

Here is the invoice

A commercial player bills you by the impression, by the domain, or by the feature. Mattebox is MIT licensed. You get all of it, and you owe nothing.

Get startedCompare the players

MatteboxInvoice 0000
Protocols and formats0.00
HLS with fragmented MP4 (CMAF), DASH on demand and live, Multi-period DASH, HLS with MPEG-TS segments, Packed audio (AAC with ID3), AES-128 encrypted segments, Codecs read from the init segment, Native HLS in Safari, Progressive MP4 and MP3, Safari on iPhone and iPad
Live0.00
Live HLS and live DASH, DVR window and seeking back, Go to the live edge, Latency behind the live edge, Program date time, CMAF timing
Quality0.00
Adaptive bitrate, Cap to the player's size, Constraints and pins, Codec switching, Quality switch timing, HDR by capability, Quality menu
DRM0.00
Widevine, PlayReady, FairPlay, ClearKey, License renewal, Key sessions released on suspend, A license server per key system, and per source, DRM without the engine, DRM badge in the controls
Subtitles and captions0.00
WebVTT, Segmented WebVTT, TTML, CEA-608 captions, CEA-708 captions, Forced subtitles, Native text tracks, Subtitle size and background
Audio0.00
Alternate audio, Localized track names, Audio description and SDH labels, Channel layout of each track, Audio menu, Audio-only sources
Navigation in the content0.00
Thumbnails, Chapters, Trick play, Scrubbing, Frame previews from the stream, Timed metadata, Skip intro and credits, Chapters menu, Skip back and forward buttons, Seek preview over the bar
Network0.00
Request and response hooks, Retries and recovery, Stall recovery and gap jumping, Suspend and resume, CMCD, CMSD, Content steering, Preloading of the next source, Several sources with fallback
The player0.00
A custom element, no framework, Controls as elements you compose, Styling with parts and tokens, Labels in any language, Keyboard and media keys, Screen reader names, Controls that hide by priority, Your own icons and controls, Size tiers, Fullscreen and picture in picture, AirPlay, Playback speed menu, A headless core, Script tags from a CDN
Playlist0.00
Next, previous, repeat and shuffle, The list, over the picture, Up next card with a countdown, Preload of the next item, Lock screen and media keys, A failed item is skipped
TV and casting0.00
Samsung Tizen and LG webOS, from 2021 models, Remote control navigation, Seeking with the remote, Chromecast sender, Chromecast receiver
Diagnostics0.00
Stats and the engine trace, Replay of a recorded trace, Quality of experience metrics, A diagnostics panel in the player, Typed events and error codes
ImpressionsUnlimited
DomainsUnlimited
SeatsUnlimited
Licence keyNone
Sales calls0
Total due0.00