Using Mux Player

Quickstart

Mux Player is a web component that makes video playback simple. It works with any HLS stream, not just Mux-hosted videos. Just drop in the <mux-player> tag and you’re done.

Add your HTML

Mux Player is a custom HTML element. The key parts:

1. The src attribute is your HLS stream URL
2. The poster attribute is your thumbnail
3. Add controls to show the player controls

1
<mux-player
2
  src="https://worker.antcdn.net/v1/{edgeKey}/master.m3u8"
3
  poster="https://worker.antcdn.net/v1/thumbnail/{edgeKey}.png?width=1920&timeStamp=30"
4
  stream-type="on-demand"
5
  controls
6
  playsinline
7
  style="width:100%; aspect-ratio:16/9;"
8
></mux-player>

Add your JavaScript

Just import the package and the web component registers itself:

import '@mux/mux-player';

Or use a CDN:

1
<script type="module" src="https://cdn.jsdelivr.net/npm/@mux/mux-player@latest"></script>

That’s it. No initialization code needed.

Demo Video

Here’s what Mux Player looks like:

Ads (optional)

Mux Player doesn’t ship with a first-party ads plugin. If you need IMA/VMAP ads, integrate IMA separately and keep ad logic separate from your AntCDN playback URL; the playback URL stays https://worker.antcdn.net/v1/{edgeKey}/master.m3u8 (plus ?jwt=... for private).