player.mux.com is a video player page that Mux hosts for every playback ID. Embed it with an <iframe> and configure it with query parameters; there is nothing to install. It plays with Video.js. Add ?player=mux-player to keep an embed on Mux Player.

<div style="position: relative; padding-top: 56.25%;">
  <iframe
    src="https://player.mux.com/{PLAYBACK_ID}?accent-color=%23fa50b5&metadata-video-id=video-123"
    style="border: none; position: absolute; top: 0; left: 0; height: 100%; width: 100%;"
    allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
    allowfullscreen="true"
  ></iframe>
</div>

Using parameters

• Add parameters to the query string of the iframe URL, and URL-encode values with encodeURIComponent().
• Boolean parameters are on when present (?muted or ?muted=true) and off when left out or set to false.
• Parameter names are case-sensitive and lowercase, exactly as listed here (?Muted=true is an unknown parameter, not muted). Values that fail validation and parameters not listed here (such as utm_source, or a Mux Player parameter player.mux.com does not support) are ignored.
• The Video.js note on each row says what the parameter becomes in the Video.js player.
• Deprecated parameters still work; switch to their replacements.

Playback

Signed playback, custom domains, resolution limits and instant clips. These shape the stream URL and the requests the player makes. For a signed playback ID, the stream URL carries only the playback token: set resolution limits and clip times in the token instead.

Behavior

How the player starts and plays.

Appearance

Colors and poster images. The page title is the title of the asset in Mux (meta.title), else Mux Video; on an asset with no title, metadata-video-title (deprecated as the page title) or the deprecated title or video-title still set it. A change to the title of an asset in Mux usually appears on player.mux.com within half an hour.

Mux Data

Every embed reports views to Mux Data in the environment of the playback ID, with no setup. These parameters add metadata or change whether views are reported.

Player choice

player.mux.com plays every embed with Video.js. Add ?player=mux-player to serve Mux Player instead, with every Mux Player parameter; it stays available as long as Mux Player is published. Both players report to Mux Data with player_name = mux-player-iframe. Before the switch to Video.js, player.mux.com did not set player_name at all (it set only player_software_name = mux-player-iframe), so a dashboard filtered on player_name alone misses every earlier view; during the transition, filter on player_name = mux-player-iframe OR player_software_name = mux-player-iframe.

Use ?player=mux-player to keep an embed on Mux Player:

<div style="position: relative; padding-top: 56.25%;">
  <iframe
    src="https://player.mux.com/{PLAYBACK_ID}?player=mux-player"
    style="border: none; position: absolute; top: 0; left: 0; height: 100%; width: 100%;"
    allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
    allowfullscreen="true"
  ></iframe>
</div>

Browser support

The Video.js player supports Chrome and Edge 111 and later, Firefox 121 and later, and Safari 16.4 and later on Mac and iOS (Video.js browser support). Some videos play through Media Source Extensions, which iPhones have only in recent iOS versions. In older browsers the video may not play.

To support older browsers, install Video.js in your own page, where you control the build and can choose a compatibility setup, or contact Mux support.

Deprecated

These parameters and values still work on player.mux.com, but they may stop working in a future version. Switch to the replacement in the last column.

player.js control

Both players implement the player.js receiver, so you can control an embed from the parent page.

<iframe id="player" src="https://player.mux.com/{PLAYBACK_ID}" allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;" allowfullscreen="true"></iframe>
<script defer src="https://cdn.jsdelivr.net/npm/player.js@0.1.0/dist/player-0.1.0.min.js"></script>
<script type="module">
  const player = new playerjs.Player('player');
  player.on('ready', () => {
    player.on('timeupdate', ({ seconds, duration }) => console.log(seconds, duration));
    player.setVolume(50);
    player.setCurrentTime(30);
    player.play();
  });
</script>

Methods

Events

oEmbed

Every player page links to its oEmbed endpoint with <link rel="alternate" type="application/json+oembed">, so sites that support oEmbed turn a pasted player.mux.com link into an embed.

GET https://player.mux.com/api/oembed?url=https%3A%2F%2Fplayer.mux.com%2F{PLAYBACK_ID}

The response is a video oEmbed object whose html is the iframe embed, sized to fit maxwidth and maxheight, with the poster as its thumbnail. An audio-only asset, or one that does not exist, has no thumbnail unless poster sets one. Its title, like the page title, is the title of the asset in Mux, else metadata-video-title (deprecated as the page title), else the deprecated title or video-title, else Mux Video.

Watch page

https://player.mux.com/watch/{PLAYBACK_ID} is a full-page player with a link-sharing footer, for sending a video to someone rather than embedding it. It takes the same parameters as the embed. Opening https://player.mux.com/{PLAYBACK_ID} directly in a browser tab shows the same page; inside an iframe that URL shows only the player. Views from the watch page report page_type watchpage to Mux Data.

Mux Data fields

Both players set these fields. Filter on player_name = mux-player-iframe to see every player.mux.com view, and use player_software_name to tell the two players apart. Views from before the switch to Video.js have no player_name; to include them, filter on player_name = mux-player-iframe OR player_software_name = mux-player-iframe.